- 모든 요소와 요소의 어트리뷰트, 텍스트를 각각의 객체로 만들고 이들 객체를 부자 관계를 표현할 수 있는 트리 구조로 구성한 것이다.
- JavaScript를 통해 동적으로 변경할 수 있다.
- HTML 문서에 대한 모델 구성 : HTML 문서를 로드한 후 문서에 대한모델을 객체의 트리(DOM tree)로 메모리에 생성한다.
- HTML 문서 내의 각 요소에 접근 / 수정 : DOM은 각 객체에 접근 및 수정이 가능하며 브라우저를 통해 보게 될 내용 또한 변경된다.
(1) DOM tree
- 문서 노드 : DOM tree에 접근하기 위한 시작점(entry point)이다. 트리의 최상위에 존재하며 각각 요소, 어트리뷰트, 텍스트 노드에 접근하려면 문서 노드를 통 해야 한다.
- 요소 노드 : HTML 요소를 표현한다. 부자관계를 가지며 부자 관계를 통해 구조화한다. 어트리뷰트, 텍스트 노드에 접근하려면 먼저 요소 노드를 찾아 접근해야 한다.
- 어트리뷰트 노드 : HTML 요소의 어트리뷰트를 표현한다. 요소의 자식이 아니라 요소의 일부로 표현된다. 요소 노드에 접근하면 어트리뷰트를 참조 및 수정할 수 있다.
- 텍스트 노드 : HTML 요소의 텍스트를 표현한다. 요소 노드의 자식이며 자식 노드를 가질 수 없다. DOM tree의 최종단이다.
<!DOCTYPE html>
<html>
<head>
<style>
</style>
</head>
<body>
<div>
<h1></h1>
<ul>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>(2) DOM Query / Traversing (요소에 접근)
- .getElementById(id) : id 어트리뷰트 값으로 요소 노드를 한 개 선택한다. 복수개가 선택된 경우, 첫 번째 요소만 반환한다.
- .querySelector(cssSelector) : CSS 셀렉터를 사용하여 요소 노드를 한 개 선택한다. 복수개가 선택된 경우, 첫 번째 요소만 반환한다.
- .getElementsByClassName(class) : class 어트리뷰트 값으로 요소 노드를 모두 선택한다. 공백으로 구분하여 여러 개의 class를 지정할 수 있다.
- .getElementsByTagName(tagName) : 태그명으로 요소 노드를 모두 선택한다.
- .querySelectorAll(selector) : 지정된 CSS 선택자를 사용하여 요소 노드를 모두 선택한다.
- .parentNode : 부모 노드를 탐색한다.
- .firstChild, lastChild : 자식 노드를 탐색한다.
- .hasChildNodes() : 자식 노드가 있는지 확인한다.
- .childNodes : 자식 노드의 컬렉션을 반환. 텍스트 요소를 포함한 모든 자식 요소를 반환한다.
- .children : 자식 노드의 컬렉션을 반환. 자식 요소 중에서 Element type 요소만을 반환한다.
- .previousSibling, .nextSibling : 형제 노드를 탐색. text node를 포함한 모든 형제 노드를 탐색한다.
- .previousElementSibling, .nextElementSibling : 형제 노드를 탐색. 형제 노드 중에서 Element type 요소만을 탐색한다.
'JavaScript' 카테고리의 다른 글
| [JavaScript] Event (1) | 2023.10.31 |
|---|---|
| [JavaScript] 동기식 처리 모델 vs 비동기식 처리 모델 (0) | 2023.10.31 |
| [JavaScript] Higher order function (1) | 2023.10.30 |
| [JavaScript] Array (1) | 2023.10.26 |
| [JavaScript] String (0) | 2023.10.26 |