WeniVooks

검색

JavaScript 에센셜

DOM API와 DOM에 접근하기

1. DOM(Document Object Model) API란?

image.png

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>
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]

HTMLCollection과 NodeList

getElementsBy 메소드와 querySelectorAll 메소드는 모두 조건에 일치하는 모든 요소를 찾는다는 공통적인 기능을 수행합니다. 하지만 그 결과물을 콘솔창에서 확인하면 조금 다르다는것을 알게 됩니다.

<ul id="member-list">
  <li>라이캣</li>
  <li>빙키</li>
  <li>개리</li>
  <li>뮤라</li>
</ul>
 
<script>
  const member = document.getElementById('member-list');
  const getItems = member.getElementsByTagName('li');
  const queryItems = member.querySelectorAll('li');
 
  console.log(getItems);
  console.log(queryItems);
</script>
<ul id="member-list">
  <li>라이캣</li>
  <li>빙키</li>
  <li>개리</li>
  <li>뮤라</li>
</ul>
 
<script>
  const member = document.getElementById('member-list');
  const getItems = member.getElementsByTagName('li');
  const queryItems = member.querySelectorAll('li');
 
  console.log(getItems);
  console.log(queryItems);
</script>

위의 코드를 실행하면 아래와 같은 결과를 확인할 수 있습니다. getElementsBy 메소드는 HTMLCollection을 반환하고 querySelectorAll 메소드는 NodeList를 반환합니다.

HTMLCollection과 NodeList는 모두 배열과 비슷한 객체(array-like object) 형태를 가집니다. 안에 있는 데이터에 접근하기 위해서 배열처럼 원소의 인덱스로 접근한다는 공통점이 있지만, 가장 큰 차이점은 해당 객체에 포함될 수 있는 요소의 유형입니다. HTMLCollection은 HTML만 포함하지만, NodeList는 모든 유형의 DOM 요소인 노드 즉, text, 주석 등을 모두 포함합니다.

또 다른 차이점은 객체를 구성하는 값이 변경 가능한지 여부입니다. HTMLCollection은 실시간으로 업데이트되며, 해당 객체의 각 속성에 대한 변경 사항이 즉시 반영됩니다. 반면에, NodeList는 정적이므로 해당 객체에 대한 변경 사항은 즉시 반영되지 않습니다.

마지막으로 사용할 수 있는 메소드가 다릅니다. NodeList는 forEach 같은 배열 메소드를 사용할 수 있지만 HTMLCollection은 또 다른 기능을 지원합니다.

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

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

10장 DOM10.2 DOM 제어하기