찾다

집 >웹 프론트엔드 >JS 튜토리얼 >Javascript에서 BOM과 DOM의 차이점과 연결 비교

Javascript에서 BOM과 DOM의 차이점과 연결 비교

巴扎黑
巴扎黑원래의
2017-08-09 11:18:141348검색

1.Javascript 구성

JavaScript 구현에는 다음 3 부분이 포함됩니다.

1) 핵심(ECMAScript): 설명 JS 의 구문 및 기본 개체.

2) 문서 개체 모델(DOM): 웹 콘텐츠 처리를 위한 방법 및 인터페이스

3) 브라우저 개체 모델(BOM): 브라우저와 상호 작용 메서드 및

ECMAScript 인터페이스 스크립트 .

② "ECMAScript는 다양한 유형의 호스트 환경에 핵심 스크립팅 기능을 제공할 수 있습니다..." 즉, ECMAScript는 JS 호스트와 같은 특정 호스트 환경에 바인딩되지 않습니다. 환경은 브라우저이고

AS

의 호스트 환경은 Flash입니다. 3ECMAScript에서는 구문, 유형, 명령문, 키워드, 예약어, 연산자, 객체를 설명합니다. 우리 모두는 javascript

가 ECMAScript, DOM 및 BOM의 세 부분으로 구성되어 있다는 것을 알고 있습니다. 구체적인 표현은 호스트(브라우저)에 따라 다르며, ie 및 기타 브라우저는 매우 다릅니다. 스타일.

1. DOM

은

W3C

의 표준입니다. [모든 브라우저가 공개적으로 준수하는 표준입니다. ]

2. 각 브라우저 제조업체가

에 따라 채택하는 표준입니다. DOM 브라우저에서의 구현 ; [ 다른 브라우저 정의로 나타남 , 구현 방법이 다릅니다 ]
3 창 은 BOM
개체입니다. js 개체; DOM(문서 개체 모델)은 HTML 및 XML의 API(응용 프로그래밍 인터페이스)입니다. BOM은 주로 브라우저 창과 프레임을 다루지만 일반적으로 브라우저별 JavaScript 확장은 BOM
의 일부로 간주됩니다. 이러한 확장에는 다음이 포함됩니다. 새 브라우저 창 팝업 브라우저 창 이동, 닫기 및 크기 조정 브라우저 세부 정보를 제공하는 웹

위치 개체 제공

사용자 화면 해상도 세부 정보 제공 화면 개체 지원

쿠키용

IE 扩展了 BOM，加入了ActiveXObject类，可以通过JavaScript实例化ActiveX对象

javacsript是通过访问BOM（Browser Object Model）对象来访问、控制、修改客户端(浏览器)，由于BOM的window包含了document，window对象的属性和方法是直接可以使用而且被感知的，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM（Document Object Model）模型的根节点。可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。其中
DOM包含：window

Window对象包含属性：document、location、navigator、screen、history、frames

Document根节点包含子节点：forms、location、anchors、images、links

从window.document已然可以看出，DOM的最根本的对象是BOM的window对象的子对象。

区别：DOM描述了处理网页内容的方法和接口，BOM描述了与浏览器进行交互的方法和接口

 

 

1.1 DOM, DOCUMENT, BOM, WINDOW 区别

DOM 全称是 Document Object Model，也就是文档对象模型。是针对XML的基于树的API。描述了处理网页内容的方法和接口，是HTML和XML的API，DOM把整个页面规划成由节点层级构成的文档。针对XHTML和HTML的DOM。这个DOM定义了一个HTMLDocument和HTMLElement做为这种实现的基础,就是说为了能以编程的方法操作这个 HTML 的内容（比如添加某些元素、修改元素的内容、删除某些元素），我们把这个 HTML 看做一个对象树（DOM树），它本身和里面的所有东西比如

이러한 태그는 객체로 간주되며 각 객체는 DOM에 있는 모든 객체의 상위 클래스로 이해될 수 있습니다.

DOM은 어떤 용도로 사용되나요? 예를 들어 JS를 통해 이 웹페이지의 제목을 변경하려면 다음과 같이 하세요.

document.title = 'how to make love';

이 API를 사용하면 웹페이지를 다음과 같이 만들 수 있습니다. 다운로드 브라우저 접속 후 웹페이지의 내용을 변경할 수 있습니다.

document

브라우저가 웹 페이지(일반적으로 HTML)를 다운로드할 때 이 HTML을 문서라고 합니다(물론 DOM 트리의 노드이기도 합니다). 위 그림에서 볼 수 있듯이 문서는 일반적으로 문서입니다. 전체 DOM 트리. 이 문서에는 JS에서 직접 접근할 수 있는 제목(document.title), URL(document.URL)과 같은 속성이 포함되어 있습니다.

브라우저 창에는 여러 문서가 있을 수 있습니다. 예를 들어 iframe을 통해 로드된 페이지는 각각 문서입니다.

JS에서는

document.body;document.getElementById('xxx');


BOM

BOM과 같은 문서를 통해 하위 노드에 액세스할 수 있습니다(사실 모든 노드에서 가능). 브라우저 개체 모델,Javascript에서 BOM과 DOM의 차이점과 연결 비교브라우저 개체 모델.


DOM은 문서를 조작하는 것처럼 보이는 인터페이스라고 했는데, BOM은 이름에서 알 수 있듯이 실제로는 브라우저의 동작을 제어하는 것처럼 보이는 인터페이스입니다.

브라우저는 무엇을 할 수 있나요? 예를 들어, 다른 페이지로 이동하거나 앞으로, 뒤로 이동하는 등의 작업을 수행하려면 프로그램에서 화면 크기와 같은 매개변수를 얻어야 할 수도 있습니다.

그래서 BOM은 이런 것들을 해결해 주는 인터페이스인 것 같습니다. 예를 들어 브라우저가 다른 페이지로 이동하도록 하려면

location.href = "http://www.xxxx.com";


이 위치는 BOM의 개체만 있으면 됩니다.

window

window는 프로그래밍 측면에서 "백업 개체" 외에도 BOM의 개체이기도 합니다. 이 개체는 창 위치를 가져오고 창 크기를 결정하고 대화 상자를 팝업하는 데 사용할 수 있습니다. 상자 등 예를 들어, 현재 창을 닫고 싶습니다.

