DOM
- 문서 객체 모델(Document Object Model)
- 객체지향 모델로써 구조화된 문서를 표현하는 방식
DOM의 종류
- HTML DOM
- HTML 문서를 조작하고 접근하는 방법
- 모든 HTML 요소는 HTML DOM을 통해 접근 가능
- XML DOM
- XML 문서에 접근하여 그 문서를 다루는 표준화된 방법을 정의
- Document 객체
- 웹 페이지를 의미
- 웹 페이지에 존재하는 HTML 요소에 접근하고자 할 때는 반드시 Document 객체부터 시작해야 함
- Document 메소드
- HTML 요소와 관련된 직업을 도와주는 다양한 메소드 제공
자바스크립트와 DOM
- DOM 요소의 선택
var selectedItem = document.getElementByTagName("li"); // <li> 요소를 선택 var selectedItem = document.getElementById("id"); //아이디가 "id"인 요소를 선택 var selectedItem = document.getElementByClassName("odd"); //클래스명이 "odd"인 요소를 선택 var selectedItem = document.getElementByName("first"); //name 속성값이 "frist"인 요소를 선택
- 트리 구조에 따라서 HTML 요소 추가하기
-
해당 페이지의 바디에 “Big Head!”라는 텍스트의 h1 요소가 추가된다.
-
이래서 트리 구조를 잘 파악할 수 있어야 하는 거군요 😀
<html> <head> <script> // 문서가 다 로드되면 함수 실행 window.onload = function() { var heading = document.createElement("h1"); var heading_text = document.createTextNode("Big Head!"); heading.appendChild(heading_text); document.body.appendChild(heading); } </script> </head> <body> </body> </html>
-
객체와 노드
- 노드(Node)
- HTML DOM에서 정보를 저장하는 계층적 단위
- 노드 트리
- 노드들의 집합으로, 노드 간의 관계를 나타냄
- 노드의 종류
- 문서 노드(document node)
- HTML 문서 전체를 나타내는 노드
- 요소 노드(element node)
- 모든 HTML 요소는 요소 노드로, 속성 노드를 가질 수 있는 유일한 노드
- 주석 노드(comment node)
- HTML 문서의 모든 주석은 주석 노드
- 속성 노드(attribute node)
- 모든 HTML 요소의 속성은 속성 노드이며, 요소 노드에 관한 정보를 가진다.
- 하지만 해당 요소 노드의 자식 노드에는 포함되지 않는다.
- 텍스트 노드(text node)
- HTML 문서의 모든 텍스트는 텍스트 노드
- 문서 노드(document node)
노드에 접근하기
- 노드에 대한 정보는
nodeName,nodeValue,nodeType으로 접근할 수 있다.// 문서의 모든 자식 노드 중 첫번째 노드의 이름을 선택 document.childNodes[0].nodeName; // 아이디가 "heading"인 요소의 첫번째 자식 노드의 노드값을 선택 document.getElementById("heading").firstChild.nodeValue; // // 아이디가 "heading"인 요소의 첫번째 자식 노드의 노드타입을 선택 document.getElementById("heading").firstChild.nodeType; - HTML 노드별
nodeType값 예시- 요소노드:
1 - 속성노드:
1 - 텍스트노드:
3 - 주석노드:
8 - 문서노드:
9
- 요소노드:
https://github.com/jiyehyeon