Table of contents
Open Table of contents
Document Object Model
document 전역 객체를 통해 HTML 문서의 모델에 접근하여 수정이나 삭제 및 추가 작업을 수행할 수 있다.
HTML의 구성 요소는 DOM에서 Node 객체로 접근할 수 있다.
Document, Element, DocumentFragment 객체는 Node 객체를 상속 받는다.
Node 객체는 아래와 같은 종류가 있다.
| 타입 | nodeType | 설명 |
|---|---|---|
| 요소 노드 | 1 | 태그 요소의 노드 타입 |
| 속성 노드 | 2 | 태그의 속성 노드 타입 |
| 텍스트 노드 | 3 | 태그 내부의 Text를 나타내는 노드 타입 |
| 주석 노드 | 8 | 주석에 대한 노드 타입 |
| 문서 노드 | 9 | 최상위 document 객체를 가리키는 노드 |
Node 선택 방법
Node를 선택하는 방법은 크게 두 가지로 나뉜다.
첫번째는 선택한 노드를 기준으로 property를 통해 선택하는 방법이다.
| 속성 | 설명 | 반환 타입 | |
|---|---|---|---|
| childNodes | 해당 노드의 모든 자식 요소들을 NodeList 형태로 반환 | NodeList | readonly |
| firstChild | 해당 노드의 첫 번째 자식 노드를 반환 | Node 또는 null | |
| lastChild | 해당 노드의 마지막 자식 노드를 반환 | Node 또는 null | |
| nextSibling | 해당 노드의 다음 형제 노드를 반환 | Node 또는 null | |
| parentNode | 해당 노드의 부모 노드를 반환 | Node 또는 null | |
| parentElement | 해당 노드의 부모 요소를 반환 (부모가 Element Node인 경우에만) | Node 또는 null | |
| previousSibling | 해당 노드의 이전 형제 노드를 반환 | Node 또는 null |
위 속성이 가지고 있는 Node, NodeList 객체는 DOM의 변경 사항을 실시간으로 반영한다. 단, 반대로 해당 객체를 수정하여 DOM에 반영하는 것은 불가능하다.
| 속성 | 설명 | 반환 타입 |
|---|---|---|
| children | 해당 요소의 자식 요소를 반환한다. | HTMLCollection |
| firstElementChild | 해당 요소의 첫 번째 자식 요소를 반환한다. | Element 또는 null |
| lastElementChild | 해당 요소의 마지막 자식 요소를 반환한다. | Element 또는 null |
| nextElementSibling | 해당 요소의 다음 형제 요소를 반환한다. | Element 또는 null |
| previousElementSibling | 해당 요소의 이전 형제 요소를 반환한다. | Element 또는 null |
HTMLCollection도 마찬가지로 변경 사항이 실시간으로 반영되는 객체이며, item(index) 메소드로 각 요소에 개별 접근할 수 있다.
두 번째 방법으로는 메서드를 사용할 수 있다.
| 메서드 | 설명 | 반환 타입 |
|---|---|---|
| getElementsByClassName | 지정된 클래스 이름을 가진 모든 요소를 반환, Document 객체에서 호출하면 문서의 루트 노드부터 검색, Element 객체에서 호출할 수 있음. | HTMLCollection |
| getElementsByName | 지정된 이름을 가진 모든 요소를 반환, Document 객체를 통해서만 호출할 수 있음 | NodeList |
| getElementById | 지정된 ID를 가진 요소를 반환, Document 객체를 통해서만 호출할 수 있음 | Element 또는 null |
| querySelector | 지정된 CSS 선택자와 일치하는 첫 번째 요소를 반환, 유효하지 않은 CSS 선택자를 사용하면 SyntaxError 발생. | Element 또는 null |
| querySelectorAll | 지정된 CSS 선택자와 일치하는 모든 요소를 반환, non-live한 NodeList를 반환. | NodeList |
| getElementsByTagName | 지정된 태그 이름을 가진 모든 요소를 반환 | HTMLCollection |
| getElementsByTagNameNS | 지정된 네임스페이스와 태그 이름을 가진 모든 요소를 반환 | HTMLCollection |
| closest | 지정된 CSS 선택자와 일치하는 가장 가까운 부모 요소를 반환, 유효하지 않은 CSS 선택자를 사용하면 SyntaxError 발생. | Element 또는 null |
HTMLCollection은 항상 live 객체이지만, querySelectorAll 메소드에 의해 반환된 NodeList는 non-live한 객체이다.
XML에서는 네임스페이스로 같은 태그를 다른 의미를 가지도록 작성할 수 있다.
getElementsByTagNameNS는 같은 이름의 태그를 네임스페이스로 구분할 수 있도록 만들어진 메소드이다.
InnerText, TextNode, InnerHTML
<span>
Hello <!-- 첫 번째 span 요소의 innerText -->
<!-- 만약 display 속성이 없으면 World 문자열까지 포함된다. -->
<span style="display: none;">
World
</span>
</span>
innerText는 선택한 Node에 포함되어 있는 보이는 영역의 TextNode의 값을 가리킨다.
위 코드에서 첫 번째 span 요소의 innerText는 Hello가 될 것이다. 만약 안쪽의 span 요소가 보이는 상태라면 innerText는 Hello World가 된다.
textContent는 innerText와 다르게 모든 텍스트 노드의 값을 가져온다. (Hello World)
innerHTML은 선택한 요소에 포함되어 있는 모든 Node를 HTML로 가져온다.
https://stackoverflow.com/questions/35213147/difference-between-textcontent-vs-innertext