Java를 공부한 뒤 JavaScript를 공부하니 브라우저 기반의 용어들이 많이 나와서 처음 배울때 아리송했던 기억이 있다.
해서 해당부분과 관련된 DOM에 대하여 정리하고자 한다.
DOM이란
Document Object Model의 약자로 HTML 또는 XML document와 상호작용하고 표현하는 API이다. DOM은 브라우저에서 로드되며, 노드 트리형태로 되어있다.
즉, 로드 및 렌더링된 HTML코드를 DOM이라고 하며 <html>이나 <body> 같은 HTML문서 태그들을 JavaScript가 이용할 수 있는 객체로 만들면 그것을 DOM이라고 한다.
넓은 의미로는 웹 브라우저가 HTML 페이지를 인식하는 방식을 의미하며, 좁은 의미로 본다면 document 객체와 관련된 객체의 집합을 의미하기도 한다.
브라우저 렌더링 과정
DOM에 대해 이해하기 위해서는 브라우저가 렌더링 되는 과정에 대해 이해할 필요가 있다.
주소창에 url을 입력하면 브라우저는 화면을 그리는데 필요한 요소들을 서버에 요청한다. 서버로부터 받은 요소들을 브라우저가 받으면 이 요소들을 브라우저가 이해할 수 있는 자료구조의 형태로 변환하는데 이 과정을 구문분석(parsing)이라 한다.
HTML이 구문분석을 거치면 DOM tree, CSS -> CSSOM tree, JavaScript -> AST(Abstract Syntax Tree)가 된다.
이 구문분석을 통해 위 그림과 같은 트리 구조를 가지게 되고, 해당 트리를 기반으로 브라우저에 렌더링 된다.
node란
노드란, 트리 구조에서 루트 노드를 포함한 모든 개체를 노드라고 표현하며 DOM을 구성하는 객체로 DOM은 모두 노드로 이루어진다.
html, head, body, title 등등 태그뿐 아니라 태그안의 텍스트나 속성 등 모두 node에 속한다.
이중 HTML 태그를 Element Node라고 하고 Element Node안에 있는 글자를 Text Node라고 부르기도 한다.
DOM 탐색하기
DOM Query
-
document.body
<body>요소 노드를 선택 -
document.head
<head>요소 노드를 선택 -
document.documentElement
<html>요소 노드를 선택 -
document.querySelector(CSS selector)
CSS 선택자를 사용하여 DOM에서 가장 처음으로 일치하는 요소를 반환한다. -
document.getElementById(Id)
속성 중 id를 가져와 해당 id를 가진 요소를 반환한다. 동일한 id가 두번 이상 발생하지 않으므로, 단 하나의 요소를 반환하게 된다. -
document.querySelectorAll(CSS selector)
CSS 선택자를 사용하여 DOM에서 일치하는 모든 요소를 NodeList로 반환한다. 일치하는 요소를 찾을 수 없으면 빈 NodeList를 반환하게 된다. -
document.getElementByClassName(CSS Class)
CSS 클래스를 가져와 DOM에서 일치하는 요소의 라이브 HTMLcollection을 반환한다. 일치하는 요소를 찾을 수 없으면 빈 HTMLcollection을 반환한다. -
document.getElementsByTagName(HTML Tag)
HTML 태그를 가져와 DOM에서 일치하는 요소의 라이브 HTMLcollection을 반환한다. 일치하는 요소를 찾을 수 없으면 빈 HTMLcollection을 반환한다.
DOM Traversing
-
parentNode
부모 노드를 탐색하여 HTMLElement 객체로 반환한다. 자식에게 부모노드는 하나이기 때문에 가장 가까운 부모노드에 접근한다. -
children
전체 자식 목록을 반환하며 배열 형태로 되어있다.children[1]에 접근하면 두번째 자식 목록에 접근할 수 있다.
childrenNodes는 자식 노드목록을 반환하며 텍스트노드를 포함한다. -
firstChild,lastChild
자식 노드를 탐색하여 각각 첫번째 자식과, 마지막 자식을 HTMLElement 객체로 반환한다. -
hasChildNodes
자식 노드의 존재 유무를 판단하여 Boolean 값을 반환한다. -
previousSibling,nextSibling
텍스트 요소를 포함한 모든 형제 노드를 탐색하여 HTMLElement 객체로 반환한다. -
previousElementSibling,nextElementSibling
Element type의 형제노드를 탐색하여 HTMLElement 객체로 반환한다. Element type을 탐색하기 때문에 Text Node 가 반환될 수 있다.
참고
[모던 자바스크립트] https://ko.javascript.info/dom-navigation
[Udemy] JavaScript - The Complete Guide 강의
[MDN] https://developer.mozilla.org/ko/
개발자로서 배울 점이 많은 글이었습니다. 감사합니다.