window.close();



질문을 요약하면:

DOM은 문서 운영을 위한 API이고, document는 문서 운영을 위한 API입니다. 브라우저에 나타나는 API인 window는 그 객체입니다.

은 DOM에서 관리합니다:

E

영역(그렇게 말씀하셨습니다 document. By 웹개발자들이 고생해서 작성했어요A index.html, CSS 및 JS이 포함된 폴더입니다. 서버에 배포하면 브라우저의 주소 표시줄을 통해 URL을 입력한 다음 Load this 을 반환할 수 있습니다. document 로컬에서 찾아보기, 소스 코드 등을 보려면 마우스 오른쪽 버튼을 클릭하세요.

은 BOM:

A

영역(브라우저 탭 페이지, 주소 표시줄)에서 관리됩니다. 바, 북마크바, 창 확대 복원 닫기 버튼, 메뉴바 등)

B

영역 (브라우저 우클릭 메뉴)

C

영역 (document 로딩시 http상태 코드 등을 표시하는 상태 표시줄)

D

영역(스크롤 막대스크롤 막대)

BOM은 브라우저 개체 모델이고 DOM은

문서입니다. 객체 모델 , 전자는 브라우저 자체에서 작동하는 반면 후자는 브라우저의 콘텐츠에서 작동합니다(컨테이너로 볼 수 있음)

BOM 및 DOM 구조적 관계의 도식적 다이어그램

2. 문서 개체 모델(DOM)

DOM노드 트리 모델(HTML DOM트리를 예로 사용)

DOM모델은 전체 문서(XML)를 결합합니다. document 및 HTMLdocument)은 트리 구조로 표시되고,

DOM에서는 HTMLdocument의 계층 구조가 트리 구조로 표현됩니다. 그리고 document 개체를 사용하여 문서를 나타내고 트리의 각 하위 노드는 HTML 문서의 다양한 콘텐츠를 나타냅니다.

브라우저에 로드된 모든 HTML 문서는 Document 개체 가 됩니다. Document는 DOM,을 탐색할 수 있는 입구입니다. 전역 변수 문서 Document 개체에 액세스할 수 있습니다.

2.1 알아보기 DOM

먼저 아래 코드를 살펴보세요.

HTML 코드를 DOM 노드 계층 다이어그램으로 분해 :

DOM은 트리를 생성하여 문서를 표현하고 웹 콘텐츠 처리를 위한 방법과 인터페이스를 설명하므로 개발자는 DOM API를 사용하여 문서의 콘텐츠와 구조를 전례 없이 쉽게 삭제, 추가 및 교체할 수 있습니다.

1) 노드 유형

DOM은 문서의 각 구성 요소가 노드라고 규정합니다(Node), HTML문서는 노드의 집합이라고 할 수 있습니다. DOMnodes have :

1. Element 노드(Element): 위 그림에서 , , etc.는 요소 노드, 즉 레이블입니다.

