[JavaScript] ⑥ 자바스크립트 DOM 뜻과 활용 방법

DOM이란 무엇일까? 브라우저의 콘솔 창을 켜고 document라고 입력하면 해당 웹페이지의 HTML 객체가 반환된다. 이번 포스팅에서는 MDN 문서를 바탕으로 DOM의 뜻과 간단한 활용 예시를 정리해 보려고 한다.

DOM이란?

DOM이란 The Document Object Model의 약자로 HTML 문서(Document) 객체(Object)와 상호작용하는 모델(Model)을 의미한다. 즉, DOM을 통해 HTML 요소를 객체처럼 접근해 다룰 수 있다.

document.title // 현재 웹페지의 제목에 접근할 수 있다
document.title = "New Title" // 웹페이지의 제목을 변경할 수 있다!

브라우저와 DOM

브라우저는 HTML 문서를 파싱하여 DOM을 생성한다. 이를 통해 HTML 문서는 DOM 트리를 통해 계층적으로 표현되며, 이러한 구조를 통해 브라우저는 HTML 문서를 파악한다.

자바스크립트를 통한 DOM 활용 예시

다음은 DOM을 활용하여 자바스크립트를 통해 HTML 문서에서 p 태그를 선택하는 예시다.

const paragraphs = document.getElementsByTagName("p"); // 문서의 모든 p 태그를 선택

가장 많이 사용되는 방식은 HTML 태그에 id나 class를 지정하고 자바스크립트를 통해 이를 제어하는 것이다.

const contents = document.getElementById("content"); // id가 "contents"인 객체를 선택

또는 querySelector를 사용할 수도 있다.

const title = document.querySelector(".contents h1") // class 이름이 "contents"인 태그 내의 첫 번째 h1을 선택
const titles = document.querySelectorAll(".contents h1") // class 이름이 "contents"인 태그 내의 모든 h1을 선택

DOM과 document, windows

DOM을 사용하다 보면 document 와 windows 객체를 자주 보게 된다. 간단히 정리하자면, document 는 루트 다큐먼트를 의미하며, windows 는 브라우저를 가리킨다.

마치며

DOM이란 브라우저의 렌더링 엔진을 통해 HTML 문서를 파싱하여 구조화한 것이다. 사용자는 자바스크립트와 같은 언어를 사용해 DOM API를 활용할 수 있다.

 

참고: DOM 소개, MDN