[JavaScript] 문서 객체 모델(DOM)

목차

자바스크립트와 문서 객체 모델(DOM): 웹 페이지의 마법사 🌟

안녕하세요, 여러분! 오늘은 자바스크립트의 핵심 요소 중 하나인 '문서 객체 모델(DOM)'에 대해 살펴보려고 합니다. 웹 페이지의 모든 요소를 조작하고 변경하는 마법사와 같은 존재인 DOM을 함께 이해해보시죠!

 

1. 📜 문서 객체 모델(DOM)이란?

DOM은 Document Object Model의 약자로, 웹 페이지의 구성 요소를 객체로 모델링한 것입니다. 웹 페이지에 나타나는 모든 요소(HTML 태그, 스타일, 내용)가 객체로 표현되며, 이를 통해 자바스크립트는 웹 페이지의 구조, 스타일, 내용을 동적으로 조작할 수 있습니다.

 

2. 🌲 DOM의 계층 구조

DOM은 계층적 트리 구조로 표현됩니다. 웹 페이지의 모든 요소가 노드(Node)로 표현되며, 이 노드들이 부모-자식 관계를 통해 트리 구조를 형성합니다.

• Document Node: 문서 전체를 나타내며, DOM 트리의 루트 노드입니다.
• Element Node: HTML 태그를 나타내는 노드입니다.
• Text Node: 텍스트 내용을 담고 있는 노드입니다.
• Attribute Node: 속성을 나타내는 노드입니다(HTML5에서는 더 이상 사용되지 않음).

 

3. 🤹‍♀️ DOM 조작

자바스크립트를 통해 DOM 요소를 찾고, 변경하고, 새로운 요소를 추가하거나 삭제할 수 있습니다.

찾기

• getElementById():
• 예시: ID가 "header"인 요소 찾기

var headerElement = document.getElementById("header");

• getElementsByClassName():
• 예시: 클래스가 "button"인 모든 요소 찾기

var buttons = document.getElementsByClassName("button");

• getElementsByTagName():
• 예시: 모든 <p> 태그 찾기

var paragraphs = document.getElementsByTagName("p");

• querySelector():
• 예시: ".container" 클래스 안의 첫 번째 ".item" 클래스 요소 찾기

var firstItem = document.querySelector(".container > .item");

• querySelectorAll():
• 예시: 모든 "div" 태그 내의 "p" 태그 찾기

var divParagraphs = document.querySelectorAll("div > p");

 

변경

• innerHTML:
• 예시: ID가 "content"인 요소의 HTML 내용 변경

document.getElementById("content").innerHTML = "<h2>새로운 제목</h2>";

• textContent:
• 예시: ID가 "description"인 요소의 텍스트 내용 변경

document.getElementById("description").textContent = "이것은 설명입니다.";

• style:
• 예시: ID가 "box"인 요소의 배경색 변경

document.getElementById("box").style.backgroundColor = "blue";

 

추가 및 삭제

• appendChild():
• 예시: 새로운 요소를 body에 추가

var newElement = document.createElement("div"); document.body.appendChild(newElement);

• removeChild():
• 예시: ID가 "container"인 요소에서 특정 자식 요소 제거

var parent = document.getElementById("container"); parent.removeChild(childElement);

• createElement():
• 예시: 새로운 div 요소 생성

var newDiv = document.createElement("div");

• createTextNode():
• 예시: 새로운 텍스트 노드 생성

var newText = document.createTextNode("안녕하세요!");

 

4. 💡 활용 예시

// ID가 'welcome'인 요소의 텍스트 변경하기
document.getElementById("welcome").textContent = "안녕하세요!";

// 새로운 요소 생성 및 추가하기
let newElement = document.createElement("p");
newElement.textContent = "이것은 새로운 문단입니다.";
document.body.appendChild(newElement);

 

🌈 마치며...

자바스크립트의 DOM은 웹 페이지를 동적이고 상호작용이 풍부한 공간으로 변모시키는 핵심 요소입니다. DOM을 이해하고 잘 활용한다면 웹 페이지에 생동감을 불어넣는 데 큰 도움이 될 것입니다.

---

💡 팁: DOM 조작은 웹 페이지의 성능에 영푑을 미칠 수 있으니 효율적인 조작을 고민해보세요.

---

💻 Happy Coding! 💻

---

Reference:

Document Object Model (DOM) - Web APIs | MDN

JavaScript HTML DOM

---