DOM (Document Object Mode)
브라우저의 렌더링 엔진은 웹 문서를 로드한 후 파싱하여 브라우저가 이해할 수 있는 구조로 구성하고 메모리에 적재하는데, 이를 DOM이라고 한다.
모든 요소와 요소의 속성, 텍스트를 각각의 객체로 만들고 트리 구조를 구성한다.
자바스크립트를 통해 모든 객체에 접근할 수 있고, 동적으로 변경할 수 있다.
DOM Tree
DOM에서 모든 요소, 속성, 텍스트는 하나의 객체이며 Document 객체의 자식이다.
DOM Tree의 진입점은 document이며, 최종점은 요소의 텍스트를 나타내는 객체이다.
크롬 브라우저 개발자 도구의 Element - Properties에서 DOM Tree를 확인할 수 있다.
<!DOCTYPE html>
<html>
<head>
<style>
.red { color: #ff0000; }
.blue { color: #0000ff; }
</style>
</head>
<body>
<div>
<h1>Cities</h1>
<ul>
<li id="one" class="red">Seoul</li>
<li id="two" class="red">London</li>
<li id="three" class="red">Newyork</li>
<li id="four">Tokyo</li>
</ul>
</div>
</body>
</html>
텍스트 노드의 생성에는 두가지 예외가 있다.
<head>이전의 공백과 새 줄은 무시된다.</body>뒤에 공백이 존재할 수 없다. 뒤에 있는 콘텐츠는 자동으로 안쪽으로 옮겨진다.
브라우저의 자동 교정
기형적인 HTML을 만나면 브라우저는 DOM 생성 과정에서 HTML을 자동으로 교정한다.
<html>,<body>,<head>태그가 없는 경우 자동으로 추가한다.- 태그의 시작과 끝이 맞지 않아도 자동으로 빠진 부분을 채워 넣어 준다.
노드 타입
노드 타입은 총 열두 가지인데, 주로 네 가지 노드를 다룬다.
문서 노드 (Document Node)
트리의 최상위에 존재하며 DOM Tree의 진입점이 되는 노드이다.
요소 노드 (Element Node)
HTML 요소를 표현한다. 어트리뷰트, 텍스트 노드에 접근하려면 먼저 요소 노드를 찾아 접근해야 한다.
모든 요소 노드는 요소별 특성을 표현하기 위해 HTMLElement 객체를 상속한 객체로 구성된다.
어트리뷰트 노드 (Attribute Node)
HTML 요소의 어트리뷰트를 표현한다. 해당 요소의 자식이 아닌 요소의 일부로 표현된다.
텍스트 노드 (Text Node)
HTML 요소의 텍스트를 표현한다. 테스트 노드는 요소 노드의 자식이며 자식 노드를 가질 수 없다.
텍스트 노드는 DOM Tree의 최종단이다.
DOM Query (선택)
DOM 요소에 접근하기 위해 사용할 수 있는 document 객체의 메서드가 있다.
document.getElementById
id 어트리뷰트 값으로 선택된 첫 번째 요소를 HTMLElement 객체로 반환
document.querySelector
CSS 셀렉터를 사용하여 선택된 첫 번째 요소를 HTMLElement 객체로 반환
document.getElementsByClassName
class 어트리뷰터 값으로 선택된 모든 요소 노드를 HTMLCollection으로 반환- 주의: 반복문을 사용할 때 제대로 동작하지 않을 가능성이 있다. HTMLCollection은 배열이 아닌 유사배열(array-like object)이며, 실시간으로 값이 변경되는(Live) 특징이 있기 때문이다.
- 해결 방법: HTMLCollection을 배열로 변경하여 조작하거나,
querySelectorAll메소드를 사용하는 방법이 있다.
document.getElementsByTagName
태그 명으로 선택된 모든 요소 노드를 HTMLCollection으로 반환
document.querySelectorAll
CSS 셀렉터를 사용하여 선택된 모든 요소 노드를 NodeList(배열)로 반환
DOM Traversing (탐색)
특정 DOM 요소에서 탐색을 통해 다른 DOM 요소에 접근할 수 있다.
parentNode
부모 노드를 탐색하여 HTMLElement 객체로 반환
firstChild,lastChild
자식 노드를 탐색하여 HTMLElement 객체로 반환- 주의: IE를 제외한 대부분의 브라우저는 요소 사이의 공백과 줄바꿈 문자를 텍스트 노드로 취급한다. 따라서 원하는 DOM 요소가 선택되지 않을 수 있다.
- 해결방법:
firstElementChild,lastElementChild를 사용한다.
hasChildNodes
자식 노드가 있는지 확인하여 Boolean 값을 반환
childNodes
텍스트 요소를 포함한 모든 자식 요소를 NodeList(배열)로 반환
children
Element type의 모든 자식 요소를 HTMLCollection으로 반환
previousSibling,nextSibling
텍스트 요소를 포함한 모든 형제 노드를 탐색하여 HTMLElement 객체로 반환
previousElementSibling,nextElementSibling
Element type의 형제 노드를 탐색하여 HTMLElement 객체로 반환
Reference
https://poiemaweb.com/js-dom
https://ko.javascript.info/dom-nodes
Software Engineer 🍊