지역 사회
배우다
도구 라이브러리
AI 도구
여가
찾다
한국어
목차
BOM: js가 액세스할 수 있도록 브라우저 창을 개체 모델로 캡슐화합니다. 가장 중요한 개체는 다음과 같습니다. window
두 개의 타이머:
일회성 타이머: setTimeout(),clearTimeout()
주기적인 타이머; setInterval(),clearInterval()
작은 예" > 작은 예
DOM--Document Object Model
Document Object Model(DOM: Document Object Model):
Document: 마크업 문서(HTML, XML). 기능: 태그 외에도 태그로 캡슐화된 콘텐츠입니다
객체: 속성과 동작을 캡슐화하고 직접 호출할 수 있는 엔터티입니다.
모델: 태그가 지정된 모든 문서가 공유하는 몇 가지 공통 특성을 반영합니다.
DOM = BOM(브라우저 개체 모델) + DOM(문서 개체 모델)
DHTML: 동적 HTML, 언어가 아니라 다중 기술 복합체의 약어입니다. DHTML = HTML + CSS + DOM + JS
기술 경계:
HTML: 태그 내 데이터 작업을 용이하게 하기 위해 태그 제공 및 데이터 캡슐화를 담당합니다.
CSS: 스타일 속성을 제공하고 태그의 데이터 스타일을 정의하는 역할을 담당합니다.
DOM: 태그가 지정된 문서와 문서의 모든 콘텐츠를 객체로 캡슐화하고 구문 분석하는 일을 담당합니다. 개체에 대한 작업을 용이하게 하기 위해 개체에 더 많은 속성과 동작이 정의되어 있습니다.
JS: 프로그래밍 언어 제공을 담당합니다. --if, for, var, function, ...
집 웹 프론트엔드 JS 튜토리얼 2부 빠른 시작 - JS 기초 실용적인 BOM - 브라우저 개체 모델, DOM

2부 빠른 시작 - JS 기초 실용적인 BOM - 브라우저 개체 모델, DOM

php是最好的语言
php是最好的语言
Jul 28, 2018 am 10:41 AM


BOM: js가 액세스할 수 있도록 브라우저 창을 개체 모델로 캡슐화합니다. 가장 중요한 개체는 다음과 같습니다. window

<!DOCTYPE html>
<html>
    <head>
        <title>BOM--浏览器对象模型</title>
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <script type="text/javascript">
            function resizeWindow(){
                window.resizeTo(500, 300)
            }
        </script>
        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    </head>
    <body>
        <pre class="brush:php;toolbar:false">
  BOM:把浏览器窗口封装成对象模型，供js进行访问。最重要的一个对象是:window

window中的属性演示



前进


로그인 후 복사

두 개의 타이머:

일회성 타이머: setTimeout(),clearTimeout()

주기적인 타이머; setInterval(),clearInterval() 

