관계 API
* 엘리먼트는 서로 부모, 자식, 형제자매로 연결되어 있다.
* 관계 API는 각각의 Node가 다른 Node와 연결된 정보를 반환해 문서를 탐색 할 수 있다.
- 종류
* Node.childNodes : 자식노드들을 유사배열에 담아서 리턴한다.
* Node.firstChild : 첫번째 자식노드
* Node.lastChild : 마지막 자식노드
* Node.nextSibling : 다음 형제 노드
* Node.previousSibling : 이전 형제 노드
- 예제
<body id="start"> <ul> <li><a href="./1">html</a></li> <li><a href="./2">css</a></li> <li><a href="./3">JavaScript</a> <ul> <li><a href="./4">JavaScript Core</a></li> <li><a href="./5">DOM</a></li> <li><a href="./6">BOM</a></li> </ul> </li> </ul> <script> //#text var s = document.getElementById('start'); document.write(1+" : "+ s.firstChild); //ul var u = s.firstChild.nextSibling document.write('<br/>'); document.write(2+" : "+ u); //#text 줄바꿈 document.write('<br/>') ; document.write(3+" : "+u.nextSibling); //script document.write('<br/>') ; document.write(4+" : "+u.nextSibling.nextSibling); //text,li,text,li,text,li,text = NodeList document.write('<br/>') ; document.write(5+" : "+ u.childNodes); //li(html) document.write('<br/>') ; document.write(6+" : "+ u.childNodes[1]); //body document.write('<br/>') document.write(7+" : "+ u.parentNode); </script> </body>
- 결과
'WEB > JavaScript' 카테고리의 다른 글
| Node 객체 : 변경 API (0) | 2016.10.15 |
|---|---|
| Node 객체 : 종류 API (0) | 2016.10.15 |
| Node 객체 (0) | 2016.10.15 |
| 속성과 프로퍼티 (0) | 2016.10.15 |
| Element 객체 : 속성 API (0) | 2016.10.15 |
