Node 객체는 DOM에서 시조와 같은 역할을 하며 모든 DOM 객체는 Node 객체를 상속받는다.
*시조 : 어떠한 사상을 처음 개척한 사람
각각의 엘리먼트들은 서로 부모, 자식, 형제/자매 관계로 연결되어있다.
각 엘리먼트들이 어떠한 관계로 연결되어있는지를 Node API를 통해 프로그래밍적으로 확인할 수 있다.
Node 관계 API
앞서 설명했다시피 HTML 코드에 있는 문서의 모든 구성요소의 객체는 공통적으로 Node 객체를 상속받는다.
예제코드를 통해 프로그래밍적으로 어떠한 관계로 연결되어있는지 확인해본다.
<body id="start">
<ul>
<li><a href="./1">Chelsea</a></li>
<li><a href="./2">Liverpool</a></li>
<li><a href="./3">Tottenham</a>
<ul>
<li>Son</li>
<li>Kane</li>
<li>Alli</li>
</ul>
</li>
</ul>
<script>
var A = document.getElementById('start');
console.log(1, A.firstChild);
console.log(2, A.firstChild.nextSibling);
console.log(3, A.firstChild.nextSibling.nextSibling);
console.log(4, A.firstChild.nextSibling.nextSibling.nextSibling);
console.log(5, A.firstChild.nextSibling.firstChild);
console.log(6, A.firstChild.nextSibling.firstChild.nextSibling);
console.log(7, A.firstChild.nextSibling.firstChild.nextSibling.firstChild);
</script>
</body>body 태그의 id를 start 로 주고 자바스크립트부분에서 해당 엘리먼트의 객체를 변수 A에 담았다.
그럼 A라는 객체는 body 태그가 될 것이다.
A.firstChild 로 A객체의 첫번째 자식노드를 확인해본다.
text 가 나왔다.
얼핏보면 body 엘리먼트의 다음 엘리먼트는 <ul> 로 보이지만,
body 엘리먼트와 ul 엘리먼트 사이에 줄바꿈 이라는 구성요소가 있는 것이다.
만약 body엘리먼트 다음에 줄바꿈을 하지 않고 다음과 같이 쓰면,
<body id="start"><ul>
ul 엘리먼트가 나오는 것을 확인할 수 있다.
모든 구성요소들에 대해 객체가 존재하는 것이며 줄바꿈 이라는 보이지 않는 문자도 하나의 객체가 있는 것이다.
다시 돌아가서,
A.firstChild 라고 하는 body 엘리먼트의 첫 번째 자식노드는 줄바꿈이라고 하는 text 형태의 노드가 된다.
그럼이제 줄바꿈 형태의 노드의 nextSibling, 즉 다음 형제노드는
ul 태그의 노드가 된다.
형제/자매노드란 같은 레벨에 있는 노드라고 보면 된다.
body 태그 안에서 줄바꿈과 ul 노드는 같은 레벨에 위치해 있는 노드인 것이다.
A.firstChild 라고 하는 줄바꿈 노드의 첫번째 자식노드를 확인해보면,
줄바꿈 노드 하위에 해당되는 노드는 없기 때문에 null 이 나오는 것을 확인할 수 있다.
다시 ul 노드쪽으로 돌아가서,
ul 노드를보면 ul 태그 하위에 li 태그들이 있고 Tottenham 이라는 텍스트필드를 가진 li 태그 하위에 또 ul 태그가 있으며 그 ul 태그 하위에 Son, Kane, Alli 라는 텍스트를 가진 li 태그들이 존재한다.
body 노드 다음의 줄바꿈 노드 다음에 제일 먼저 오는 ul 노드는 A.firstChild.nextSibling 이다.
그 노드의 sibling 과 child를 확인해본다.
먼저 child를 보면 제일 처음오는 child는 text다.
이것도 마찬가지로 공백이나 줄바꿈과 같은 형태의 노드가 있기 때문이다.
공백이나 줄바꿈과 같은 형태의 노드 다음에 오는 sibling 노드를 보면 li 노드가 오는 것을 확인할 수 있다.
다음 sibling을 확인해보면,
text라고 하는 sibling은 script 노드와 ul노드 사이에있는 공백 또는 줄바꿈에 해당되는 노드이다.
그 다음 sibling을 보면 script 노드가 오는 것을 확인할 수 있다.
sibling은 같은 레벨에 위치한 노드들에 해당되는 것이고 body 노드의 자식노드는 ul, 줄바꿈, script 노드임을 알 수 있다.
child 와 sibling 에 대한 구조적인 설명은 여기까지 정리하고 위 코드의 결과를 확인해보면,
위와 같은 console.log 결과를 확인할 수 있다.
'Javascript' 카테고리의 다른 글
| 17. 이벤트 (0) | 2021.09.27 |
|---|---|
| 16. Node 종류 API (0) | 2021.09.18 |
| 14. jQuery 조회 범위 제한 (0) | 2021.09.16 |
| 13. jQuery 속성 제어 (0) | 2021.09.15 |
| 11. Element 객체 & 식별자 API (0) | 2021.09.13 |