[JS] 원하는 DOM node 잡아오기

얼마전에 투표UI 만들면서 DOM 요소가 맘대로 잡아와지지 않아서 한참 고생했는데

강의들으면서 쪼끔 정리할 수 있게 된것 같다.

배우고 나니까 별 일이 아니네.. 처음에는 어떻게 검색해야할지도 몰라서 멀리 돌아갔었다. 😭

 

 

 

DOM node? element?

검색하다보니 DOM node와 element의 개념이 다르다는걸 알게됐다.

What's the Difference between DOM Node and Element?

간략하게 말하면 DOM node가 element를 포함하는 개념으로

node에는 여러가지 타입이 있고, 그 중 하나가 element이다.

 

 

 

DOM property로 원하는 요소 잡아오기

1. node를 잡아오는 DOM property는 아래와 같고

node.parentNode; // 부모 Node or null

node.nextSibling; // 다음 형제 NodeList
node.previousSibling; // 이전 형제 NodeList

node.firstChild; // 첫번째 자식 Node or null
node.lastChild; // 마지막 자식 Node or null
node.childNodes; // 자식들 NodeList

2. element를 잡아오는 property는 아래와 같다.

node.parentElement; // 부모 HTMLElement or null

node.nextElementSibling; // 다음 형제 HTMLCollection
node.previousElementSibling; // 이전 형제 HTMLCollection

node.children; // 자식들 HTMLCollection

---

같은 역할을 할 것 같은 property들이 있는데, 이 때 node와 element의 구분이 필요하다.

<p>
  <b>Thank you</b> for visiting!
</p>

위 코드에서 요소를 잡아오는 경우

const paragragh = document.querySelector('p');

paragragh.childNodes; // NodeList : [HTMLElement, Text]
paragragh.children; // HTMLCollection : [HTMLElement]

childNodes는 b태그 하나와, p태그 내부의 텍스트 모두를 잡아오지만

children은 HTMLElement인 b태그 하나만 잡아오게 된다.

 

위 예시처럼 node와 element를 불러오는 DOM property를 구분하고, 어떻게 다른지 알아야 제대로 활용할 수 있다.