<!DOCTYPE html>
<html>
    <head>
        <title>BOM--浏览器对象模型</title>
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
        <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
    </head>
    <body>
        <h3>window中的方法演示</h3>
        <script type="text/javascript">
            function fun1(){
                window.close();//关闭窗口
            }
            
            function fun2(){
                var boo = window.confirm("是否真的要做某事?");//消息确认
                if (boo) {
                    alert("做某事....");
                }
                else {
                    alert("不做某事....");
                }
            }
            
            
            function fun3(){
                window.moveBy(10, 10);//经测试，当前浏览器，不支持
            }
        </script>
        <input type="button" value="window对象中的close()方法演示" onclick="fun1();">
        <br/>
        <input type="button" value="window对象中的confirm()方法演示" onclick="fun2();">
        <br/>
        <input type="button" value="window对象中的moveBy()方法演示" onclick="fun3();">
        <br/>
        <br/>
        <br/>
        <!--///////////////以下演示定时器////////////////// -->
        <!--这个定时器是一次性的，setTimeout(),clearTimeout()-->
        <input type="button" value="启动定时器1" onclick="start1();">
        <br/>
        <input type="button" value="关闭定时器1" onclick="stop1();">
        <br/>
        <script type="text/javascript">
            var t1;//全局变量
            function start1(){
                t1 = window.setTimeout("aa()", 1000);//返回值为当前闭定时器的id
            }
            
            function aa(){
                alert("aaa.....");
            }
            
            function stop1(){
                t1 = window.clearTimeout(t1);//指定所关闭定时器的id
            }
        </script>
		
		 <!--这个定时器是周期性的，setInterval(),clearInterval()-->
    <input type="button" value="启动定时器2" onclick="start2();"> <br/>
    <input type="button" value="关闭定时器2" onclick="stop2();"> <br/>
	<script type="text/javascript">
	    var t2;
			function start2(){
				//t2=window.setInterval("bb()",2000);
				t2=setInterval("bb()",2000);//返回值为当前闭定时器的id
			}
	 	function bb(){
			//window.alert("bbbbbbb.....");
			alert("bbbbbbb.....");
		}
		
		function stop2(){
			//window.clearInterval(t2); //指定所关闭定时器的id
			clearInterval(t2); //指定所关闭定时器的id
		}
    </script>
	<hr/>
	<!--打开新窗口: open() -->
	 <input type="button" value="新开一个窗口" onclick="demo();"> <br/>
	<script type="text/javascript">
		function demo(){
			//window.open(URL,name,features,replace)
			window.open("ad.html","ad","height=300,width=300,status=no,location=no");
		}
	
	</script>
	
	<input type="button" onclick="disp_prompt()" value="Display a prompt box" /> <br/>

	<script type="text/javascript">
		   function disp_prompt(){
			  var name=prompt("Please enter your name","")
			  if (name!=null && name!="")
			    {
			    document.write("Hello " + name + "!")
			    }
		   }
			 
     </script>


	<input type="button" onclick="disp_scrollBy()" value="Display scrollBy" /> <br/>
	<script type="text/javascript">
		   function disp_scrollBy(){
		   	   scrollBy(10, 10);//模拟用户点击滚动条动作
		   }
     </script>
	<h2>为了演示滚动效果</h2>
	<h2>为了演示滚动效果</h2>
	<h2>为了演示滚动效果</h2>
	<h2>为了演示滚动效果</h2>
	<h2>为了演示滚动效果</h2>
	<h2>为了演示滚动效果</h2>
	<h2>为了演示滚动效果</h2>
	<h2>为了演示滚动效果</h2>
    </body>
</html>
로그인 후 복사

작은 예

<!DOCTYPE html>
<html>
  <head>
    <title>ad.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    
    <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

  </head>
  
  <body>
   <h2>一条广告消息</h2>
		<h2>一条广告消息</h2>
		<h2>一条广告消息</h2>
		<form>
		   Name:<input type="text" name="name">
		   <input type="submit" value="注册">
		</form>
		
		<script type="text/javascript">
			//3秒后自动关闭窗口
			setTimeout("window.close();",3000);
		</script>
  </body>
</html>
로그인 후 복사
<!DOCTYPE html>
<html>
  <head>
  	<meta http-equiv="Content-Type"  content="text/html; charset=UTF-8">
    <title>BOM---浏览器对象模型</title>
	<script>
		function resizeWindow()
  	{
 		 window.resizeTo(500,300)
  	}
	</script>

  </head>
  
  <body>
   <h3>history演示中的第二个页面</h3>
   <script>
   	 function fun1(){
	 	//"window."可以省略
		//window.history.back(); //go(-1)
	  	history.back();//go(-1)
	  }
	
   </script>
   
   <a href="#" onclick="fun1 ();">后退</a>
  </body>
</html>
로그인 후 복사

DOM--Document Object Model

Document Object Model(DOM: Document Object Model):

Document: 마크업 문서(HTML, XML). 기능: 태그 외에도 태그로 캡슐화된 콘텐츠입니다

객체: 속성과 동작을 캡슐화하고 직접 호출할 수 있는 엔터티입니다.

모델: 태그가 지정된 모든 문서가 공유하는 몇 가지 공통 특성을 반영합니다.

DOM = BOM(브라우저 개체 모델) + DOM(문서 개체 모델)

DHTML: 동적 HTML, 언어가 아니라 다중 기술 복합체의 약어입니다. DHTML = HTML + CSS + DOM + JS
기술 경계:

HTML: 태그 내 데이터 작업을 용이하게 하기 위해 태그 제공 및 데이터 캡슐화를 담당합니다.

