자식 DOM

아래 페이지를 살펴봅시다.

          <html>
<body>
  <div>사용자:</div>
  <ul>
    <li>John</li>
    <li>Pete</li>
  </ul>
</body>
</html>
        

아래 DOM 노드에 접근할 방법을 최소 한 가지 이상씩 생각해보세요.

방법은 다양합니다.

<div> DOM 노드:

          document.body.firstElementChild
// 또는
document.body.children[0]
// 또는 (첫 번째 노드는 공백이므로 두 번째 노드를 가져옴)
document.body.childNodes[1]
        

<ul> DOM 노드:

          document.body.lastElementChild
// 또는
document.body.children[1]
        

두 번째 <li> (Pete):

          // <ul>을 가져오고, <ul>의 마지막 자식 요소를 가져옴
document.body.lastElementChild.lastElementChild
        