DOM 지식에 대한 자세한 소개

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

• ...

nextSibling
previousSibling
firstChild
lastC hild
ownDocument(각 노드는 하나의 Document 노드에만 속할 수 있음)

• 메소드(상속을 통해 특정 노드에서 호출됨)

··· 노드 찾기···

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

· ... ... ·············
···노드 교체···
replaceChild(ele, target)
····················
··· 노드 복사···
cloneNode(boolean) true: 깊은 복사를 의미, false: 얕은 복사를 의미
·········
· ·· 문서 노드 처리··· 거의 사용되지 않음~
normalize()
• 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.URL(URL 주소 가져오기) )
document.domain ( URL, 경로명에서 도메인 이름 가져오기)

• 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를 통해 삽입해야 함)

• ·· 요소 크기...

lang
className

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

• Text type

• attribute

• nodeValue 데이터(텍스트 노드의 텍스트에 액세스)
DocumentFragment type

• 사용법: line Manipulate DOM 요소 성능 문제를 일으키는 DOM 노드의 대규모 재배치 및 다시 그리기를 방지하기 위해

• method

• document.createDocumentFragment()(문서 조각 생성을 나타냄)

• NodeList 객체

NodeList 및 이해하기 "가까운 친척"인 NamedNodeMap 및 HTMLCollection은 DOM 전체를 철저하게 이해하는 열쇠입니다. 세 가지 컬렉션은 모두 "동적"입니다. 즉, 문서 구조가 변경될 때마다 업데이트됩니다. 따라서 항상 최신의 가장 정확한 정보를 보유하고 있습니다. 기본적으로 모든 NodeList 개체는 DOM 문서에 액세스할 때 실시간으로 실행되는 쿼리입니다.

• 요소 크기

오프셋 차원

• 페이지에 있는 요소의 오프셋을 알려면 이 요소의 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
 };
 }
}

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

• ·····
  요소의 크기를 결정
document.getBoundingClientRect() 메소드는 직사각형 객체를 반환합니다. 왼쪽, 위쪽, 오른쪽, 아래쪽의 4가지 속성을 포함합니다. 이러한 속성은 뷰포트를 기준으로 페이지에서 요소의 위치를 ​​제공합니다.

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