17. JavaScript Ex.16 DOM(Document Object Model)-2

본 글은 HTML5, CSS 학습한 상태에서 작성한 글입니다.

예제풀이

[html DOM]

1. w3c html DOM 표준에 따르면 html 문서의 모든 것을 노드(node) 이다.

2. 전체 문서 : document 노드

   모든 html 요소 : 요소(Element) 노드

   요소 속성 : 속성 노드(사용X) 

   요소 안에 있는 텍스트 : 텍스트(Text) 노드

   주석처리 : 주석 노드

3. [Document] - pic_htmltree.gif

4. 노드 관계 - pic_navigate

1) 노드 트리에서 최상위 노드 : 루트 노드 (Html Element)

2) 모든 노드는 정확히 하나의 부모노드가 있다.(Root element의 부모노드X / parentNode)

3) 하나의 노드는 여러 개의 자식 노드를 가질 수 있다. 

첫번째 자식 노드 : firstChild

        마지막 자식 노드 : lastChild

         자식들의 집합(컬렉션) : childNodes

4) div(부모노드)

p(div 자식노드) childNodes[0] firstChild  previousSibling

p(div 자식노드) childNodes[1] XXXXXX

p(div 자식노드) childNodes[2] lastChild nextSibling

5. node~~~ 속성

1. nodeName 속성

ㄱ. 읽기전용

ㄴ. 요소노드 : 태그명과 동일

속성노드 : 속성명과 동일

텍스트노드 : 항상 #text

문서노드 : 항상 #document

2. nodeType 속성

ㄱ. 요소노드 : 1 ELEMENT_NODe

ㄴ. 속성노드 : 2 ATTRIBUTE_NODE

ㄷ. 텍스트토드 : 3 TEXT_NODE

ㄹ. 주석노드 : 8 COMMENT_NODE

3. nodeValue 속성

ㄱ. 요소노드 : X

ㄴ. 텍스트노드 : 텍스트 자체

ㄷ. 속성노드 : 속성값