반응형
20. Node 관계 API
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 body와 ul 사이의 줄바꿈문자가 첫번째 자식 엘리먼트
//만약 <body><ul>로 이어서 코딩을 한다면 firstChild는 ul엘리먼트가 된다.
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>
'프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 생활코딩 javascript 정리 - 문자열로 노드 제어 (0) | 2017.07.31 |
|---|---|
| 생활코딩 javascript 정리 - jQuery Node 변경 API (0) | 2017.07.30 |
| 생활코딩 javascript 정리 - Node 변경 API (0) | 2017.07.29 |
| 생활코딩 javascript 정리 - Node 종류 API (0) | 2017.07.27 |
| 생활코딩 javascript 정리 - Node 객체 (0) | 2017.07.24 |
| 생활코딩 javascript 정리 - jQuery 조회 범위 제한 (0) | 2017.07.23 |
| 생활코딩 javascript - jQuery 속성 제어 API (0) | 2017.07.22 |
| 생활코딩 javascript 정리 - 속성 API (0) | 2017.07.19 |