JavaScript에서 노드 작업하기
아시다시피, 태그는 다른 태그를 포함할 수 있습니다. JavaScript 용어로 말하자면, DOM 요소는 다른 DOM 요소를 포함할 수 있습니다. 그러나, 주석과 일반 텍스트도 포함할 수 있습니다. 주석, 텍스트, DOM 요소는 모두 하나의 이름으로 통합됩니다 - 노드.
이미 속성 firstElementChild,
lastElementChild,
nextElementSibling,
previousElementSibling에
익숙하실 것입니다.
이러한 속성들은 정확히 DOM 요소들과만 작동하며,
나머지 노드들은 무시합니다. 일반적으로, 이것이 바로
우리가 필요한 것입니다.
그러나, 속성 firstChild,
lastChild, nextSibling, previousSibling도 존재합니다.
이러한 속성들은 비슷한 방식으로 작동하지만,
모든 노드들을 고려합니다. 예제를 통해
이러한 속성들의 차이점을 살펴보겠습니다.
세 개의 노드를 포함하는 div가 있다고 가정해 봅시다:
<div id="elem"><!--com-->text<span>tag</span></div>
이 div에 대한 참조를 변수에 저장해 보겠습니다:
let elem = document.querySelector('#elem');
이제 속성 firstChild와 firstElementChild에
무엇이 들어 있는지 확인해 봅시다:
console.log(elem.firstChild); // 주석
console.log(elem.firstElementChild); // span 태그
lastChild와 lastElementChild의 차이점을 보여주는
코드를 작성하세요.
nextSibling와 nextElementSibling의 차이점을 보여주는
코드를 작성하세요.
previousSibling와 previousElementSibling의 차이점을 보여주는
코드를 작성하세요.
