DOM은 HTML 문서의 계층 구조를 트리 형태로 표현하고 각 요소를 DOM 노드(DOM Node)로 다룹니다.
DOM(Document Object Model)은 웹 페이지의 구조를 표현하는 객체 모델입니다.
HTML 문서의 요소들을 자바스크립트에서 객체 형태로 다룰 수 있으며 웹 페이지와 상호작용할 수 있습니다.
Table of Contents
DOM Node 기본 개념
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>DOM 예제</title>
</head>
<body>
<div id="container">
<h1>제목</h1>
<p class="description">이것은 본문 내용입니다.</p>
</div>
</body>
</html>위의 예시와 같이 HTML 문서는 노드로 구성됩니다.
DOM Node 접근 방법
자바스크립트로 HTML 요소에 접근하려면 document 객체를 사용해야 합니다.
document 객체는 전체 문서의 DOM을 나타내며, 다양한 메소드를 제공합니다.
// id로 요소 접근
let div = document.getElementById('container'); // <div id="container">에 접근
// 클래스명으로 요소 접근
let paragraph = document.querySelector('.description'); // <p class="description">에 접근
// 태그명으로 요소 접근
let heading = document.querySelector('h1'); // <h1>에 접근요소에 접근하는 방법은 위의 예제와 같이 다양한 방법이 있습니다.
먼저 getElementById() 메소드를 사용하여 특정 id를 가진 요소에 접근할 수 있습니다.
다른 방법으로 특정 클래스명을 가진 요소에 접근하고 싶으면 querySelector() 같은 메소드에 CSS Selector를 사용하여 접근할 수도 있습니다.
Node 속성 읽고 수정하기
각각의 노드는 다양한 속성과 메소드를 제공합니다.
element
// 요소의 속성 읽기
let id = div.id; // "container"
let className = paragraph.className; // "description"
// 요소의 속성 수정하기
div.id = 'new-container'; // id 변경
paragraph.className = 'new-description'; // 클래스 변경이전 섹션에서 접근한 요소에서는 id, className 같은 속성을 읽을 수 있습니다.
값을 수정하려면 속성에 원하는 값을 할당하면 됩니다.
text
// 텍스트 노드 읽기
let headingText = heading.textContent; // "제목"
// 텍스트 노드 수정하기
heading.textContent = '새로운 제목'; // 텍스트 내용 변경텍스트 노드는 textContent 또는 innerText 속성을 사용하여 접근할 수 있습니다.
Node 추가 및 삭제
// 새로운 텍스트 생성
let newText = document.createTextNode('새로운 텍스트');
// 새로운 요소 생성
let newParagraph = document.createElement('p');
newParagraph.textContent = '이것은 새로운 문단입니다.';
// 새로운 노드 DOM에 추가
div.appendChild(newParagraph); // <div id="container">에 새로운 <p> 추가요소를 추가하려면 appendChild() 메소드를 사용하여 DOM에 새로 생성한 요소를 추가할 수 있습니다.
참고로 요소를 생성하려면 createElement() 메소드를 사용하면 됩니다.
이렇게 자바스크립트로 생성된 요소는 바로 DOM에 추가되지 않으므로 appendChild() 등으로 하나하나 추가해야합니다.
// 기존의 <p class="description"> 노드를 삭제
div.removeChild(paragraph); // <div id="container">에서 <p class="description"> 제거반대로 요소를 제거하려면 removeChild() 메소드를 사용하면 됩니다.
이 메소드는 DOM 트리에 추가되어 있는 요소를 DOM에서 제거하는 역할을 합니다.
DOM 트리 탐색
// 부모 노드 접근
let parentNode = paragraph.parentNode; // <div id="container">
// 자식 노드 접근
let firstChild = div.firstChild; // <h1> 요소
// 형제 노드 접근
let nextSibling = heading.nextElementSibling; // <p class="description">특정 요소를 기준으로 DOM 트리를 탐색할 수 있습니다.
부모 노드에 접근하고 싶으면 parentNode로 접근하고, 자식 노드는 firstChild, children 등을 사용할 수 있습니다.
이벤트 리스너 추가
// 클릭 이벤트 리스너 추가
heading.addEventListener('click', function() {
alert('제목이 클릭되었습니다!');
});요소에 이벤트를 추가하고 싶으면 addEventListener() 메소드를 사용합니다.
첫 번째 매개변수로 ‘click’을 넣으면 클릭 이벤트를 추가할 수 있습니다.
두 번째 매개변수에는 클릭을 한 경우 실행될 스크립트를 지정합니다.
정리
DOM은 자바스크립트를 사용하여 HTML 페이지를 동적으로 조작할 수 있게 해줍니다.
DOM 노드를 사용하면 HTML 요소, 텍스트, 속성 등을 다루고, 이벤트를 처리하며, 페이지의 콘텐츠를 동적으로 변경할 수 있습니다.
DOM은 웹 개발에서 매우 중요한 개념이며, 이를 잘 이해하고 활용하면 더 효과적인 웹 애플리케이션을 개발할 수 있습니다.