CSS: 스타일 속성을 제공하고 태그의 데이터 스타일을 정의하는 역할을 담당합니다.

DOM: 태그가 지정된 문서와 문서의 모든 콘텐츠를 객체로 캡슐화하고 구문 분석하는 일을 담당합니다. 개체에 대한 작업을 용이하게 하기 위해 개체에 더 많은 속성과 동작이 정의되어 있습니다.

JS: 프로그래밍 언어 제공을 담당합니다. --if, for, var, function, ...

<!DOCTYPE html>
<html>
    <head>
        <title>DOM--文档对象模型</title>
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="this is my page">
        <meta http-equiv="content-type" content="text/html; charset=UTF-8">
   
        </script>
        <style type="text/css">
            .d {
                background-color: #00ff00;
                width: 200px;
                height: 40px;
            }
        </style>
    </head>
    <body>
        <pre class="brush:php;toolbar:false">
  文档对象模型(DOM: Document Object Model):
  文档:标记型文档(HTML,XML)。特征:里面除了标签，就是标签封装的内容
  对象:封装了属性和行为的实体，可以被直接调用。
  模型:所有标记型文档都具备一些共有特征的一个体现。 
  
  DOM = BOM(浏览器对象模型) + DOM(文档对象模型)

  DHTML：动态HTML，它不是一门语言，是多项技术综合体的简称。
  DHTML = HTML + CSS + DOM + JS
  技术边界:
  HTML: 负责提供标签，对数据进行封装，目的是便于对该标签中的数据进行操作。
  CSS: 负责提供样式属性，对标签中的数据进行样式的定义。
  DOM: 负责将标记型文档以及文档中的所有内容进行封装成对象，解析。
               在对象中定义了更多的属性和行为，便于对对象进行操作。
  JS: 负责提供程序设计语言。--if, for, var , function, ...

로그인 후 복사

관련 기사:

파트 1 빠른 시작 - js 기본 연습의 날짜, 수학 및 전역 객체

파트 3 빠른 시작 - js 기본 실습 애플리케이션 코드 공유

관련 동영상:

프런트 엔드 JS 개발을 위한 27가지 클래식 실용적인 동영상 튜토리얼 - 무료 온라인 동영상 튜토리얼

위 내용은 2부 빠른 시작 - JS 기초 실용적인 BOM - 브라우저 개체 모델, DOM의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

더보기

인기 기사

R.E.P.O. 에너지 결정과 그들이하는 일 (노란색 크리스탈)
1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. 최고의 그래픽 설정
1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌
어 ass 신 크리드 그림자 : 조개 수수께끼 솔루션
3 몇 주 전 By DDD
Windows 11 KB5054979의 새로운 기능 및 업데이트 문제를 해결하는 방법
2 몇 주 전 By DDD
Will R.E.P.O. 크로스 플레이가 있습니까?
1 몇 달 전 By 尊渡假赌尊渡假赌尊渡假赌
더보기

뜨거운 도구

메모장++7.3.1

메모장++7.3.1

사용하기 쉬운 무료 코드 편집기

SublimeText3 중국어 버전

SublimeText3 중국어 버전

중국어 버전, 사용하기 매우 쉽습니다.

스튜디오 13.0.1 보내기

스튜디오 13.0.1 보내기

강력한 PHP 통합 개발 환경

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

SublimeText3 Mac 버전

SublimeText3 Mac 버전

신 수준의 코드 편집 소프트웨어(SublimeText3)

더보기

뜨거운 주제

Gmail 이메일의 로그인 입구는 어디에 있나요?
7555
15
Cakephp 튜토리얼
1384
52
Steam의 계정 이름 형식은 무엇입니까?
83
11
Win11 활성화 키 영구
59
19
NYT 연결 힌트와 답변
28
96
더보기
Related knowledge
내 자신의 JavaScript 라이브러리를 어떻게 작성하고 게시합니까? 내 자신의 JavaScript 라이브러리를 어떻게 작성하고 게시합니까? Mar 18, 2025 pm 03:12 PM

기사는 JavaScript 라이브러리 작성, 게시 및 유지 관리, 계획, 개발, 테스트, 문서 및 홍보 전략에 중점을 둡니다.

