자바스크립트 JavaScript
13. DOM(Document Object Model)이란? (HTML과 JS 연결하기)
안녕하세요! 태마입니다.
JavaScript 기초 강좌입니다.
강좌의 경우
1. 주제 간단 정리
2. 상세 주제 정리
으로 이루어져 있습니다.
자바스크립트 JavaScript
포스팅 시작하겠습니다 :)
1. 주제 간단 정리
1. DOM(Document Object Model)이란?
DOM(Document Object Model)은 HTML 문서를 JavaScript에서 조작할 수 있도록 구조화한 객체 모델입니다.
즉, JavaScript를 사용하여 HTML 요소를 추가, 수정, 삭제할 수 있도록 돕는 인터페이스입니다.
📌 DOM을 이해하면 JavaScript로 웹 페이지를 동적으로 변경할 수 있음!
2. DOM의 기본 구조
HTML 문서는 **트리 구조(Tree Structure)**로 변환되어, 각 요소가 노드(Node)로 표현됩니다.
✅ 기본 HTML 문서
<!DOCTYPE html>
<html>
<head>
<title>DOM 예제</title>
</head>
<body>
<h1 id="title">Hello, DOM!</h1>
<p class="text">이것은 문서 객체 모델입니다.</p>
</body>
</html>✅ DOM 구조 (트리 형태)
Document
├── html
│ ├── head
│ │ └── title
│ ├── body
│ │ ├── h1 (id="title")
│ │ └── p (class="text")📌 DOM은 문서의 계층 구조를 표현하며, JavaScript를 사용해 조작할 수 있음!
3. DOM 요소 선택하기
DOM 요소를 JavaScript에서 선택하는 방법은 여러 가지가 있습니다.
메서드설명예제
| getElementById | ID로 요소 선택 | document.getElementById("title") |
| getElementsByClassName | 클래스명으로 선택 (HTMLCollection 반환) | document.getElementsByClassName("text") |
| getElementsByTagName | 태그명으로 선택 (HTMLCollection 반환) | document.getElementsByTagName("p") |
| querySelector | CSS 선택자로 첫 번째 요소 선택 | document.querySelector("#title") |
| querySelectorAll | CSS 선택자로 모든 요소 선택 (NodeList 반환) | document.querySelectorAll(".text") |
✅ 예제: querySelector로 요소 선택
const title = document.querySelector("#title");
console.log(title.textContent); // "Hello, DOM!"📌 최신 브라우저에서는 querySelector와 querySelectorAll을 사용하는 것이 더 유용함!
✅ 여기까지 DOM의 개념과 요소 선택 방법을 배웠습니다!
👉 "그렇다면, JavaScript로 DOM 요소를 어떻게 조작할 수 있을까?"
✅ 2부에서 DOM 요소 변경, 추가, 삭제 방법을 상세히 배워봅시다!
2. 상세 주제 정리
1. DOM 요소의 내용 변경하기
✅ 1) textContent와 innerHTML
const title = document.querySelector("#title");
title.textContent = "JavaScript에서 변경됨!";
title.innerHTML = "<span style='color:red'>HTML 변경됨!</span>";📌 textContent는 텍스트만 변경, innerHTML은 HTML 태그까지 변경 가능!
✅ 2) 속성 변경 (setAttribute, getAttribute)
const link = document.querySelector("a");
link.setAttribute("href", "https://www.google.com");
console.log(link.getAttribute("href")); // "https://www.google.com"📌 요소의 속성(href, src, alt, class 등)을 변경할 수 있음!
2. DOM 요소 추가 & 삭제
✅ 1) 새로운 요소 추가 (createElement, appendChild)
const newElement = document.createElement("p");
newElement.textContent = "새로운 문단 추가!";
document.body.appendChild(newElement);📌 새로운 HTML 요소를 생성하고 문서에 추가할 수 있음!
✅ 2) 요소 삭제 (remove)
const title = document.querySelector("#title");
title.remove();📌 remove()를 사용하면 해당 요소가 DOM에서 제거됨!
3. DOM 이벤트(Event) 활용하기
✅ 1) addEventListener를 사용한 이벤트 처리
const button = document.querySelector("button");
button.addEventListener("click", () => {
alert("버튼이 클릭되었습니다!");
});📌 이벤트를 감지하고, 특정 동작을 실행할 수 있음!
✅ 2) 마우스 이벤트 (mouseover, mouseout)
const title = document.querySelector("#title");
title.addEventListener("mouseover", () => {
title.style.color = "blue";
});
title.addEventListener("mouseout", () => {
title.style.color = "black";
});📌 마우스를 올리거나 벗어날 때 스타일을 변경할 수 있음!
✅ 지금까지 DOM 요소 선택, 변경, 추가, 삭제, 이벤트 활용법을 배웠습니다!
👉 "그렇다면, JavaScript의 이벤트 시스템과 버블링/캡처링 개념은 어떻게 동작할까?"
✅ 다음 회차에서 이벤트 전파(Event Propagation) 개념을 배워봅시다! 🚀
'IT Developer > JavaScript' 카테고리의 다른 글
| JavaScript 기초 <17. 모듈(Module) 시스템 (import/export, CommonJS, ESM)> (1) | 2025.03.19 |
|---|---|
| JavaScript 기초 <16. 클래스(Class)와 생성자 함수(ES6 이후 차이점 포함)> (0) | 2025.03.18 |
| JavaScript 기초 <15. JavaScript의 실행 컨텍스트와 호이스팅> (1) | 2025.03.17 |
| JavaScript 기초 <14. 이벤트(Event) 시스템과 버블링/캡처링 개념 정리> (1) | 2025.03.16 |
| JavaScript 기초 <12. 배열(Array)와 고차 함수(map, filter, reduce 등) 활용> (1) | 2025.03.14 |
| JavaScript 기초 <11. JavaScript의 객체(Object)와 프로토타입 개념> (1) | 2025.03.13 |
| JavaScript 기초 <10. this는 왜 이렇게 헷갈릴까? (실제 사례로 이해하기)> (1) | 2025.03.12 |
| JavaScript 기초 <9. ES6 이후 추가된 주요 문법 (화살표 함수, 템플릿 리터럴 등)> (1) | 2025.03.11 |