웹 페이지에서는 DOM에서 제공하는 방법을 사용하여 노드를 얻는 것 외에도 노드의 계층적 관계를 사용하여 노드를 얻을 수도 있습니다. 오늘은 이를 요약해 보겠습니다.
웹 페이지의 모든 콘텐츠는 노드(레이블, 속성, 텍스트, 설명 등)이며 DOM에서는 노드가 노드로 표시됩니다.
HTML DOM 트리의 모든 노드는 JavaScript를 통해 액세스할 수 있으며 모든 HTML 요소(노드)는 수정, 생성 또는 삭제할 수 있습니다. 
일반적으로 노드에는 nodeType(노드 유형), nodeName(노드 이름) 및 nodeValue(노드 값)의 세 가지 기본 속성이 있습니다.
실제 개발에서 노드 작업은 주로 요소 노드에서 작동합니다.
DOM 트리를 사용하여 노드를 다양한 계층 관계로 나눕니다. 가장 일반적인 것은 부모-자식-형제 계층 관계입니다.
node.parentNode
<p 클래스="부모">
<p class="아들"></p>
</p>
<스크립트>
var son = document.querySelector(".son");
console.log(son.parentNode);
</script> 
1.node.childNodes(표준)
node.childNodes는 지정된 노드의 하위 노드를 포함하는 컬렉션을 반환합니다. 이 컬렉션은 즉시 업데이트됩니다.
<ul>
<li>나는 리이다</li>
<li>나는 리이다</li>
<li>나는 리이다</li>
<li>나는 리이다</li>
</ul>
<스크립트>
var ul = document.querySelector('ul');
//하위 노드 childNodes 요소 노드, 텍스트 노드 등을 포함한 모든 하위 노드
console.log(ul.childNodes);
</script> 
여기에 5개의 텍스트 노드가 있는 이유는 무엇입니까? 실제로는 5개의 줄바꿈에 해당합니다. 아래 그림을 참조하세요. 
이 5개의 줄 바꿈은 텍스트 노드와 4개의 li 요소 노드, 즉 총 9개입니다.
참고: 반환 값에는 요소 노드, 텍스트 노드 등을 포함한 모든 하위 노드가 포함됩니다.
내부에 요소 노드만 가져오려면 특별히 처리해야 합니다. 따라서 우리는 일반적으로 childNodes의 사용을 옹호하지 않습니다.
var ul = document.querySelector('ul');
for (var i = 0;i<ul.length;i++){
if (ul.childNodes[i].nodeType == 1){
console.log(ul.childNodes[i]);
}
} 2.node.children(비표준)
node.children은 모든 하위 요소 노드를 반환하는 읽기 전용 속성입니다. 하위 요소 노드만 반환하고 다른 노드는 반환하지 않습니다(이것이 우리가 집중하는 것입니다).
어린이용은 비표준이지만 다양한 브라우저에서 지원하고 있기 때문에 안심하고 사용할 수 있습니다.
<ul>
<li>나는 리이다</li>
<li>나는 리이다</li>
<li>나는 리이다</li>
<li>나는 리이다</li>
</ul>
<스크립트>
var ul = document.querySelector('ul');
console.log(ul.children);
</script> 
1.firstChild.
2.node.lastChild
firstChild는 첫 번째 하위 노드를 반환합니다. 찾을 수 없으면 null을 반환합니다. lastChild에도 동일하게 적용됩니다. 마찬가지로 모든 노드가 포함됩니다.
3.node.firstElementChild
firstElementChild는 첫 번째 하위 요소 노드를 반환하거나, 찾을 수 없으면 null을 반환합니다.
4.node.lastElementChild
lastElementChild는 마지막 하위 요소 노드를 반환하거나 찾을 수 없으면 null을 반환합니다.
참고: 이 두 가지 방법에는 호환성 문제가 있으며 IE9 이상에서만 지원됩니다.
5.노드.어린이[0]
5.node.children[node.children.length - 1]
참고: 실제 개발 작성 방식과 호환성 문제는 없습니다.
<ul>
<li>나는 리이다</li>
<li>나는 리이다</li>
<li>나는 리이다</li>
<li>나는 리이다</li>
</ul>
<스크립트>
var ul = document.querySelector('ul');
// 1. 텍스트 노드인지 요소 노드인지 console.log(ul.firstChild);
console.log(ul.lastChild);
// 2. 해당 자체 요소 노드를 반환합니다. IE9 이상에서만 console.log(ul.firstElementChild)를 지원합니다.
console.log(ul.lastElementChild);
// 3. 호환성 문제는 없습니다. console.log(ul.children[0]);
console.log(ul.children[ul.children.length - 1]);
</script> 
1.nextSibling.
nextSibling은 현재 요소의 다음 형제 노드를 반환하거나, 찾을 수 없으면 null을 반환합니다. 마찬가지로 모든 노드가 포함됩니다.
2.node.previousSibling
PreviousSibling은 현재 요소의 이전 형제 노드를 반환하거나, 찾을 수 없으면 null을 반환합니다. 마찬가지로 모든 노드가 포함됩니다.
3.node.nextElementSibling
nextElementSibling은 현재 요소의 다음 형제 요소 노드를 반환합니다. 찾을 수 없으면 null을 반환합니다.
4.node.이전ElementSibling
PreviousElementSibling은 현재 요소의 이전 형제 요소 노드를 반환하거나 찾을 수 없는 경우 null을 반환합니다.
참고: 이 두 가지 방법에는 호환성 문제가 있으며 IE9 이상에서만 지원됩니다.
그렇다면 호환성을 충족하고 형제 요소 노드를 찾을 수 있는 함수를 캡슐화하는 방법은 무엇입니까?
function getNextElementSibling(element){
var el = 요소;
while(el = el.nextSibling){
if(el.nodeType == 1){
엘을 반환;
}
}
null을 반환;
} 위의 캡슐화된 코드는 풀 수 있지만, IE 브라우저가 곧 서비스를 중단할 것이기 때문에 너무 많이 생각할 필요는 없으므로 node.nextElementSibling만 기억하면 되며 호환성에 대해서는 걱정하지 않아도 됩니다. 문제.
document.createElement (' tagName ')
document.createElenent () 메소드는 tagName에 의해 지정된 Н TML 요소를 생성합니다. 이러한 요소는 원래 존재하지 않았고 필요에 따라 동적으로 생성되었기 때문에 요소 노드를 동적으로 생성 이라고도 합니다.
1.node.appendChild(child)
node.appendChild() 메소드는 지정된 상위 노드의 하위 노드 목록 끝에 노드를 추가합니다. CSS의 이후 의사 요소와 유사합니다.
2.node.insertBefore(자식, 지정된 요소)
<ul></ul>
<스크립트>
var ul = document.querySelector("ul");
var li =document.createElement("li");
var 스팬 = document.createElement("스팬")
ul.appendChild(li);
ul.insertBefore(span,ul.children[0]);
</script> 
node.removeChild(child)
node.removeChild(child) 메서드는 DOM에서 하위 노드를 삭제하고 삭제된 노드를 반환합니다.
<ul>
<li>아니우</li>
<li>결혼</li>
<li>톰</li>
</ul>
<스크립트>
var ul = document.querySelector("ul");
ul.removeChild(ul.children[2]);
</script> 
node.cloneNode ()
node.cloneNode () 메서드는 이 메서드를 호출한 노드의 복사본을 반환합니다. 복제 노드/복사 노드라고도 함
1. 대괄호 매개변수가 비어 있거나 false인 경우 이는 얕은 복사본입니다. 즉, 노드 자체만 복제되고 내부의 하위 노드는 복제되지 않습니다.
2. 대괄호 매개변수가 true이면 노드 자체와 모든 하위 노드를 복사하는 전체 복사입니다.
<ul>
<li>아니우</li>
<li>결혼</li>
<li>톰</li>
</ul>
<스크립트>
var ul = document.querySelector("ul");
var li1 = ul.children[0].cloneNode(); //얕은 복사 var li2 = ul.children[0].cloneNode(true); //깊은 복사 ul.appendChild(li1);
ul.appendChild(li2);
</script> 