DOM 정리!
웹에서 자바스크립트를 사용하는 이유 -> 어떤 동작, 이벤트 있을 때 웹문서를 동적으로 반응하게 하기 위해서 -> 웹문서의 요소들을 제어해야 한다 -> 이런 정보 요소를 자바스크립트로 가져와 프로그래밍할 때 사용
DOM은 자바스크립트를 사용해 웹문서에 접근, 제어하기 위해 객체를 사용해 체계적으로 정리하는 방법이다
웹문서를 하나의 객체로 정의, 그 안의 모든 요소도 객체로 인식하고 처리한다
DOM 트리
DOM은 문서 안의 요소 뿐만 아니라 요소에서 사용한 내용, 속성도 자식으로 나타낸다
이렇게 부모, 자식 구조로 표시하면 나무 형태가 되어 DOM 트리하고 한다
DOM 트리에서 가지가 갈라져 나간 항목을 노드라고 한다
*DOM 트리를 구성하는 원칙!
모든 HTML 태그는 요소(element) 노드이다
HTML 태그에서 사용하는 텍스트 내용은 자식 노드인 텍스트 노드이다
HTML 태그에 있는 속성은 자식 노드인 속성(attribute) 노드이다
주석은 주석(comment) 노드이다
node type 종류와 값
주의! Element node가 text를 갖고 있는 것이 아니다
text를 담기 위한 노드가 따로 있다. element node의 자식 노드에 갖고 있다!
attribute는 부속처럼 구성되어 있다
| Element node | 1 | <h1 class="heading">w3school</h1> |
| Attribute node | 2 | class="heading" (deprecated) |
| Text node | 3 | hello |
| Comment node | 8 | |
| Document node | 9 | HTML 문서 자신, <html>의 부모 |
| DOCUMENT_TYPE_NODE | 10 | <!Doctype html> |
* js로 DOM의 node 간 navigation(요소 탐색) 할 수 있다
parentNodes
childNodes[nodenumber]
firstChild
lastChild
nextSibling
previousSibling
attributes
<script>
//text node 값에 접근하는 방법
document.getElementById('id02').innerHTML =
document.getElementById('id01').innerHTML; //1
document.getElemntById('id01').firstchild.nodeValue; //2
document.getElementById('id01').childNodes[0].nodeVlue; //3
</script>* nodeValue
Element node의 nodeValue는 null
Text node의 nodeValue는 text 값
Attribute node의 nodeValue는 attribute value
'programming > JS' 카테고리의 다른 글
| [js] anim (0) | 2022.08.24 |
|---|---|
| [js] DOM_element (0) | 2022.08.22 |
| [js] DOM_event (0) | 2022.08.22 |
| [js] DOM (0) | 2022.08.22 |
| [js] BOM (0) | 2022.08.21 |