Node 객체는 Node 간의 관계 정보를 담고 있는 일련의 API를 가지고 있다. 다음은 관계와 관련된 프로퍼티들이다.
- Node.childNodes
자식노드들을 유사배열에 담아서 리턴한다. - Node.firstChild
첫번째 자식노드 - Node.lastChild
마지막 자식노드 - Node.nextSibling
다음 형제 노드 - Node.previousSibling
이전 형제 노드
아래는 위의 API를 이용해서 문서를 탐색하는 모습을 보여준다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | <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); // #textvar ul = s.firstChild.nextSiblingconsole.log(2, ul); // ulconsole.log(3, ul.nextSibling); // #textconsole.log(4, ul.nextSibling.nextSibling); // scriptconsole.log(5, ul.childNodes); //text, li, text, li, text, li, textconsole.log(6, ul.childNodes[1]); // li(html)console.log(7, ul.parentNode); // body</script></body> |
