[Javascript] 노드 워킹

지난 포스트에서 노드 취득에 대해 알아봤습니다. 근데 이 노드 취득법은 무조건 문서 전체를 검사하기 때문에 노드 취득을 여러번 하게된다면 퍼포먼스에 영향을 미치게 됩니다. 그래서 나온 아이디어가 현재 취득한 노드를 기준으로 주변 노드를 취득해보자라는 것에서 기인한 노드 워킹입니다.

---

1. 노드 워킹의 프로퍼티

노드 워킹은 서론에서 이야기 했듯이 현재 취득한 노드를 기준으로 다른 노드를 취득합니다. 관계로만 살펴보자면 부모 노드, 형 노드, 동생 노드, 자식노드 이렇게 네가지를 한 노드에서 취득할 수 있게 됩니다. 이를 정리하면 다음과 같습니다.

노드 워킹 프로퍼티	설명
parentNode	부모 노드 취득
previousSibling	형 노드 취득
previousElementSibling	형 요소 취득
nextSibling	동생 노드 취득
nextElementSibling	동생 요소 취득
childNodes	모든 자식 노드 취득
firstChild	첫번째 자식 노드 취득
firstElementsChild	첫번째 자식 요소 취득
lastChild	마지막 자식 노드 취득
lastElementsChild	마지막 자식 요소 취득

프로퍼티중 모든 자식 노드를 취득하는 childNodes는 이전의 여러 노드 취득법과 마찬가지로 값들의 집합 형태로 반환해줍니다.

 

노드 워킹의 프로퍼티는 이렇게 존재하고 사용방법은 다음과 같습니다.

let a = document.getElementsById(id);
let aParent = a.parentNode;

위와 같은 방식으로 지정하여 노드 주변의 노드들을 취득할 수 있습니다.

(위는 어디까지나 예시로 노드 취득 방법 및 사용법은 자유입니다.)