js) DOM 알아보기

G_New·2025년 3월 14일

💡DOM

Document Object Model
➡️ 즉, 문서 객체 모델을 뜻한다.

문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조, 스타일, 내용 등을 변경할 수 있게 돕는다.
출처 | MDN

💡 요약하자면,
DOM은 HTML을 탐색하고, HTML의 구조, 스타일, 내용 등을 변경할 수 있는 Web API이다.

위 설명에서 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공한다고 했다.

우리는 Javascript를 이용하여 DOM 구조에 접근할 것이다!!

➡️ 만약, HTML 요소로 <h1> 태그가 있다면 이를 모델링하는 Javascript 객체가 있을 것이다.
<h1> 태그를 나타내는 Javascript 객체를 변경하면 페이지에는 변경 사항이 반영될 것이다.

💡 즉, DOM은 Javascript에서 웹 페이지의 콘텐츠로 접근하는 통로이다!!

DOM을 사용하는 이유

HTML 과 CSS 만으로도 웹페이지를 만들 수 있지만, 원하는 기능을 구현하기 힘든 경우가 있다.

웹 페이지 데이터를 동적으로 변경하고 싶을 때
Interactive한 Web App을 만들고 싶을 때

이러한 경우에 Javascript를 통해 HTML에서 데이터를 가져와야 하므로 DOM을 사용한다.

주요 Data Types

1. document (문서 객체)

⭐ DOM의 대장 ⭐
웹 페이지 전체를 대표하는 객체이다.

모든 HTML 요소(element)와 속성(attribute), 텍스트 등 DOM에 있는 모든 것들이 이 document 안에 속해 있다.

console.log(document.title); // 현재 웹 페이지의 제목 출력

💡 document 없이는 HTML 요소에 접근하거나 조작할 방법이 없다! 😲

2. element (요소 객체)

DOM 안에 있는 각각의 HTML 태그
<div>, <h1>, <p>, <button> 이런 태그들이 전부 element이다.

HTML의 각 태그를 코드에서 객체 형태로 조작할 수 있게 해준다.

const button = document.createElement('button'); // 버튼 요소 생성
button.textContent = '버튼';
document.body.appendChild(button); // 페이지에 버튼 추가

💡 element는 단순히 모양만 있는 게 아니라, 클릭 이벤트 같은 기능도 가질 수 있다.

3. nodeList (노드 리스트)

요소들의 그룹

HTML 요소들을 모아둔 리스트이다.
배열처럼 생겼지만, 진짜 배열이 아니라 배열과 비슷한 객체이다.

const paragraphs = document.getElementsByTagName('p'); // 모든 <p> 요소 가져오기
console.log(paragraphs[0]); // 첫 번째 <p> 요소
console.log(paragraphs.item(1)); // 두 번째 <p> 요소 (다른 접근 방식)

💡 []와 item() 두 가지 방식으로 접근이 가능하다.

4. attribute (속성 객체)

HTML 요소의 속성들
class, id, href 같은 게 전부 attribute이다.

HTML 에서는 요소에 추가되는 부가 정보지만
DOM 에선 별도의 객체로 다룰 수 있다.

const link = document.createElement('a');
link.setAttribute('href', 'https://example.com'); // href 속성 추가
console.log(link.getAttribute('href')); // 'https://example.com' 출력

5. namedNodeMap (네임드 노드 맵)

속성들의 그룹

HTML 요소에 있는 모든 속성들을 저장하고 관리하는 객체이다.

const div = document.createElement('div');
div.setAttribute('id', 'myDiv');
div.setAttribute('class', 'container');
console.log(div.attributes.item(0)); // 첫 번째 속성 (id)
console.log(div.attributes['class']); // 'class' 속성 바로 접근

💡 배열처럼 item()으로 접근할 수도 있고, 속성 이름으로 바로 접근할 수도 있다.