[JavaScript] 자바스크립트 부모/자식/전/후 요소 읽어 오기

134_자바스크립트 부모/자식/전/후 요소 읽어 오기

[적용]

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

---

[문법]

속성	의미	타입
부모노드.children	자식 노드	요소군(HTMLCollection)
부모노드.firstElementChild	첫 번째 자식 노드	요소(Element)
부모노드.lastElementChild	마지막 자식 노드	요소(Element)
노드.nextElementSibling	다음 노드	요소(Element)
노드.previousElementSibling	이전 노드	요소(Element)
자식노드.parentNode	부모 노드	노드(Node)

---

[내용]

특정 요소와 관련하여 부모 요소, 자식 요소, 전후 요소를 가져온다.

 

HTML                                                                                                                                                              index.html

<div id="parent">
  <div id="child1">자식 요소1</div>
  <div id="child2">자식 요소2</div>
  <div id="child3">자식 요소3</div>
</div>

JavaScript                                                                                                                                                          main.js

const parentElement = document.querySelector('#parent');
console.log(parentElement.children);
// #자식 요소1, #자식 요소2, #자식 요소3 (HTMLCollection)

const firstElementChild = parentElement.firstElementChild;
console.log(firstElementChild);  // #자식 요소1
console.log(firstElementChild.nextElementSibling);  // #자식 요소2
console.log(firstElementChild.parentNode);  // #부모 요소

 

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김