HTML DOM에서는, node 관계를 사용하여 노드 트리를 항해할 수 있습니다.
W3C HTML DOM 표준에 따르면, HTML 문서안의 모든 것이 노드입니다.
- 전체 문제는 문서 노드입니다.
- 모든 HTML 요소는 요소 노드입니다.
- HTML 요소 안의 텍스트들은 텍스트 노드입니다.
- 모든 HTML 속성은 속성노드입니다.(deprecated)
- 모든 주석은 주석 노드입니다.
https://www.w3schools.com/js/js_htmldom_navigation.asp
사진 출처
HTML DOM에서는, 자바스크립트에 의해 모든 노드 트리속의 노드들에 접근할 수 있습니다.
새로운 노드를 만들 수도 있고, 모든 노드들이 수정, 혹은 삭제될 수 있습니다.
노드 관계
노드 트리속의 노드들은 각자 계층적인 관계를 가집니다.
부모, 자식 그리고 형제라는 용어는 관계를 묘사하기 위해 쓰입니다.
- 노드 트리에서는, 탑 노드는 루트 혹은 루트 노드라 불립니다.
- 모든 노드가, 루트 노드를 제외하고, 전부 정확히 하나의 부모를 가집니다.
- 노드는 여러 자식을 가질 수 있습니다.
- 형제는 같은 부모를 가진 다른 노드입니다.
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>위에서는 <html>이 루트 노드입니다. 따라서 부모가 없습니다.
그리고 <head>, <body>는 서로 형제노드이고,
<body>안의 <h1>,<p>도 서로 형제노드 입니다.
노드 사이를 항해하기
자바스크립트에서는 다음에 오는 속성(property)을 가지고 노드 사이를 항해할 수 있습니다.
parentNodechildNodes[nodenumber]firstChildlastChildnextSiblingpreviousSibling
자식 노드와 nodeValue
<title id="demo">DOM Tutorial</title>여기서 DOM Tutorial은 단순한 text가 아닌 text node입니다.
그리고 그 노드의 값이 DOM Tutorial인 것입니다.
그리고 innerHTML을 통해 그 노드 값에 접근할 수 있게 됩니다.
var myTitle = document.getElementById("demo").innerHTML;
var myTitle = document.getElementById("demo").firstChild.nodeValue;
var myTitle = document.getElementById("demo").childNodes[0].nodeValue;위 세 줄의 코드는 모두 동일한 결과를 나타냅니다.
트리 구조와 DOM 항해에 대한 이해를 돕기 위해 innerHTML 말고 나머지 두 줄의 코드도 알아두는 편이 좋습니다.
nodeValue의 경우, 요소 노드의 nodeValue는 null 이지만,
텍스트 노드의 경우 그 텍스트 자체가 nodeValue이고,
속성 노드의 경우 nodeValue는 속성 값이 나옵니다.
nodeName
nodeName을 이용하면 현재 내가 JS를 통해 가져온 HTML 요소의 태그명을 알 수 있습니다.
nodeType
https://www.w3schools.com/js/js_htmldom_navigation.asp
이 부분은 필요없을 것 같아서 생략합니다. 위 링크를 확인하세요.
