Node 관계 API

Node 객체는 Node 간의 관계 정보를 담고 있는 일련의 API를 가지고 있다.

Node 관계 API

  • Node.childNodes : 자식노드들을 유사배열에 담아서 리턴한다.

  • Node.firstChild : 첫번째 자식노드

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

  • Node.nextSibling : 다음 형제 노드

  • Node.previousSibling : 이전 형제 노드

<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>
let s = document.getElementById('start');
console.log(1, s.firstChild); // #text

let 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>
PreviousNode 객체NextNode 종류 API

Last updated