DOM(문서 개체 모델) )는 문서에서 추상화된 문서 개체 모델입니다. DOM 작업의 개체는 문서입니다. DOM은 HTML 문서를 요소, 속성 및 텍스트가 포함된 트리 구조, 즉 노드 트리로 표시합니다. DOM을 통해 JS는 웹 페이지가 동적 효과를 표시하고 사용자와 대화형 기능을 실현할 수 있는 동적 HTML을 생성할 수 있습니다. DOM은 프로그램(API라고도 함)을 사용하여 HTML을 동적으로 제어하는 인터페이스를 제공하므로 DOM은 JS가 HTML 도구를 제공하는 곳입니다. 동적 상호 작용 및 효과 기능의 핵심이 됩니다. DOM을 안전하게 운영하려면 페이지의 모든 HTML이 DOM 노드로 파싱될 때까지 기다려야 운영할 수 있으므로 DOMReady를 이해해야 합니다. 그 전에 DOM 노드를 살펴보겠습니다.
(1), 공통 노드 유형
공통 노드 유형다음과 같은 7가지 유형이 있습니다:
|
설명 | 수치 상수 | ||||||||||||||||||||||||
요소(요소 노드) | HTML 태그 요소. | 1 | ||||||||||||||||||||||||
Attr(속성 노드) | 요소 노드의 속성. | 2 | ||||||||||||||||||||||||
텍스트(텍스트 노드) | 요소 노드 또는 속성 노드의 텍스트 콘텐츠. | 3 | ||||||||||||||||||||||||
댓글(댓글 노드) | 는 댓글의 내용을 나타냅니다. | 8 | ||||||||||||||||||||||||
문서(문서 노드) | 는 전체 문서(DOM 트리의 루트 노드, 즉 문서)를 나타냅니다. | 9 | ||||||||||||||||||||||||
DocumentType(문서 유형 노드) td> | 은 문서 유형 노드입니다. | 10 | ||||||||||||||||||||||||
DocumentFragment(문서 조각 노드) td> | 는 문서 트리에 속하지 않는 문서의 일부 또는 단락을 나타냅니다. | 11 |
(2), 노드 유형 설명
요소 노드, , , 등과 같은 HTML 태그 요소입니다.
속성 노드 , 는 id, class, name 등과 같은 요소 노드의 속성입니다. 속성 노드는 요소 노드로 간주될 수 없으므로 속성은 DOM에서 문서 트리의 일부로 간주되지 않습니다. 즉, 속성 노드는 이를 포함하는 요소 노드의 일부이며 문서에서 별도의 노드가 아닙니다. . 트리에 나타납니다.
텍스트 노드 , 는 텍스트 콘텐츠만 포함하는 노드입니다. 여기에는 추가 정보가 포함될 수도 있고 공백만 포함될 수도 있습니다. 문서 트리의 요소 및 속성의 텍스트 내용은 텍스트 노드로 표시됩니다.
댓글 노드 , 는 문서의 댓글이며 형식은