집 > 기사 > 웹 프론트엔드 > DOM 지식에 대한 자세한 소개

DOM 지식에 대한 자세한 소개

零下一度원래의: 2017-06-26 11:52:461258검색

DOM

우리는 JavaScript가 ECMAScript + DOM + BOM으로 구성되어 있다는 것을 알고 있습니다. ECMAScript는 JS의 일부 구문이며 BOM은 주로 브라우저 객체(창) 객체에 대한 관련 지식의 모음입니다. DOM은 문서 객체와 관련된 지식의 모음입니다.

우리는 HTML과 JS 간의 상호작용이 이벤트를 통해 이루어진다는 것을 알고 있습니다. DOM은 HTML(XML) 문서용 API입니다. 따라서 사용자와 상호 작용하려면 DOM에서 제공하는 API를 사용하여 HTML 요소를 얻은 다음 해당 이벤트를 요소에 바인딩하여 사용자와 상호 작용해야 합니다. 따라서 DOM을 이해하고 마스터하는 것은 매우 중요합니다.

이 글은 주로 "자바스크립트 고급 프로그래밍(3)"의 DOM 관련 장을 중심으로 DOM에 대한 주요 지식을 정리하고 개인적인 이해도 일부를 섞었습니다.

노드 레벨

HTML 코드를 작성한 사람들은 각 요소에 들여쓰기를 추가한 다음 관련 HTML 태그와 콘텐츠를 작성하고 최종적으로 웹 페이지에 표시해야 한다는 것을 모두 알아야 합니다. 따라서 이 중첩된 HTML 코드와 콘텐츠는 노드 계층 구조를 구성합니다.

ECMAScript를 이해하는 모든 사람은 JS의 모든 객체가 참조 유형을 기반으로 생성되고 참조 유형은 JS에서 기본적으로 제공하는 참조 유형(Array, Function, RegExp, Object 등)일 수도 있고, 사용자 정의 참조 유형이어야 합니다(참조 유형은 new 키워드를 통해 호출됩니다(생성자라고도 함). 모든 객체는 Object의 인스턴스 객체이며 Object.prototype

의 속성과 메서드를 상속할 수 있습니다. 그리고 DOM에도 비슷한 메커니즘이 있습니다. DOM에서 최상위 유형은 노드 유형이며, 다른 모든 노드는 노드 유형의 속성과 메서드를 상속할 수 있습니다. Node 유형은 실제로 JS의 Object 생성자와 동일합니다.

그럼 Node type

Node type

Attributes(상속을 통해 특정 노드에서 다음 속성을 호출)

nodeType
에서 속성과 메서드를 살펴보겠습니다.
nodeName
nodeValue
...
메소드(상속을 통해 특정 노드에서 호출됨)

요소를 찾는 메소드는 Document 유형에 있습니다

Node 유형에는 너무 많은 속성과 메서드가 있습니다. 다시 말하지만, 다른 모든 노드는 Node의 속성과 메서드를 상속받을 수 있습니다. type
Document type
JS는 Document 유형을 통해 문서를 나타냅니다. 문서 객체는 HTMLDocument의 인스턴스이며 전체 HTML 페이지를 나타냅니다. 동시에 문서 개체는 창 개체 아래의 속성이기도 하므로 전역 개체로 액세스할 수 있습니다.
Attributes
document.documentElement(HTML 요소를 나타냄), HTML 요소는 document.childNodes[1]
document.body(body 요소를 나타냄)
document를 통해 얻을 수 있습니다. .head (헤드 요소를 나타냄)
document.compatMode (브라우저가 사용하는 렌더링 방법을 나타냄, 'CSS1Compat'은 표준 모드를 의미하고, 'BackCompat'은 혼합 모드를 의미함)
document.charset (실제 렌더링을 나타냄) 문서 문자 집합에 사용되는 메서드는 새 문자 집합을 지정하는 데에도 사용할 수 있습니다)
document.dataset(document.dataset.myname과 같은 데이터 집합을 통해 사용자 정의 속성에 액세스함을 나타냄)

document.docType( 요소를 나타냅니다), 브라우저 호환성이 있습니다 성적인 질문

