JavaScript 베이스캠프

DOM API와 DOM에 접근하기

DOM 이해하기

1. DOM(Document Object Model) API란?

DOM은 HTML 문서의 내용을 트리 형태로 구조화하여 웹페이지와 프로그래밍 언어를 연결시켜주는 역할을 합니다. DOM은 웹 페이지를 조작하고 수정할 수 있게 해주는 중요한 개념입니다. 각각의 요소와 속성, 콘텐츠를 표현하는 단위를 '노드(node)' 라고 합니다.

이 노드 안에 있는 텍스트를 수정하거나, 새로운 요소를 추가하거나, 요소를 삭제하는 등의 작업을 할 수 있습니다. 이러한 작업을 통해 웹 페이지를 동적으로 변경할 수 있습니다. 동적이라고 해서 꼭 움직이는 것만을 의미하는 것은 아닙니다. 사용자의 입력에 따라 화면이 바뀌거나, 데이터에 따라 화면이 변경되는 것도 동적이라고 할 수 있습니다. 예를 들어 채팅창에 채팅이 올라오는 것도 동적인 화면이라고 할 수 있습니다.

CODE	DOM TREE

1.1 DOM 트리 예시

아래 코드를 통해 트리를 탐험해 봅시다.

<!DOCTYPE html>
<html>
  <head>
    <title>My Document</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <title>My Document</title>
  </head>
  <body>
    <h1>Hello, World!</h1>
    <p>This is a paragraph.</p>
  </body>
</html>

위 코드를 html파일로 저장한 후 브라우저의 콘솔에서 아래 코드를 하나씩 실행해보세요.

console.log(document.head); // <head>...</head>
console.log(document.body); // <body>...</body>
console.log(document.body.childNodes); // NodeList(3) [#text, h1, p]
console.log(document.body.childNodes[1]); // <h1>Hello, World!</h1>
console.log(document.body.childNodes[1].tagName); // H1
console.log(document.body.childNodes[1].innerText); // Hello, World!
console.log(document.body.childNodes[2].nodeType); // 1 (Element Node)

console.log(document.head); // <head>...</head>
console.log(document.body); // <body>...</body>
console.log(document.body.childNodes); // NodeList(3) [#text, h1, p]
console.log(document.body.childNodes[1]); // <h1>Hello, World!</h1>
console.log(document.body.childNodes[1].tagName); // H1
console.log(document.body.childNodes[1].innerText); // Hello, World!
console.log(document.body.childNodes[2].nodeType); // 1 (Element Node)

API란 무엇인가요?

API는 Application Programming Interface의 약자로, 프로그램 간에 상호작용할 수 있도록 도와주는 인터페이스입니다. 쉽게 말해, 웹 페이지와 자바스크립트가 상호작용할 수 있게 해주는 '키오스크'라고 기억하면 됩니다. 우리는 이 '키오스크'와 같은 시스템을 통해 웹 페이지를 조작할 수 있습니다. 메뉴얼 대로만 실행한다면 안에 요리가 어떻게 되고 있는지, 주문은 확실하게 되고 되었는지 같은 것을 확인할 필요가 없습니다. 기다리기만 하면 우리는 완성된 요리를 먹을 수 있는 것이죠.

2. DOM 트리에 접근하기

document 객체를 통해 HTML 문서에 접근할 수 있습니다. document 객체는 브라우저가 불러온 웹 페이지를 나타내며, DOM 트리의 진입점 역할을 수행합니다.

2.1 getElementById

해당하는 ID를 가진 요소에 접근합니다.

const element = document.getElementById('myId');
console.log(element); // <div id="myId">...</div>

const element = document.getElementById('myId');
console.log(element); // <div id="myId">...</div>

2.2 getElementsByTagName

해당하는 태그 이름을 가진 모든 요소에 접근합니다.

const elements = document.getElementsByTagName('p');
console.log(elements); // HTMLCollection(2) [p, p]

const elements = document.getElementsByTagName('p');
console.log(elements); // HTMLCollection(2) [p, p]

2.3 getElementsByClassName

해당하는 클래스를 가진 모든 요소에 접근합니다.

const elements = document.getElementsByClassName('myClass');
console.log(elements); // HTMLCollection(2) [div.myClass, div.myClass]

const elements = document.getElementsByClassName('myClass');
console.log(elements); // HTMLCollection(2) [div.myClass, div.myClass]

2.4 querySelector

CSS 선택자를 사용하여 단일 요소에 접근합니다. 우리 수업에서 가장 많이 사용할 메서드입니다.

const element = document.querySelector('.myClass');
console.log(element); // <div class="myClass">...</div>

const element = document.querySelector('.myClass');
console.log(element); // <div class="myClass">...</div>

아래 자바스크립트를 실행하면 출력되는 요소의 class를 확인해보세요.

console.log('hello');

2.5 querySelectorAll

CSS 선택자를 사용하여 여러 요소에 접근합니다.

const elements = document.querySelectorAll('.myClass');
console.log(elements); // NodeList(2) [div.myClass, div.myClass]

const elements = document.querySelectorAll('.myClass');
console.log(elements); // NodeList(2) [div.myClass, div.myClass]

3. 요약

DOM은 웹 페이지의 구조를 트리 형태로 표현하며, 자바스크립트가 HTML 문서와 상호작용할 수 있도록 도와줍니다. document 객체와 다양한 메서드를 사용하여 DOM 요소에 접근하고 조작할 수 있습니다. 이를 통해 동적인 웹 페이지를 만들 수 있습니다.

다음 장에서는 DOM을 조작하는 방법과 이벤트 처리에 대해 알아보겠습니다.