브라우저에서 성능을 위해 JavaScript 코드를 최적화하려면 어떻게해야합니까? 브라우저에서 성능을 위해 JavaScript 코드를 최적화하려면 어떻게해야합니까? Mar 18, 2025 pm 03:14 PM

이 기사는 브라우저에서 JavaScript 성능을 최적화하기위한 전략에 대해 설명하고 실행 시간을 줄이고 페이지로드 속도에 미치는 영향을 최소화하는 데 중점을 둡니다.

프론트 엔드 열 용지 영수증에 대한 차량 코드 인쇄를 만나면 어떻게해야합니까? 프론트 엔드 열 용지 영수증에 대한 차량 코드 인쇄를 만나면 어떻게해야합니까? Apr 04, 2025 pm 02:42 PM

프론트 엔드 개발시 프론트 엔드 열지대 티켓 인쇄를위한 자주 묻는 질문과 솔루션, 티켓 인쇄는 일반적인 요구 사항입니다. 그러나 많은 개발자들이 구현하고 있습니다 ...

누가 더 많은 파이썬이나 자바 스크립트를 지불합니까? 누가 더 많은 파이썬이나 자바 스크립트를 지불합니까? Apr 04, 2025 am 12:09 AM

기술 및 산업 요구에 따라 Python 및 JavaScript 개발자에 대한 절대 급여는 없습니다. 1. 파이썬은 데이터 과학 및 기계 학습에서 더 많은 비용을 지불 할 수 있습니다. 2. JavaScript는 프론트 엔드 및 풀 스택 개발에 큰 수요가 있으며 급여도 상당합니다. 3. 영향 요인에는 경험, 지리적 위치, 회사 규모 및 특정 기술이 포함됩니다.

브라우저 개발자 도구를 사용하여 JavaScript 코드를 효과적으로 디버그하려면 어떻게해야합니까? 브라우저 개발자 도구를 사용하여 JavaScript 코드를 효과적으로 디버그하려면 어떻게해야합니까? Mar 18, 2025 pm 03:16 PM

이 기사는 브라우저 개발자 도구를 사용하여 효과적인 JavaScript 디버깅, 중단 점 설정, 콘솔 사용 및 성능 분석에 중점을 둡니다.

JavaScript를 사용하여 동일한 ID와 동일한 ID로 배열 요소를 하나의 객체로 병합하는 방법은 무엇입니까? JavaScript를 사용하여 동일한 ID와 동일한 ID로 배열 요소를 하나의 객체로 병합하는 방법은 무엇입니까? Apr 04, 2025 pm 05:09 PM

동일한 ID로 배열 요소를 JavaScript의 하나의 객체로 병합하는 방법은 무엇입니까? 데이터를 처리 할 때 종종 동일한 ID를 가질 필요가 있습니다 ...

소스 맵을 사용하여 조정 된 JavaScript 코드를 디버그하는 방법은 무엇입니까? 소스 맵을 사용하여 조정 된 JavaScript 코드를 디버그하는 방법은 무엇입니까? Mar 18, 2025 pm 03:17 PM

이 기사는 소스 맵을 사용하여 원래 코드에 다시 매핑하여 미니어링 된 JavaScript를 디버그하는 방법을 설명합니다. 소스 맵 활성화, 브레이크 포인트 설정 및 Chrome Devtools 및 Webpack과 같은 도구 사용에 대해 설명합니다.

Demystifying JavaScript : 그것이하는 일과 중요한 이유 Demystifying JavaScript : 그것이하는 일과 중요한 이유 Apr 09, 2025 am 12:07 AM

JavaScript는 현대 웹 개발의 초석이며 주요 기능에는 이벤트 중심 프로그래밍, 동적 컨텐츠 생성 및 비동기 프로그래밍이 포함됩니다. 1) 이벤트 중심 프로그래밍을 사용하면 사용자 작업에 따라 웹 페이지가 동적으로 변경 될 수 있습니다. 2) 동적 컨텐츠 생성을 사용하면 조건에 따라 페이지 컨텐츠를 조정할 수 있습니다. 3) 비동기 프로그래밍은 사용자 인터페이스가 차단되지 않도록합니다. JavaScript는 웹 상호 작용, 단일 페이지 응용 프로그램 및 서버 측 개발에 널리 사용되며 사용자 경험 및 크로스 플랫폼 개발의 유연성을 크게 향상시킵니다.

See all articles