기존 블로그에 작성한 내용을 velog로 이전한 글입니다
1. DOM 이란
-
HTML 문서를 표현하는 트리 자료구조
-
HTML 구조를 제어할 수 있는 API
2. 노드
2.1 노드
HTML을 구성하는 개별적인 요소
-
문서 노드 : document 객체, HTML당 유일함.
-
요소 노드 : HTML 요소를 가리키는 객체.
-
어트리뷰트 노드 : HTML 요소의 어트리뷰트를 가리키는 객체.
-
텍스트 노드 : HTML 요소의 텍스트를 가리킴. 자식 노드를 가질 수 없다.
2.2 노드 객체의 상속 구조
| input 요소 노드 객체의 특성 | 프로토타입을 제공하는 객체 |
|---|---|
| 객체 | Object |
| 이벤트를 발생시키는 객체 | EventTarget |
| 트리 자료 구조의 노드 객체 | Node |
| 브라우저가 렌더링할 수 있는 웹 문서의 요소(HTML, XML, SVG)를 표현하는 객체 | Element |
| 웹 문서의 요소 중에서 HTML 요소를 표현하는 객체 | HTMLElement |
| HTML 요소 중에서 input 요소를 표현하는 객체 | HTMLInputElement |
3. 요소 노드 취득
3.1 요소 취득 함수들
| 함수 | 역할 |
|---|---|
| Document.prototype.getElementById | id로 어트리뷰트 탐색 |
| Document.prototype.getElementsByTagName | 태그로 탐색(HTML전체) |
| Element.prototype.getElementsByTagName | 태그로 탐색(특정 요소부터) |
| Document.prototype.getElementsByClassName | 클래스로 탐색(HTML전체) |
| Element.prototype.getElementsByClassName | 클래스로 탐색(특정 요소부터) |
| Document.prototype.querySelector | CSS선택자로 탐색(HTML전체) |
| Element.prototype.querySelector | CSS선택자로 탐색(특정 요소부터) |
3.2 HTMLCollection과 NodeList
-
HTMLcollection : 항상 객체 상태 변화를 실시간 반영함 (live)
-
NodeList : 대부분 실시간 반영 안하지만 경우에 따라 live 객체로 동작 (childNodes 프로퍼티)
4. 노드 탐색
4.1 노드 탐색 프로퍼티
-
Node.prototype : parentNode, previousSlibling, firstChild, childNodes
-
Element.prototype : previousElementSlibling, nextElementSlibling과 children
-
모두 접근자 프로퍼티이다.
4.2 자식 노드 탐색
| 프로퍼티 | 설명 |
|---|---|
| Node.prototype.childNodes | NodeList(자식 요소) 반환 |
| childNodes | NodeList(텍스트 or 요소)를 반환 |
| Element.prototype.children | 자식 요소 노드를 HTMLCollection에 담아 반환 |
| children | HTMLCollection(요소 노드) 반환 |
| Node.prototype.firstChild | 첫번째 자식 노드(텍스트 or 요소)를 반환 |
| Node.prototype.lastChild | 마지막 자식 노드(텍스트 or 요소)를 반환 |
| Element.prototype.firstElementChild | 첫번째 자식 노드(요소)를 반환 |
| Element.prototype.lastElementChild | 마지막 자식 노드(요소)를 반환 |
4.3 자식 노드 탐색
-
.hasChildNodes : 텍스트 노드 포함 자식 노드 탐색
-
.children.length : 요소 노드 존재만 탐색
-
.Element : 요소 노드 존재만 탐색
-
.firstChild : 텍스트 노드만 탐색
4.4 부모 노드 탐색
- .Node.prototype.parentNode : 부모 노드 탐색
4.5 형제 노드 탐색
전부 같은 부모 노드를 갖는 형제들 중에서 탐색을 한다.
-
Node.prototype.previousSibling : 이전 형제 노드 탐색 (텍스트 or 요소)
-
Node.prototype.nextSibling : 다음 형제 노드 탐색 (텍스트 or 요소)
-
Element.prototype.previousElementSibling : 이전 형제 노드 탐색 (요소)
-
Element.prototype.nextElementSibling : 다음 형제 노드 탐색 (요소)
4.6 탐색 가능 여부 확인
- Element.prototype.matches : 특정 노드 탐색 가능 여부 확인
5 노드 정보 취득
5.1 Node.prototype.nodeType
객체 종류를 나타내는 상수 반환
-
요소 노드 : 1 반환
-
텍스트 노드 : 3 반환
-
문서 노드 : 9 반환
5.2 nodeValue
프로퍼티 참조와 할당 모두 가능하지만 텍스트 노드의 값만 의미 있다.
<!DOCTYPE html>
<html>
<body>
<div id="foo">Hello <span>world!</span></div>
</body>
<script>
// div#foo 요소는 텍스트 노드가 아니다.
console.log(document.getElementById('foo').nodeValue); // null
// div#foo 요소의 텍스트 노드의 값을 취득
console.log(document.getElementById('foo').firstChild.nodeValue); // Hello
// span 요소의 텍스트 노드의 값을 텍스트를 취득
console.log(document.getElementById('foo').lastChild.firstChild.nodeValue); // world!
</script>
</html>5.3 textContent
요소 노드 안의 모든 텍스트를 반환.
참조와 할당 모두 가능하지만 HTML 마크업을 넣어도 문자열 취급된다.
할당시 모든 자식 노드는 제거된다.
<!DOCTYPE html>
<html>
<body>
<div id="foo">Hello <span>world!</span></div>
</body>
<script>
// div#foo 요소의 텍스트를 모두 취득
// HTML 마크업은 무시된다.
console.log(document.getElementById('foo').textContent); // Hello world!
</script>
</html>6. DOM 조작
새로운 노드 생성 및 추가, 삭제, 교체하는 것
6.1 innerHTML
-
setter, getter 존재
-
참조시 : 모든 요소 노드의 HTML 마크업을 문자열로 반환함
-
할당시 : HTML 마크업도 파싱되어 DOM에 반영됨 (보안문제 생길 수 있음)
-
할당시마다 매번 모든 자식 제거 후 새로 생성 (느려짐)
-
삽입 위치 지정 불가
6.2 insertAdjacentHTML
Element.prototype.insertAdjacentHTML(position, DOMString);-
첫 번째 인자에 위치를 지정할 수 있다
-
여전히 보안문제가 생길 수 있다
6.3 노드 생성과 추가
<!DOCTYPE html>
<html>
<body>
<ul id="animal">
<li>Lion</li>
</ul>
</body>
<script>
const $animal = document.getElementById('animal');
// 1. 요소 노드 생성
const $li = document.createElement('li');
// 2. 텍스트 노드 생성
const textNode = document.createTextNode('Rabbit');
// 3. 텍스트 노드를 요소 노드의 자식 노드로 추가
$li.appendChild(textNode);
// 4. 요소 노드를 DOM에 추가
$animal.appendChild($li);
</script>
</html>6.4 노드 삽입 및 이동, 복사, 교체, 삭제
-
.appendChild : 마지막 요소로 삽입, 이미 있는 요소를 전달하면 마지막으로 이동
-
.insertBefore : 지정한 자식 요소 앞에 삽입, 이미 있는 요소를 전달하면 지정 위치로 이동
-
.cloneNode() : 노드 복사(텍스트 노드x) 단, 인자에 true 전달시 모든 자식 노드 포함 복사
-
.replaceChild(교체요소, 교체당할요소) : 노드 교체, 제거된 노드는 DOM에서 제거
-
.removeChild() : 노드를 DOM에서 삭제, 반드시 부모 요소가 자신의 자식을 삭제해야 함
7. 어트리뷰트
7.1 attributes 조작
-
attributes 프로퍼티 : 요소의 프로퍼티 조회, 변경 가능 (DOM 프로퍼티)
-
Element.prototype.getAttribute : 조건을 만족하는 모든 요소의 프로퍼티 조회, 변경 가능 (중복 관리) (HTML 어트리뷰트)
7.2 HTML 어트리뷰트 vs DOM 프로퍼티
-
HTML 어트리뷰트 : HTML 요소의 초기 상태를 지정하는 것, 원래는 변하지 않으나 setAttribute 메소드로는 변경 가능하다(초기값 변경)
-
DOM 프로퍼티 : 사용자가 입력한 최신 상태를 관리
8. 스타일
8.1 인라인 스타일 조작
- HTMLElement#style : 노드의 인라인 스타일 참조 및 변경
8.2 클래스 조작
-
Element#className : setter와 getter 모두 존재, class 어트리뷰트 값을 취득하거나 변경
-
Element#classList : class 어트리뷰트 값을 담은 DOMTokenList 객체를 반환(add, remove, item, contains, replace, toggle 등)
8.3 요소에 적용된 CSS 스타일 참조
- getComputedStyle : 요소 노드에 적용되어 있는 평가된 스타일을 CSSStyleDeclaration 객체에 담아 반환 (최종적으로 적용된 스타일)
