프로그래밍/Javascript

웹 개발자를 위한 DOM 조작 완벽 가이드: DOM 트리의 이해와 활용

shimdh 2025. 2. 13. 09:58
728x90

웹 개발에서 문서 객체 모델(DOM, Document Object Model) 은 웹 페이지를 조작하고 동적인 사용자 경험을 제공하는 핵심 개념입니다. DOM을 효과적으로 다루는 것은 JavaScript 개발자가 반드시 익혀야 할 필수 기술 중 하나입니다. 이번 블로그에서는 DOM 트리의 구조와 노드 유형, 그리고 다양한 조작 기법을 심층적으로 살펴보고, 실용적인 예제까지 소개하겠습니다.

📌 DOM 트리란 무엇인가?

DOM은 HTML 문서를 객체 형태로 표현하는 구조입니다. HTML 문서가 브라우저에서 해석되면, 각 HTML 요소는 노드(Node)로 변환되며 계층적인 DOM 트리를 형성합니다. 이를 통해 JavaScript는 HTML 요소를 선택하고 변경할 수 있습니다.

🔹 DOM 트리의 계층 구조

예제 HTML 코드를 살펴보겠습니다.

<!DOCTYPE html>
<html>
<head>
    <title>예제 페이지</title>
</head>
<body>
    <h1>안녕하세요!</h1>
    <p>이것은 간단한 예제입니다.</p>
</body>
</html>

이 HTML 코드는 다음과 같은 DOM 트리 구조를 가집니다.

Document
 └── html
     ├── head
     │   └── title
     └── body
         ├── h1
         └── p

🔹 DOM 트리에서의 부모-자식 관계

  • html은 최상위(root) 요소로 head와 body를 포함합니다.
  • body는 h1, p 등의 자식 요소를 포함합니다.
  • 모든 요소는 계층적인 부모-자식 관계를 가지며, JavaScript를 통해 특정 요소를 선택하고 조작할 수 있습니다.

📌 DOM 노드 유형

DOM에서 HTML 문서는 다양한 노드(Node)로 구성됩니다. 각 노드에는 고유한 역할이 있습니다.

🔹 주요 노드 유형

  1. 요소 노드(Element Node)

    • HTML 태그를 의미하며, 가장 많이 사용되는 노드 유형입니다.
    • 예: <div>, <h1>, <p> 등

  2. 텍스트 노드(Text Node)

    • 요소 내부의 실제 텍스트 내용을 포함하는 노드입니다.
    • 예: <p>안녕하세요!</p>에서 "안녕하세요!"는 텍스트 노드입니다.

  3. 속성 노드(Attribute Node)

    • HTML 요소에 추가된 속성을 나타냅니다.
    • 예: <a href="https://example.com">링크</a>에서 href="https://example.com"은 속성 노드입니다.

이러한 노드는 JavaScript에서 동적으로 접근하고 수정할 수 있으며, 이를 통해 웹 페이지의 동적 변화를 구현할 수 있습니다.

📌 DOM 조작을 위한 주요 메서드

DOM을 조작하려면 요소 선택, 추가, 변경 및 삭제와 관련된 다양한 JavaScript 메서드를 활용해야 합니다.

🔹 1. 요소 선택하기

DOM 요소를 선택하는 방법은 여러 가지가 있습니다.

✅ document.getElementById()

특정 id 값을 가진 요소를 선택합니다.

const heading = document.getElementById('myHeading');
heading.textContent = '새로운 제목으로 변경됨';

✅ document.querySelector()

CSS 선택자를 사용하여 첫 번째 일치하는 요소를 찾습니다.

const paragraph = document.querySelector('p');
paragraph.style.color = 'blue'; // 글자 색상을 파란색으로 변경

✅ document.querySelectorAll()

모든 일치하는 요소를 선택하고, NodeList 형태로 반환합니다.

const allParagraphs = document.querySelectorAll('p');
allParagraphs.forEach(p => p.style.fontSize = '18px');

🔹 2. 새로운 요소 생성 및 삽입

