[책] 자바스크립트 코드 레시피 278 - 121일차

부모 / 자식 / 전 / 후 요소 읽어오기

• 특정 요소와 관련된 요소를 가져오고 싶을 때

구문

부모노드.children 자식 노드
부모노드.firstElementChild 첫 번째 자식 노드
부모노드.lastElementChild 마지막 자식 노드
노드.nextElementChild 다음 노드
노드.previousElementSibling 이전 노드
자식노드.parentNode 부모 노드

실습

특정 요소와 관련하여 부모 요소, 자식요소, 전후 요소를 가져옵니다. 개발자 모드 열어서 콘솔창에서 확인해봅니다.

index.html

<div id="parent">
  <div id="child">1</div>
  <div id="child">2</div>
  <div id="child">3</div>
</div>

---

script.js

const parentElement = document.querySelector('#parent');

const children = parentElement.children;
console.log(children);

const firstElementChild = parentElement.firstElementChild;
console.log(firstElementChild);

const nextElementSibling = parentElement.firstElementChild.nextElementSibling;
console.log(nextElementSibling);

const parentNode = parentElement.firstElementChild.parentNode;
console.log(parentNode);