Javascript

[Javascript] DOM - node

shb 2022. 3. 11. 14:29

* DOM 에서 node 

node type (종류)와 nodeType 값
Element node 1                 <h1 class="heading">W3Schools</h1>
Attribute node 2                   class = "heading" (deprecated)
Text node 3                                    W3Schools
Comment node 8        
Document node 9                  HTML 문서 자신, <html> 의 부모
DOCUMENT_TYPE_NODE 10          <!Doctype html>

** 명심! Element node 가 text 를 갖고 있는 것이 아니다!!! 

JS 로 DOM의 node 간 navigate 할수 있다.
- parentNode
- childNodes[nodenumber]
- firstChild
- lastChild
- nextSibling
- previousSibling
- attributes

 

 

* Text node 의 값에 접근하는 방법 (3가지)

- document.getElementById('id01').innerHTML
- document.getElementById('id01').firstChild.nodeValue;
- document.getElementById('id01').childNodes[0].nodeValue;

 

 nodeValue 는
- Element node의 nodeValue는 null
- Text node의 nodeValue는 text값
- Attribute node의 nodeValue는 attribute value

 

 

* document.body 노드 밑의 모든 child 노드의 nodeName, nodeValue, nodeType 을 출력해보세요

hint) document.body.childNodes 사용

공백도 text

* 특정 element.attributes : attribute node(들) 만 추출한다