Document 탐색하기

DOM을 이용하면 요소와 요소의 콘텐츠에 무엇이든 할 수 있습니다.
하지만 무언가를 하기 전엔, 당연히 조작하고자 하는 DOM 객체에 접근하는 것이 선행되어야 합니다.

DOM에 수행하는 모든 연산은 document 객체에서 시작합니다.
document 객체는 DOM에 접근하기 위한 '진입점'입니다.

아래 그림은 DOM 노드 탐색이 어떤 관계를 통해 이루어지는지를 보여줍니다.

자식 노드 탐색하기

let val;

const list = document.querySelector("ul.list-group");
const listItem = document.querySelector("li.list-group-item:first-child");

console.log("list", list);
console.log("listItem", listItem);

val = list.childNodes; // NodeList반환, line break도 포함
val = list.childNodes[0].nodeName;
val = list.childNodes[3];
val = list.childNodes[3].nodeType;
// NodeType

// 1 - Element
// 2 - Attribute(deprecated)
// 3 - Text node
// 8 - Comment Node
// 9 - Document itself
// 10 - Doctype

// children element nodes 반환
val = list.children; // HTML Collection 반환(line break X)
val = list.children[0];
val = list.children[0].textContent = "hi";

// First child
val = list.firstChild;
// list.firstChid === list.childNodes[0]

val = list.firstElementChild;

// Last child
val = list.lastChild;
// list.lastChild === list.childNode[last.childNode.length - 1];

val = list.lastElementChild;

// child 요소 count
val = list.childElementCount;

// parent node 반환
val = listItem.parentNode;
val = listItem.parentElement;
val = listItem.parentElement.parentElement;

// next sibling 반환
val = listItem.nextSibling; // #text
val = listItem.nextElementSibling;
val = listItem.nextElementSibling.nextElementSibling;
val = listItem.nextElementSibling.nextElementSibling.previousElementSibling;

// previous sibling 반환
val = listItem.previousSibling;
val = list.previousElementSibling; // null

console.log(val);

• 자식 노드 : 바로 아래의 자식 요소를 나타냄

• 후손 노드 : 중첩 관계에 있는 모든 요소를 의미. 자식 노드와 그 보다 자식 노드 모두가 후손 노드가 됩니다.

• 모든 노드에 적용 가능한 탐색 프로퍼티
  parentNode, childNodes, firstChild, lastChild, previousSibling, nextSibling

• 요소 노드에만 적용 가능한 탐색 프로퍼티
  parentElement, children, firstElementChild, lastElementChild, previousElementSibling, nextElementSibling

DOM 컬렉션

childNodes는 마치 배열 같아 보입니다.
하지만 childNodes는 배열이 아닌 반복 가능한(iterable, 이터러블)유사 배열 객체인 컬렉션(collection)입니다.

childNodes가 컬렉션이기에 가지는 특징

1. for..of를 사용가능(for..in은 사용 X)비록 배열은 아니지만 forEach, for...of도 사용 가능
2. 배열이 아니기에 배열 메서드 사용 불가능
3. 위에 경우에 배열 메서드를 사용하고 싶다면 Array.from을 사용하면 진짜 배열을 만들 수 있음

for..of => 배열을 순환할 때 사용
for...in => 객체를 순환할 때 사용