2. 텍스트 노드(Text):사용자에게 표시되는 콘텐츠(예:

  • ...
    • JavaScript) , DOM, CSS 및 기타 텍스트.

    3.

    속성 노드(Attr):요소에만 속성이 있습니다(예: label의 링크 속성href="http:/) /www.baidu.com".

    1) DOM노드의 세 가지 주요 속성(XML DOM)

    1)nodeName: 요소 노드, 속성 노드 및 텍스트 노드는 각각 요소의 이름을 반환합니다. 속성 이름과 #text 문자열입니다.

    2)nodeType: 요소 노드, 속성 노드, 텍스트 노드의 nodeType 값은 1, 2, 3입니다. 각각 . 、

    3)nodeValue: 요소 노드, 속성 노드 및 텍스트 노드의 반환 값은 각각 null, 속성 값 및 텍스트 노드 내용입니다.

    2.2 DOM일반 작업

    Node은 모든 노드의 상위 인터페이스로, 다음과 같이 공용 속성 및 메서드 집합을 정의합니다.

    Javascript에서 BOM과 DOM의 차이점과 연결 비교1) 노드 가져오기

    ① 요소 노드 가져오기: document의 세 가지 방법을 통해

    document.getElementById("ID")

    document.getElementByName("name")

    document.getElementsByTagName("p");

    을 가져옵니다. object ② 속성 노드 얻기: 속성 노드는 요소 노드에 붙어있습니다. 요소 노드의 getAttributeNode(attrName) 메소드를 통해 속성 노드를 얻거나, getAttribute(attrName)을 통해 직접 속성 값을 얻을 수 있습니다. ). (반대로, Element 인터페이스의 setAttribute(attrName)은 , attrValue)메서드, 속성이 존재하지 않으면 요소 노드에 직접 추가됨)

    3 텍스트 노드 가져오기: 텍스트 노드는 요소 노드의 하위 노드이며, 요소 노드(Element 인터페이스) childnodes()[index] 메서드로 가져옵니다.

    childNodes //NodeList, 모든 하위 노드 목록

    firstChild //Node, childNodes 목록의 첫 번째 노드를 가리킴

    lastChild //Node, childNodes 목록의 마지막 노드를 가리킴

    parentNode / /Node, 상위 노드

    previousSibling /Node, /는 이전 형제 노드를 가리킵니다. 이 노드가 첫 번째 노드이면 값은 null입니다.

    nextSibling //Node, 다음 형제 노드를 가리킵니다. if 이 노드는 마지막 노드이고 값은 null

    hasChildNodes()` //Boolean, childNodes에 하나 이상의 노드가 포함된 경우 true 값을 반환합니다

    Javascript에서 BOM과 DOM의 차이점과 연결 비교2)노드 변경

    ① 속성 노드 값 변경: 속성 노드의 nodeValue을 통해 속성 값을 직접 수정할 수도 있고, 요소 노드의 setAttribute() 메소드를 통해 변경할 수도 있습니다.

    ② 텍스트 노드의 값 변경: 텍스트 노드의 nodeValue을 통해 직접 수정합니다.

    HTML DOM에서 요소의 콘텐츠를 가져오고 변경하는 가장 쉬운 방법은 요소의 innerHTML 속성을 사용하는 것입니다(innerText 속성은 innerHTML을 반환합니다)

    확장:

    innerText, innerHTML, externalHTML, externalText

    innerText: 表示起始标签和结束标签之间的文本

    innerHTML: 表示元素的所有元素和文本的HTML代码

    如：

    Hello world
    innerText는 Hello world, innerHTML은 Hello world

    outerText: 전자와의 차이점은 전체 대상 노드가 교체되고 문제는 innerText

    outerHTML과 동일한 콘텐츠를 반환한다는 것입니다. 전자와의 차이점은 전체 대상 노드가 교체되고 요소 자체를 포함하여 요소의 전체 HTML 코드가 반환됩니다.

    OUTHTML, innerText 및 innerHTML을 이해하기 위한 그림:

    HTML 스타일 변경(style 속성): element.style.color ="red";

    3) 노드 삭제

    ① 요소 노드 삭제: 삭제 요소 노드 A, 를 가져와야 함 A의 상위 노드 B는 17.1.1의 메서드를 통해 또는 parentNode 속성을 통해 직접 얻을 수 있습니다. A(권장). B의 removeChild(A)를 호출하여 A 노드를 삭제합니다.

    ② 속성 노드 삭제: 해당 속성 노드가 속한 요소 노드의

    removeAttribute(attrName) 또는 removeAttributeNode(node)을 통해 삭제할 수 있습니다.

    3 텍스트 노드 지우기: 가장 간단하고 일반적인 방법은 텍스트 노드의

    nameNode 속성을 빈 문자열로 직접 설정하는 것입니다: textNode.nodeValue ="".

    혼란 지점:

    이것은 텍스트입니다

    < /span> ;

    var p = document.getElementById('example');

    p.nodeValue //null, p

    는 요소 노드이므로 nodeValue는 null TP.GetattributeNode입니다. ('ID').NodeValue // 예,

    P

    의

    ID 속성 노드를 얻으려면 NodeValue가 해당 속성 값 p.childNodes입니다. [0].nodeValue //이것은 텍스트 조각입니다. p

    에는 두 개의 하위 노드가 포함되어 있습니다. 삽입된 텍스트에는 레이블이 없지만 여전히 노드입니다.

    해당 유형은 텍스트 노드이고

    nodeValue

    는 줄 바꿈 및 들여쓰기를 포함하여 여기에 작성된 문자열입니다.

    p.innerHTML//이것은 텍스트 < /span>"Here

    innerHTML

    은

    p

    에 포함된 모든 노드에 포함된 다양한 값을 문자열 형식으로 반환합니다.

    4）创建和添加节点

    ① 创建节点：通过document对象的createElement(eleName)、createTextNode(nodeValue)方法可分别创建元素节点和文本节点。属性节点也有自己的create方法，但是用的少，直接用元素节点的setAttribute()方法即可添加属性。

    ② 添加节点：两个重要的方法：appendChild()和insertBefore()，具体见Node接口中的方法。

    扩展：上面的两个方法都是在已知父节点时用到的，也可以直接在兄弟节点后添加新节点：x.insertBefore(newNode)和x.appendChild(newNode)都可以向x后追加一个新的子节点。

    5）替换节点

    主要掌握replaceChild(newNode , oldNode) 替换元素节点。（属性节点和文本节点有更简单的方法）

     

     

     

     

    2.3 DOM事件

    DOM同时两种事件模型：冒泡型事件和捕获型事件

    冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标的顺序触发

      

    Click Me

    触发的顺序是：div、body、html(IE 6.0和Mozilla 1.0)、document、window(Mozilla 1.0)

     

    捕获型事件：与冒泡事件相反的过程，事件从最不精确的对象开始触发，然后到最精确

    上面例子触发的顺序是：document、div

    DOM事件模型最独特的性质是，文本节点也触发事件(在IE中不会)。

    Javascript에서 BOM과 DOM의 차이점과 연결 비교1）事件处理函数/监听函数

    在JavaScript中：

    var oDiv = document.getElementById("div1");

    oDiv.onclick = function(){ //onclick只能用小写

       alert("Clicked!");

    }

    或者

    var elem =document.getElementById(“id”)

    elem.onmouseover=handleMouseOver  //handleMouseOver  是函数名

    Function handleMouseOve(e){...}

     

    在HTML中：

    //onclick 대소문자는 임의적입니다.

    Extension:

    IE 이벤트 핸들러 attachmentEvent() 및 detachEvent()

    IE에서는 각 요소와 창 객체에 두 개의 메서드(attachEvent( ) 및 detachEvent()가 있습니다) , 이 두 메서드는 다음과 같이 동일한 두 매개 변수인 이벤트 핸들러 이름과 이벤트 핸들러 함수를 허용합니다. ,"function_to_remove")

    var fnClick = function(){

    Alert("Clicked!");

    }

    oDiv.attachEvent("onclick", fnClick) //이벤트 처리 함수 추가

    oDiv. attachmentEvent("onclick", fnClickAnother); //여러 이벤트 처리 함수를 추가할 수 있습니다.

    oDiv.detachEvent("onclick", fnClick); //이벤트 처리 함수 제거

    attachEvent( ) 메소드를 사용하면 이벤트 핸들러가 실행됩니다. 전역 범위에서는 window와 같습니다.

    2) 크로스 브라우저 이벤트 핸들러

    addHandler() 및 RemoveHandler()addHandler() 메서드는 모두 EventUntil()이라는 개체에 속합니다. 두 메서드 모두 작업의 요소, 이벤트 이름, 및 이벤트 핸들러 기능.

    3) 이벤트 유형

    마우스 이벤트: click, dbclick, mousedown, mouseup, mouseover, mouseout, mousemove 키보드 이벤트: keydown, keypress, keyup

    HTML 이벤트: 로드, 언로드, 중단, 오류, 선택 , 변경, 제출, 재설정, 크기 조정, 스크롤, 포커스, 흐림

    4) 이벤트 핸들러

    JavaScript 코드를 실행하는 프로그램은 이벤트가 발생하면 이벤트에 응답합니다. 특정 이벤트에 대한 응답으로 실행되는 코드를 이벤트 핸들러라고 합니다.

    HTML 태그에서 이벤트 핸들러를 사용하는 구문은 다음과 같습니다.

    6)DOM 0

    level 이벤트 핸들러DOM 레벨 0 이벤트 핸들러: 이벤트의 핸들러 속성에 함수를 할당합니다

    var btn2=document.getElementById('btn2'); btn2 버튼 객체 가져오기

    btn2.onclick // btn2에 onclick 속성을 추가하고 속성이 다시 트리거됨 이벤트 핸들러

    btn2.onclick=function(){

    } //익명 함수 추가

    btn2.onclick=null //onclick 속성 삭제

    7)

    DOM 2

    레벨 이벤트 핸들러 DOM 레벨 2 이벤트는 DOM에서 이벤트 핸들러 작업 addEventListener() 및 RemoveEventListener()

    addEventListener() 및 RemoveEventListener()

    를 지정하고 제거하기 위한 두 가지 메서드를 정의합니다. addEventListener() 및 RemoveEventListener()는 이벤트 핸들러를 할당하고 제거하는 데 사용됩니다. IE와 달리 이러한 메소드에는 이벤트 이름, 할당할 함수, 버블링 단계( false) 또는 캡처 단계( false)에 사용되는 핸들러 함수의 세 가지 매개변수가 필요합니다. true), 기본값은 버블링 단계입니다. false[object].addEventListener("name_of_event",fnhander,bcapture)

    [object].removeEventListener("name_of_event",fnhander,bcapture)

    var fnClick = function() {

    Alert("클릭!");

    }

    oDiv.addEventListener("onclick", fnClick, false); //이벤트 처리 기능 추가

    oDiv.addEventListener("onclick", fnClickAnother, false); // IE와 마찬가지로 여러 개의 이벤트 핸들러를 추가할 수 있습니다

    oDiv.removeEventListener("onclick", fnClick, false); //이벤트 핸들러를 제거합니다

    addEventListener()를 사용하는 경우 이벤트 처리 기능이 추가된 경우 캡처 단계에서는 이벤트 처리 기능을 올바르게 삭제하려면 RemoveEventListener()에서 캡처 단계를 지정해야 합니다.

    oDiv.onclick = fnClick;

    oDiv.onclick = fnClickAnother; //직접 할당을 사용하면 후속 이벤트 처리 기능이 이전 이벤트를 덮어씁니다. 처리 함수

    oDiv.onclick = fnClick;

    oDiv.addEventListener("onclick", fnClickAnother, false); //순차적으로 호출되며 덮어쓰지 않습니다

    33.BOM (Browser Object Model (BOM)

    BOM 핵심은 window이고, window 객체는 듀얼 역할을 가지고 있으며, js를 통해 액세스합니다. Global(전역) 개체이기도 한 브라우저 창의 인터페이스입니다. 이는 웹 페이지에 정의된 모든 객체, 변수 및 함수가 global 객체로 window을 갖는다는 것을 의미합니다.


    3.1WindowObject

    Window object는 JavaScript 계층 구조의 최상위 개체입니다.

    Window 개체는 브라우저 창이나 프레임을 나타냅니다.

    Window 개체는 또는 이 나타날 때마다 자동으로 생성됩니다.

    1) 개체 속성

    window //Window 자체, window=window.self전역 속성을 사용하여 액세스할 수 있습니다windowWindowobject

    문서 pair Document 객체에 대한 읽기 전용 참조입니다. Document 개체를 참조하세요.

    history History 개체에 대한 읽기 전용 참조입니다. History 개체를 매개변수로 지정하세요.

    location Location 창이나 프레임의 개체입니다. Location 개체를 참조하세요.

    screen Screen 개체에 대한 읽기 전용 참조입니다. Screen 개체를 매개변수로 지정하세요.

    navigator Navigator 개체에 대한 읽기 전용 참조입니다. Navigator 개체를 매개변수로 지정하세요.

    defaultStatus 창 상태 표시줄의 기본 텍스트를 설정하거나 반환합니다.

    innerheight는 창의 문서 표시 영역 높이를 반환합니다.

    innerwidth는 창의 문서 표시 영역 너비를 반환합니다.

    outerheight는 창의 외부 높이를 반환합니다.

    outerwidth는 창의 외부 너비를 반환합니다.

    pageXOffset은 창 표시 영역의 왼쪽 상단을 기준으로 현재 페이지의 X 위치를 설정하거나 반환합니다.

    pageYOffset은 창 표시 영역의 왼쪽 상단을 기준으로 현재 페이지의 Y 위치를 설정하거나 반환합니다.

    name은 창의 이름을 설정하거나 반환합니다.

    parent 상위 창으로 돌아갑니다.

    top 최상위 상위 창으로 돌아갑니다.

    status는 창 상태 표시줄의 텍스트를 설정합니다.

    window.location //URL주소, 이 속성을 사용하면 새 페이지를 열 수 있습니다

    2) 개체 메서드

    window.close() //창을 닫습니다

    window. Alert(" message"); // OK 버튼이 있는 시스템 메시지 상자를 표시하고 지정된 텍스트

    🎜를 표시합니다.

    window.confirm("확실합니까?"); // OK 및 Cancel 버튼을 사용하여 쿼리 대화 상자를 표시하고 부울 값을 반환합니다.

    window.prompt("이름이 무엇입니까? ?", "Default"); //사용자에게 정보를 입력하라는 메시지를 표시하고 두 개의 매개변수, 즉 사용자에게 표시할 텍스트와 텍스트 상자의 기본값을 허용하고 텍스트 상자의 값을 함수 값

    window.status //상태 표시줄의 텍스트를 일시적으로 변경할 수 있습니다

    window.defaultStatus //기본 상태 표시줄 정보는 사용자가 현재 페이지를 떠나기 전에 텍스트를 변경할 수 있습니다

    window. setTimeout("alert(' xxx')", 1000); // 2 매개변수, 실행할 코드 및 대기 시간을 허용하여 지정된 밀리초 후에 지정된 코드를 실행하도록 설정합니다.

    window.clearTimeout("ID "); //아직 실행되지 않은 일시정지를 취소하고 해당 일시정지ID를 it

    window.setInterval(function, 1000)에 전달합니다. 지정된 기간마다 지정을 무한 반복합니다. 코드와 매개변수는 setTimeout()

    window.clearInterval("ID")과 동일합니다. //시간 간격을 취소하고 간격을 전달합니다. ID to it

    window.history.go / / 위와 동일

    window.history.length //기록의 페이지 수를 볼 수 있습니다

    clearInterval()은 timeout

    을 취소합니다.

    setInterval()

    에 의해 설정됩니다.

    clearTimeout()은 setTimeout() 메서드로 설정된 timeout

    을 취소합니다.

    createPopup()은 팝업 창을 만듭니다. moveBy()는 현재 좌표를 기준으로 지정된 픽셀만큼 창을 이동할 수 있습니다.

    moveTo()는 창의 왼쪽 상단 모서리를 지정된 좌표로 이동합니다. open() 새 브라우저 창을 열거나 명명된 창을 찾습니다. print()는 현재 창의 내용을 인쇄합니다.

    resizeBy()는 지정된 픽셀에 따라 창 크기를 조정합니다.

    resizeTo() 창의 크기를 지정된 너비와 높이로 조정합니다.

    scrollBy()는 지정된 픽셀 값에 따라 콘텐츠를 스크롤합니다.

    scrollTo()는 콘텐츠를 지정된 좌표로 스크롤합니다.

    setInterval() 지정된 기간(밀리초)에 함수를 호출하거나 표현식을 계산합니다.

    setTimeout(

    method

    ,

    seconds

    )

    지정된 밀리초 후에 함수 또는 계산된 표현식을 호출합니다. timeOutEvent = setTimeout("longPress('" + obj + "')",1500); 타이머가 매개변수를 전달합니다 3) 멤버 개체 window.event

    window.document //

    만나겠습니다

    document

    개체 세부정보

    window.historywindow.screenwindow.navigatorWindow.external

    Extension

    ① 문서에 프레임(

    프레임

    )이 포함된 경우 iframe

    태그), 브라우저는

    HTML 문서에 대한 window 개체와 각 프레임에 대한 추가 window 개체를 만듭니다. ② window.frames 창의 모든 명명된 프레임을 반환합니다

    ③parent은 상위 창입니다(창이 최상위 창인 경우 parent==self==top).

    top은 최상위 상위 창입니다(일부 창에는 여러 레이어가 있음) frameset 또는 iframe)

    self은 현재 창입니다(window와 동일)

    open er가 사용됩니다. open 메서드는 현재 창을 엽니다 해당 창

    4메시지 상자와 관련된 메서드: alert(String), confirm(String), prompt(String)

    ⑤ 두 개의 타이머: setTimeout(code,latency) 및 setInterval(code, period)

    참고: setTimeout은 code을 한 번만 실행합니다. code를 다시 setTimeout() 호출하면 setInteval()이 호출될 때까지 clearInterval()이 호출될 때까지 code이 계속 호출됩니다.

    3.2 History object

    　 window.history.length //본 페이지 수

    history.back() //검색 기록으로 돌아가기

    history.forward( ) //검색 기록에서 앞으로

    　history.go(i) //i 위치

    　//i>0Advance ,i< 0후퇴, 후퇴

    　　---------------------------- -------- --------------- -----

    3.3 화면Object

    screenObject: use 사용자 화면에 대한 일부 정보를 얻으려면 window.screen을 사용하여 참조

       window.screen.width //Screen width

    　 window. screen.height //화면 높이

    　window.screen.colorDepth //화면 색 농도

    　window.screen.availWidth //사용 가능한 너비(화면 높이 제외 taskbar)

    window.screen .availHeight //사용 가능한 높이(작업 표시줄 높이 제외)

    　　------------- ------ ------------------ --- -----

    3.4 외부 Object

    　 window.external.AddFavorite("Address"," Title" ) //웹사이트를 즐겨찾기에 추가

    　------------------------------------------------ --- -------------------

    3.5 navigatorObject

    navigator` 개체: Web 브라우저에 대한 많은 정보가 포함되어 있으며 브라우저 및 운영 체제를 감지하는 데 매우 유용합니다.

    　window.navigator.appCodeName //브라우저 코드 이름

    　window.navigator.appName / /브라우저 프로그램 이름

    　window .navigator.appMinorVersion //브라우저 패치 버전

    　window.navigator.cpuClass //cputypex86

    　window.navigator.platform / /운영 체제 유형 win32

    　 window.navigator.plugins

    　 window.navigator.opsProfile

    　 window.navigator.userProfile

    　 window.navigator.systemLanguage // 고객 시스템 언어zh-cn 중국어 간체

    　window.navigator.userLanguage //사용자 언어,위와 동일

    　window.navigator.appVersion // 브라우저 버전 (포함된 시스템 버전)

    　window.navigator.userAgent//사용자 에이전트 헤더의 문자열 표현

    　window.navigator.onLine //사용자가 온라인 상태입니다

    　 window.navigator.cookieEnabled // 찾아보기 브라우저가 cookie

    　window.navigator.mimeTypes

    3.6 DocumentObject을 지원합니까?

    1) 개체 속성

    document.body//는 요소에 대한 직접 액세스를 지원합니다. 프레임세트를 정의하는 문서의 경우 이 속성은 가장 바깥쪽의 을 참조합니다.

    document.cookie는 현재 문서와 관련된 모든 cookies을 반환합니다.

    document.title // HTMLdocument.domain의 title

    태그에 해당하는 문서 제목을 반환합니다. 현재 문서의 도메인 이름을 반환합니다.

    document.bgcolor // 페이지 배경 색상

    document.fgcolor // 포 그라운드 컬러 ( 텍스트 색상) document.linkcolor // 링크 링크 색상

    document.alinkcolor // Amivation link

    (이 링크의 focus ) 같은 창에서 다른 웹 페이지를 여는 URL 속성 document.fileCreatedDate //파일 생성 날짜, 읽기 전용 속성

    document.fileModifiedDate //파일 수정 날짜, 읽기 전용 속성

    document.lastModified 문서가 마지막으로 수정된 날짜와 시간 을 반환합니다.

    document.fileSize //파일 크기, 읽기 전용 속성

    document.cookie //설정 및 읽기 cookie

    document.charset //문자 집합 반환 중국어 간체:gb2312

    document.URL은 현재 문서의 URL을 반환합니다.

    document.referrer는 현재 문서를 로드한 문서의 URL을 반환합니다. TDocument.Stylesheets 스타일 테이블 컬렉션으로 돌아가기,

    반환 값 CSSSSTYLESHEET [] Document.Stylesheets [0] .cssrules.paddingtop = "10px" 스타일 설정 , 스타일 스타일 하이픈 제거 이름에서

    ,2) 일반적인 개체 방법

    document.write() //

    동적으로 페이지에 콘텐츠 쓰기

    document.writeln()은

    write() 와 동일합니다. method , 단, 각 표현식 뒤에 개행 문자가 작성된다는 점만 제외됩니다.

    document.createElement() //새 element

    object)document.getElementById(ID) 생성 //지정된 ID

    가져오기

    객체 the valuedocument.getElementsByName(Name) //지정된 Name

    valuegetElementsByTagName()의 객체를 가져옵니다. 지정된 태그 이름을 가진 객체 컬렉션을 반환합니다. document.body.appendChild(oTag)

    ——————————————————————————

    3) body-

    body 자식 개체

    document.body //문서 본문의 시작과 끝을 지정하는 것은 body>/body>

    document.body.bgColor //객체 뒤의 배경색을 설정하거나 가져옵니다

    document.body.link //

    클릭하지 않은 링크 색상

    document.body.alink //

    활성 링크 색상(

    focus on this link)document.body.vlink // 클릭한 링크 color

    document.body.text //

    텍스트 색상

    document.body.innerText //

    Settingsbody>

    …/body> 사이의 텍스트 document.body.innerHTML //설정 body>

    …/body>code 사이에 HTMLdocument.body.topMargin //페이지 상단 여백 document.body .leftMargin //페이지 왼쪽 여백

    document.body.rightMargin //페이지 오른쪽 여백

    document.body.bottomMargin //페이지 아래쪽 여백

    document.body.Background // 배경 이미지

    document.body.appendChild(oTag) //동적으로

    HTML

    객체

    4) 공통 객체 이벤트document.body.onclick=”

    func( )

    ”

    //

    마우스 포인터로 개체를 클릭하면 트리거됩니다

    document.body.onmouseover=”func()”//마우스 포인터가 개체로 이동할 때 트리거

    document.body.onmouseout=”func() ” //마우스 포인터가 개체 밖으로 이동할 때 트리거됩니다

    ————————————————————————

    5) 위치 -Location 하위 개체

    location 개체: 로딩 창의 URL을 나타내며, window.location

    location.href에서도 참조할 수 있습니다. //전체 URL 현재 로드 중인 페이지의 http://www.somewhere.com/pictures/index.htm

    location.portocol //URL에서 사용되는 프로토콜, 즉 부분 이중 슬래시 앞(예: http

    location.host //서버 이름, 예: www.wrox.com

    location.hostname //일반적으로 host과 동일) , 때로는 앞의 www

    location.port //URL 선언된 요청의 포트입니다. 기본적으로 대부분의 URL에는 8080

    위치와 같은 포트 정보가 없습니다. 경로 이름 //URL에서 호스트 이름 뒤의 부분(예: /pictures/index.htm

    location.search //에서 요청한 URL에서 물음표 뒤 부분 실행) GET, 쿼리 문자열이라고도 함(예: ?param=xxxx

    location.hash / /

    URL에 #이 포함된 경우 기호 뒤의 콘텐츠를 반환합니다. #anchor1

    location.sign("http:www.baidu.com"); //

    location.href과 동일, 새 주소가 브라우저의 기록 스택에 추가됩니다

    location.replace("http:www.baidu.com"); //

    design()과 동일하지만 새 주소는 브라우저의 기록 스택에 추가되지 않으며 back을 통해 액세스할 수 없습니다. 및 forward

    location.reload(true | false); //

    false인 경우 브라우저 캐시에서 다시 로드하려면 현재 페이지를 다시 로드하고, true인 경우 서버에서 다시 로드하세요. 기본값은 false

    document.location.reload(URL) //

    새 웹 페이지 열기

    6) Selection-selection 하위 개체

    document.selection

    7) Formscollection(form in page)

    a)

    collection을 통한 참조

    document.forms //

    는 form 태그 개수에 해당

    document.forms .length //

    는 페이지의 /formformtags 수에 해당합니다.

    document.forms[0] //번째 1/formform tag

    document.forms[i] //번째 i-1/formform 태그

    document.forms[i].length //th i-1 /formform

    document.forms[i].elements[j] / /th의 컨트롤 수 i-1 /formform middle j-1control

    b)라벨 name 속성 이름을 통해

    /formform을 직접 참조합니다. ” Myform”>입력 이름=”myctrl”/>/form

    document.Myform.myctrl //document.양식 이름 . 컨트롤 이름

    c)

    양식 속성에 액세스

    document.forms[i].name //

    다음에 해당양식 이름>property

    document.forms[i].action // //

    에 해당 /formform action>attribute

    document.forms[i].encoding //

    corresponds to/formform enctype>attribute

    document.forms[i].target //

    corresponds /formform target>Property

    document.forms[i].appendChild(oTag) //

    동적으로 컨트롤

    document.all.oDiv //

    참조 레이어 oDiv

    문서를 삽입합니다. all.oDiv.style.display=

    ” //Layer set to visible

    document.all.oDiv.style.display=

    ”none”// 레이어는 다음과 같습니다. 숨겨진

    document.getElementId(

    ”oDiv”)로 설정 // getElementIddocument.getElementId( ”

    oDiv를 통해 개체를 참조합니다.

    "). style="document.getElementId("

    oDiv

    ").display="none" /*document.all을 의미합니다. 모든 객체의 컬렉션

    document

    에서만 ie

    이 속성을 지원하므로 브라우저 유형을 결정하는 데에도 사용됩니다.

    HTML DOM Node

    HTML DOM (문서 개체 모델)에서는 모든 부분이 노드입니다.

    1.문서 자체가 문서 노드입니다

    2.모든 HTML요소가 요소 노드입니다

    3.모든 HTML속성은 속성 노드입니다

    4.HTML 요소 내부의 텍스트는 텍스트 노드입니다

    5.댓글은 댓글 노드입니다

    Element Objects

    인 HTML DOM 에서 Element 개체는 HTML 요소를 나타냅니다.

    Element 객체는 요소 노드, 텍스트 노드, 주석 노드 유형의 하위 노드를 가질 수 있습니다.

    NodeList 개체는 HTML 요소의 하위 노드 컬렉션과 같은 노드 목록을 나타냅니다.

    요소에도 속성이 있을 수 있습니다. 속성은 속성 노드입니다.

    document.getElementById(ID)를 가져옵니다. // 지정된 ID 값을 가진 객체를 가져옵니다.

    document.getElementsByName(Name) // 지정된 객체를 가져옵니다. Name value

    getElementsByTagName()은 지정된 태그 이름을 가진 개체 컬렉션을 반환합니다.

    속성과 메소드

    메서드의 a,b 매개변수는 설명을 위한 것일 뿐입니다.,다른 요소에는 a,b이 없다는 의미는 아닙니다. 매개변수가 없는 메소드

    Element .add()지정된 클래스를 요소에 추가

    element.accessKey는 요소의 단축키를 설정하거나 반환합니다.

    element.appendChild()는 새 하위 노드를 마지막 하위 노드로 요소에 추가합니다.

    element.attributes는 요소 속성 컬렉션을 반환합니다.

    element.childNodes는 요소 하위 노드의 NodeList를 반환합니다.

    element.className은 요소의 class 속성을 설정하거나 반환합니다.

    element.clientHeight는 요소의 가시적 높이를 반환합니다.

    element.clientWidth는 요소의 표시 너비를 반환합니다.

    element.cloneNode() 요소를 복제합니다.

    element.compareDocumentPosition() 두 요소의 문서 위치를 비교합니다.

    element.contentEditable 요소의 텍스트 방향을 설정하거나 반환합니다.

    element.dir 요소의 텍스트 방향을 설정하거나 반환합니다.

    element.firstChild는 요소의 첫 번째 자식을 반환합니다.

    element.getAttribute()는 요소 노드의 지정된 속성 값을 반환합니다.

    element.getAttributeNode()는 지정된 속성 노드를 반환합니다.

    element.getElementsByTagName()은 지정된 태그 이름을 가진 모든 하위 요소의 컬렉션을 반환합니다.

    element.getFeature()는 지정된 기능을 구현하는 API 객체를 반환합니다.

    element.getUserData()는 연관된 요소의 키 객체를 반환합니다.

    Element.hidden hidden 속성

    element.hasAttribute()의 존재 상태를 가져오거나 설정합니다. 요소에 지정된 속성이 있으면 true를 반환하고, 그렇지 않으면 false를 반환합니다. .

    element.hasAttributes()는 요소에 속성이 있으면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

    element.hasChildNodes()는 요소에 하위 노드가 있으면 true를 반환하고, 그렇지 않으면 false를 반환합니다.

    element.id 요소의 id를 설정하거나 반환합니다.

    element.innerHTML 요소의 콘텐츠를 설정하거나 반환합니다.

    element.insertBefore(,) 지정된 기존 하위 노드 앞에 새 노드를 삽입합니다. A는 b

    element.isContentEditable이 요소의 콘텐츠를 설정하거나 반환하기 전에 삽입됩니다.

    element.isDefaultNamespace()는 지정된 namespaceURI가 기본값인 경우 true를 반환하고, 그렇지 않은 경우 false를 반환합니다.

    element.isEqualNode()는 a 요소가 현재 요소와 같은지 확인합니다.

    element.isSameNode(a) 지정된 요소가 현재 요소인지 확인합니다. .

    element.isSupported() 요소가 지정된 기능을 지원하는 경우 true를 반환합니다.

    element.lang 요소의 언어 코드를 설정하거나 반환합니다.

    element.lastChild는 요소의 마지막 하위 요소를 반환합니다.

    element.namespaceURI는 요소의 namespace URI를 반환합니다.

    element.nextSibling 현재 요소 뒤의 형제 요소를 반환합니다.

    element.nodeName 요소의 이름을 반환합니다.

    element.nodeType은 요소의 노드 유형을 반환합니다.

    element.nodeValue는 요소 값을 설정하거나 반환합니다.

    element.normalize() 요소의 인접한 텍스트 노드를 병합하고 빈 텍스트 노드를 제거합니다.

    element.offsetHeight는 요소의 높이를 반환합니다.

    element.offsetWidth는 요소의 너비를 반환합니다.

    element.offsetLeft는 요소의 수평 오프셋 위치를 반환합니다.

    element.offsetParent는 요소의 오프셋 컨테이너를 반환합니다.

    element.offsetTop은 요소의 수직 오프셋 위치를 반환합니다.

    element.ownerDocument는 요소의 루트 요소(문서 개체)를 반환합니다.

    element.parentNode는 요소의 상위 노드를 반환합니다.

    element.previousSibling 현재 요소 이전의 형제 요소를 반환합니다.

    Element.remove() 요소에서 지정된 클래스를 제거합니다.

    element.removeAttribute() 요소에서 지정된 특성을 제거합니다.

    element.removeAttributeNode()는 지정된 속성 노드를 제거하고 제거된 노드를 반환합니다.

    element.removeChild(a) 요소에서 하위 노드를 제거합니다.

    element.replaceChild(a,b) 요소의 하위 노드를 대체합니다.

    element.scrollHeight는 요소의 전체 높이를 반환합니다.

    element.scrollLeft는 요소의 왼쪽 가장자리와 뷰 사이의 거리를 반환합니다.

    element.scrollTop은 요소의 위쪽 가장자리와 뷰 사이의 거리를 반환합니다.

    element.scrollWidth는 요소의 전체 너비를 반환합니다.

    element.setAttribute() 지정된 속성을 지정된 값으로 설정하거나 변경합니다.

    element.setAttributeNode() 지정된 속성 노드를 설정하거나 변경합니다.

    element.setIdAttribute()

    element.setIdAttributeNode()

    element.setUserData() 개체를 요소의 키에 연결합니다.

    element.style 요소의 style 속성을 설정하거나 반환합니다.

    Element.toggle()클래스가 없으면 추가하고, 있으면 제거합니다.

    element.tabIndex는 요소의 탭 키 제어 순서를 설정하거나 반환합니다.

    element.tagName은 요소의 태그 이름을 반환합니다.

    element.textContent는 노드와 그 하위 항목의 텍스트 콘텐츠를 설정하거나 반환합니다.

    element.title은 요소의 title 속성을 설정하거나 반환합니다.

    element.toString() 요소를 문자열로 변환합니다.

    nodelist.item()은 NodeList 의 지정된 인덱스에 있는 노드를 반환합니다.

    nodelist.length는 NodeList 의 노드 수를 반환합니다.

    element.addEventListener(이벤트, 함수, useCapture)

    Parameters

    Description

    event

    반드시. 이벤트 이름을 지정하는 문자열입니다.

    참고: "on" 접두사를 사용하지 마세요. 예를 들어 "onclick"을 사용하는 대신 "click",을 사용하세요.

    팁: 모든 HTML DOM 이벤트에 대해서는 전체 HTML DOM 이벤트객체 참조 매뉴얼을 확인하세요.

    function

    필수입니다. 이벤트가 발생했을 때 실행할 함수를 지정합니다.

    이벤트 객체가 첫 번째 매개변수로 함수에 전달될 때. 이벤트 객체의 유형은 특정 이벤트에 따라 다릅니다. 예를 들어, "click" 이벤트는 MouseEvent(MouseEvent) 개체에 속합니다.

    useCapture

    선택사항. 이벤트가 캡처 단계에서 실행되는지 아니면 버블링 단계에서 실행되는지를 지정하는 부울 값입니다.

    가능한 값 ​​:

    true - 이벤트 핸들러는 캡처 단계에서 실행됩니다.

    false - false - 기본값. 이벤트 핸들러는 버블링 단계에서 실행됩니다.

    contentWindow property

    문서에 iframe 속성이 있는 경우 이 속성을 사용하여 iframe

    의 콘텐츠를 반환할 수 있습니다.

    1) Table object


    rows 컬렉션은 테이블(TableRowobjects)에 있는 모든 행의 배열을 반환합니다. <머리> ;, 및

    TableRow object

    TableRow object에 정의된 모든 행 HTML테이블 행을 나타냅니다.

    HTML 문서에서 태그가 나타날 때마다 TableRow 개체가 생성됩니다.

    TableRow Object Collection

    Collection

    설명

    IE

    F

    O

    W3C

    cells[]

    행의 모든 ​​셀을 포함하는 배열입니다.

    4

    cells 컬렉션은 테이블의 모든

    		또는 요소를 반환합니다.

    TableCell 개체는 HTML 테이블 셀을 나타냅니다.

    HTML 문서

    		 태그가 나타날 때마다 TableCell 개체가 생성됩니다

    3.8 Event 개체

    1 ) Event object

    Name

    Description

    Return

    type

    이벤트 이름 mouseover

    과 같은 문자가 포함된 문자열

    target

    이벤트가 가리키는 요소

    HTMLElement

    2) 창 이벤트 속성

    (파란색이 없는 항목은 h 5새 이벤트)

    이벤트가 window 개체에 대해 트리거됩니다. < body> 태그):

    attribute

    onafterprint 문서가 인쇄된 후에 실행되는 스크립트입니다.

    문서 인쇄 전에 실행되는 onbeforeprint 스크립트입니다.

    onbeforeunload 문서 언로드 전에 실행되는 스크립트입니다.

    onerror 오류가 발생할 때 실행할 스크립트입니다.

    onhaschange 문서가 변경되었을 때 실행되는 스크립트입니다.

    onload 페이지 로딩이 완료된 후 실행됩니다.

    onmessage 메시지가 트리거될 때 실행되는 스크립트입니다.

    postMessage () 호출을 사용하여 기본 스레드에 메시지를 보낼 수 있습니다. 일부 시나리오에서는 비즈니스 호출자가 위치 지정 구성 요소와 적극적으로 통신해야 할 수 있으며 html5를 전달할 수 있습니다. PostMessage는 위치 지정 구성 요소와의 통신을 적극적으로 시작합니다.onoffline 문서가 오프라인일 때 실행되는 스크립트입니다.

    ononline 문서가 온라인 상태가 되면 실행되는 스크립트입니다.

    onpagehide 창이 숨겨져 있을 때 실행되는 스크립트입니다.

    onpageshow 창이 표시될 때 실행되는 스크립트입니다.

    onpopstate 창 기록이 변경될 때 실행되는 스크립트입니다.

    onredo 문서가 취소를 수행할 때 실행되는 스크립트(

    redo

    ). onresize 브라우저 창 크기가 조정될 때 발생합니다.

    onstorage

    Web Storage

    영역이 업데이트된 후 실행할 스크립트입니다. onundo 문서가

    undo

    를 실행할 때 실행되는 스크립트입니다.

    onunload

    페이지가 다운로드되면(또는 브라우저 창이 닫히면) 실행됩니다.

    3) 양식

    이벤트

    HTML

    양식 내의 작업에 의해 트리거되는 이벤트(거의 모든 HTML 요소에 적용되지만 form 요소에서 가장 일반적으로 사용됨): Attribute

    onblur

    요소가 포커스를 잃을 때 실행되는 스크립트입니다.

    onchange

    요소 값이 변경될 때 실행되는 스크립트입니다. oncontextmenu 컨텍스트 메뉴가 실행될 때 실행되는 스크립트입니다.

    onfocus

    요소가 포커스를 잃을 때 실행되는 스크립트입니다. onformchange 양식이 변경될 때 실행되는 스크립트입니다.

    onforminput 양식이 사용자 입력을 받을 때 실행되는 스크립트입니다.

    oninput 요소가 사용자 입력을 받을 때 실행되는 스크립트입니다.

    oninvalid 요소가 유효하지 않을 때 실행되는 스크립트입니다.

    onreset

    양식의 재설정 버튼을 클릭하면 시작됩니다. HTML5에서는 지원되지 않습니다.

    onselect

    요소의 텍스트가 선택되면 실행됩니다.

    onsubmit

    양식이 제출되면 실행됩니다.

    4)

    oninput, onpropertychange, onchange

    oninput:

    oninput

    이벤트 사용은 사용자가 입력할 때 트리거됩니다.

    이 이벤트는

    또는