Node 관계 API

노드들간의 관계정보를 담고있는 API

Node 관계 API

  • node 객체는 각 노드들의 관계정보(자식, 형제, 부모)를 담고있는 API를 제공함

    • Node.childNodes : 자식 노드들을 유사배열에 담아서 반환

    • Node.firstChild : 첫 번째 자식 노드를 반환(문자도 포함)

    • Node.lastChild : 마지막 자식 노드를 반환

    • Node.nextSibling : 다음 형제 노드를 반환

    • Node.previousSibling : 이전 형제 노드를 반환

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title></title>
</head>
<body>
  <div id="start">
     <ul>
      <li>HTML</li>
      <li>
        CSS
        <ul>
          <li>SASS</li>
          <li>SCSS</li>
          <li>CSS-JS</li>
        </ul>
      </li>
      <li>JAVASCRIPT</li>
    </ul>
  </div>
  <script>
    var startElem = document.getElementById('start');
    
    // 줄바꿈 문자 등도 node 자식에 포함되어 ul이 아닌 개행문자를 가리키는 #text 객체 반환
    console.log(startElem.firstChild);
   
    // 줄바꿈의 다음 형제 요소인 ul태그가 반한됨
    console.log(startElem.firstChild.nextSibling);

    //개행 문자
    console.log(startElem.firstChild.nextSibling.nextSibling);
    
    // 다음 형제 요소가 없으므로 null 반환
    console.log(startElem.firstChild.nextSibling.nextSibling.nextSibling);
    
    // 모든 자식 노드를 가지는 NodeList(유사배열)를 반환
    console.log(startElem.childNodes);
  </script>
</body>
</html>

PreviousNode 객체NextNode 종류 API

Last updated

Was this helpful?