푸린세스

Node 관계 API 본문

카테고리 없음

Node 관계 API

푸곰주 2023. 5. 13. 10:04

Node 객체는 Node 간의 관계 정보를 담고 있는 일련의 API를 가지고 있다. 다음은 관계와 관련된 프로퍼티들이다.

  • Node.childNodes
    자식노드들을 유사배열에 담아서 리턴한다.
  • Node.firstChild
    첫번째 자식노드
  • Node.lastChild
    마지막 자식노드
  • Node.nextSibling
    다음 형제 노드
  • Node.previousSibling
    이전 형제 노드

아래는 위의 API를 이용해서 문서를 탐색하는 모습을 보여준다.

<body id="start">
    <ul>
        <li><a href="./532">html</a></li>
        <li><a href="./533">css</a></li>
        <li><a href="./534">JavaScript</a>
            <ul>
                <li><a href="./535">JavaScript Core</a></li>
                <li><a href="./536">DOM</a></li>
                <li><a href="./537">BOM</a></li>
            </ul>
        </li>
    </ul>
    <script>
    var s = document.getElementById('start');
    console.log(1, s.firstChild); // #text     공백문자, 줄바꿈객체 --> node에 해당된다. --> text객체 (node의 하위객체)
    var ul = s.firstChild.nextSibling
    console.log(2, ul); // ul
    console.log(3, ul.nextSibling); // #text
    console.log(4, ul.nextSibling.nextSibling); // script
    console.log(5, ul.childNodes); //text, li, text, li, text, li, text
    console.log(6, ul.childNodes[1]); // li(html)
    console.log(7, ul.parentNode); // body
    </script>
    </body>