document.title( 요소를 나타냄)

··· 웹페이지 요청···

document.attributes(노드의 속성을 가져오고 NodeList와 유사한 NamedNodeMap 개체 반환)

메서드

··· 요소 찾기···
document.getElementById( id ) 요소를 반환합니다.
document.getElementsByTagName(classname)은 NodeList 객체와 유사하게 0개 이상의 요소를 포함하는 HTMLCollection 객체를 반환합니다.
document.getElementsByName(ele)은 지정된 name 속성을 가진 요소를 반환합니다. 또한 HTMLCollection 객체를 반환합니다
document.getElementsByClassName(className)은 일치하는 모든 NodeList 객체를 반환합니다. (이 메소드는 문서 유형 및 요소 유형에서 호출될 수 있습니다)
document.querySelector(selector) 선택기는 CSS 선택기를 나타냅니다. 첫 번째 항목을 반환합니다. 패턴과 일치하는 요소가 없으면 null을 반환합니다(Document 유형, DocumentFragment 유형, 요소 유형은 모두 이 메서드를 호출할 수 있습니다)
document.querySelectorAll(selector) 선택기는 CSS 선택기가 성공적으로 일치하는 NodeList 객체를 반환함을 의미합니다( 문서형, DocumentFragment형, 요소형 모두 이 메소드를 호출할 수 있습니다)
···요소 생성···
document.createElement() (생성된 요소는 Free 상태이므로 삽입해야 함) addChild를 통해)
··· 텍스트 노드 생성···
document.createTextNode() (생성된 요소는 자유 상태이므로,appendChild를 통해 삽입해야 함)
·· 요소 크기...

methodogetAttribute (ele) attributesetattribute (name, value) 속성을 설정하십시오. ele

Text type

attribute
nodeValue 데이터(텍스트 노드의 텍스트에 액세스)
사용법: line Manipulate DOM 요소 성능 문제를 일으키는 DOM 노드의 대규모 재배치 및 다시 그리기를 방지하기 위해

method

document.createDocumentFragment()(문서 조각 생성을 나타냄)
NodeList 객체
요소 크기

페이지에 있는 요소의 오프셋을 알려면 이 요소의 offsetLeft 및 offsetTop을 해당 offsetParent의 동일한 속성에 추가하고 루트 요소까지 이와 같이 반복하면 다음과 같은 결과를 얻을 수 있습니다. 기본적으로 정확한 값입니다. 다음 두 함수를 사용하여 요소의 왼쪽 및 위쪽 오프셋을 각각 얻을 수 있습니다.

function getElementLeft(element){
 var actualLeft = element.offsetLeft;
 var current = element.offsetParent;
 while (current !== null){
 actualLeft += current.offsetLeft;
 current = current.offsetParent;
 }
 return actualLeft;
}

function getElementTop(element){
 var actualTop = element.offsetTop;
 var current = element.offsetParent;
 while (current !== null){
 actualTop += current. offsetTop;
 current = current.offsetParent;
 }
 return actualTop;
}

브라우저 뷰포트 크기를 결정하려면 document.documentElement 또는 document.body(IE7 이전 버전)의 clientWidth 및 clientHeight를 사용할 수 있습니다.

function getViewport(){
 if (document.compatMode == "BackCompat"){
 return {
 width: document.body.clientWidth,
 height: document.body.clientHeight
 };
 } else {
 return {
 width: document.documentElement.clientWidth,
 height: document.documentElement.clientHeight
 };
 }
}

스크롤 차원(스크롤 차원)

·····
요소의 크기를 결정

위 내용은 DOM 지식에 대한 자세한 소개의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：도메인 간 문제를 해결하는 gulp의 예다음 기사：도메인 간 문제를 해결하는 gulp의 예

DOM 지식에 대한 자세한 소개

DOM

노드 레벨

methodogetAttribute (ele) attributesetattribute (name, value) 속성을 설정하십시오. ele

function getViewport(){ if (document.compatMode == "BackCompat"){ return { width: document.body.clientWidth, height: document.body.clientHeight }; } else { return { width: document.documentElement.clientWidth, height: document.documentElement.clientHeight }; } }

관련 기사