// nodeType
console.log(Node.ELEMENT_NODE) // 1
console.log(Node.ATTRIBUTE_NODE) // 2
console.log(Node.TEXT_NODE) // 3
console.log(Node.COMMENT_NODE) // 8
console.log(Node.DOCUMENT_NODE) // 9
console.log(Node.DOCUMENT_TYPE_NODE); // 10
<!DOCTYPE html>
<html lang="ko">
<body>
<div></div>
<script>
const nodeAnchor = document.querySelector("div");
for (const key in nodeAnchor) {
console.log(key);
}
</script>
</body>
</html>
console.log(document.doctype.nodeName, document.doctype.nodeType) // html 10
console.log(document.nodeName, document.nodeType) // #document 9
console.log(document.createDocumentFragment().nodeName, document.createDocumentFragment().nodeType) // #document-fragment 11
console.log(document.querySelector('body').nodeName, document.querySelector('body').nodeType) // BODY 1
console.log(document.querySelector('body').firstChild.nodeName, document.querySelector('body').firstChild.nodeType) // #text 3
<!DOCTYPE html>
<html lang="ko">
<body>
<ul>
<li>Hi</li>
<li>Bye</li>
</ul>
<script>
const ulElementChildNodes = document.querySelector("ul").childNodes;
console.log(ulElementChildNodes);
// NodeList(5) [text, li, text, li, text]
Array.prototype.forEach.call(ulElementChildNodes, function (item) {
console.log(item); // 배열 내의 각 노드 항목 출력
});
</script>
</body>
</html>
다음 속성을 통해 DOM을 탐색하여 다른 노드에 대한 참조를 얻을 수 있다.
위 속성은 element 노드뿐만 아니라 text나 comment 노드도 탐색하는데, 이를 원치 않는다면 다음 속성을 사용하여 text와 comment 노드를 무시하고 DOM을 탐색할 수 있다.
contains()나 compareDocumentPosition()으로 DOM 트리 내의 Node 위치를 확인할 수 있다.
isEqualNode() 메서드를 호출하면 매개변수로 전달하는 노드와 동일한지 확인할 수 있다. 두 노드가 동일하려면 여러 조건(형식, nodeName, localName, namespaceURI, prefix, nodeValue, NameNodeMaps, childNodes NodeLists 등 동일)이 만족되어야 한다.
Reference
- DOM을 깨우치다(코디 린들리 / O'REILLY)
- 위키백과