웹 페이지에 새로운 요소를 추가할 수 있습니다.

✅ document.createElement()

새로운 HTML 요소를 생성합니다.

const newParagraph = document.createElement('p');
newParagraph.textContent = '새로 추가된 단락입니다.';
document.body.appendChild(newParagraph);

✅ insertBefore()

새 요소를 특정 요소 앞에 삽입합니다.

const parentElement = document.getElementById('container');
const newDiv = document.createElement('div');
newDiv.textContent = '새로운 div 요소';
const referenceElement = document.getElementById('existingElement');
parentElement.insertBefore(newDiv, referenceElement);

🔹 3. 요소 삭제

DOM에서 특정 요소를 제거하는 방법도 있습니다.

✅ removeChild()

부모 요소에서 특정 자식 요소를 제거합니다.

const oldParagraph = document.getElementById('myParagraph');
if (oldParagraph) {
    document.body.removeChild(oldParagraph);
}

✅ remove()

ES6부터 지원되는 remove() 메서드를 사용하면 더 간결하게 요소를 삭제할 수 있습니다.

document.getElementById('myParagraph')?.remove();

📌 실전 예제: 버튼 클릭으로 동적 요소 추가하기

아래 예제는 버튼 클릭 시 제목을 변경하고 새로운 단락을 추가하는 기능을 구현합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <title>DOM 조작 예제</title>
</head>
<body>

<h1 id="mainTitle">원래 제목</h1>
<button id="changeButton">변경하기</button>

<script>
document.getElementById('changeButton').addEventListener('click', function() {
    // 제목 변경
    const title = document.getElementById('mainTitle');
    title.textContent = '변경된 제목';

    // 새 단락 추가
    const newPara = document.createElement('p');
    newPara.textContent = '여기에 새 단락이 추가되었습니다.';

    // 본문에 새 단락 삽입
    document.body.appendChild(newPara);
});
</script>

</body>
</html>

📌 실행 결과
"변경하기" 버튼을 클릭할 때마다 제목이 변경되고 새로운 단락이 추가됩니다.

📌 요약: DOM 조작의 핵심 포인트

🔹 DOM 트리란?

  • HTML 문서를 계층적으로 표현하는 구조
  • 부모-자식 관계를 통해 요소를 표현

🔹 DOM 노드의 유형

  • 요소 노드, 텍스트 노드, 속성 노드 등 다양한 타입 존재

🔹 주요 DOM 조작 메서드

  • getElementById(), querySelector(), createElement(), appendChild(), removeChild() 등 활용 가능

🔹 실전 예제

  • JavaScript 이벤트를 활용한 동적 콘텐츠 추가 및 변경

📌 결론: DOM 조작은 현대 웹 개발의 필수 기술

DOM 조작은 동적인 웹 개발에서 가장 기본적이면서도 강력한 기술입니다. HTML 요소를 선택하고, 조작하고, 삭제하는 기능을 익히면 더욱 직관적이고 사용자 친화적인 인터랙티브 웹 애플리케이션을 구축할 수 있습니다.

728x90

'프로그래밍 > Javascript' 카테고리의 다른 글

웹 개발의 핵심: DOM 조작과 이벤트 처리 마스터하기 🚀  (0) 2025.02.13
자바스크립트 DOM 조작 완벽 가이드: 요소 선택과 조작 방법  (0) 2025.02.13
자바스크립트 예외 처리 완전 정복: try-catch-finally부터 사용자 정의 예외, 오류 처리 패턴까지  (0) 2025.02.13
자바스크립트 비동기 프로그래밍의 핵심: 프로미스 완전 정복 가이드  (0) 2025.02.13
자바스크립트 비동기 프로그래밍 마스터하기: 콜백부터 Promise, async/await까지  (0) 2025.02.13

'프로그래밍/Javascript'의 다른글

  • 현재글웹 개발자를 위한 DOM 조작 완벽 가이드: DOM 트리의 이해와 활용

관련글

티스토리툴바