노드와 노드 트리의 개념
HTML 태그, 태그 속성, 텍스트 콘텐츠, 주석, 공백 또는 탭 등을 포함하여 HTML 문서의 모든 콘텐츠는 노드입니다.
HTML 문서의 모든 노드는 노드 트리(또는 문서 트리)를 형성합니다. HTML 문서의 각 요소, 속성, 텍스트 등은 트리의 노드를 나타냅니다. 트리는 문서 노드에서 시작하여 거기에서 트리의 가장 낮은 수준에 있는 모든 텍스트 노드로 계속 분기됩니다.
노드 간 관계
DOM 노드 간에는 상위 노드, 하위 노드, 형제 노드(피어 노드), 하위 항목, 상위 등을 포함하여 계층적 관계가 있습니다.
<html>
<head>
<title>DOM节点之间的关系</title>
</head>
<body>
<h1>这是标题</h1>
<p>这是内容</p>
</body>
</html>
위 코드에서 볼 수 있듯이
문서 노드(루트 노드)를 제외한 모든 노드에는 부모 노드가 있습니다.
예를 들어, <head> 및 <body> 텍스트 노드의 상위 노드는 <p> .
대부분의 요소 노드에는 하위 노드가 있습니다.
예를 들어, <head> 노드에는 <title> 노드가 있습니다. 즉, "This is the title"이라는 하위 노드가 있습니다.
노드에 공통 상위 노드가 있으면 형제 노드(sibling node)입니다.
예를 들어 <h1> 및 <p>는 형제 노드이고 해당 상위 노드는 모두 <body>
노드에는 노드의 모든 하위 노드 또는 이러한 하위 노드의 하위 노드 등을 참조하는 하위 항목이 있을 수도 있습니다.
예를 들어 모든 텍스트 노드는 <html> 노드의 자손이고 첫 번째 텍스트 노드는 <head>
노드에도 조상이 있을 수 있습니다. 조상은 노드의 상위 노드이거나 상위 노드의 상위 노드 등입니다.
예를 들어 모든 텍스트 노드는 <html> 노드를 상위 노드로 가질 수 있습니다.
다음 섹션