Programming Language/Javascript
[자바스크립트] DOM과 이벤트
ggyongi
2025. 1. 5. 01:08
반응형
DOM이란
- 웹 페이지를 트리 구조로 표현한 객체 모델
- 브라우저는 HTML 문서를 파싱하여 DOM을 생성하고, 자바스크립트는 DOM을 통해 웹 페이지의 구조와 내용을 조작함
DOM의 구조
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1 id="title">Hello, DOM!</h1>
<p class="text">This is a paragraph.</p>
</body>
</html>
Document
├── <html>
├── <head>
│ └── <title>
└── <body>
├── <h1 id="title">
└── <p class="text">
- Document: DOM 트리의 최상위 객체
- 각 HTML 요소(<html>, <body>, <h1> 등)을 노드로 표현
- JavaScript를 통해 이 노드들을 조작
DOM 조작 메서드
- getElementById: 특정 id를 가진 요소를 찾는다.
const title = document.getElementById("title");
console.log(title.textContent); // "Hello, DOM!"
title.textContent = "Updated Title"; // 텍스트 변경
- querySelector: CSS 선택자를 사용하여 요소를 찾는다.
const paragraph = document.querySelector(".text"); // 클래스가 text인 첫 번째 요소
console.log(paragraph.textContent); // "This is a paragraph."
- querySelectorAll: 지정된 CSS 선택자에 해당하는 모든 요소를 NodeList로 반환합니다.
const elements = document.querySelectorAll("p"); // 모든 <p> 요소를 선택
elements.forEach((el) => console.log(el.textContent));
이벤트란?
- 이벤트는 사용자가 웹 페이지와 상호작용할 때 발생하는 작업(예: 클릭, 입력, 스크롤 등)을 의미
- JavaScript는 이벤트를 감지하고 처리
이벤트 등록: addEventListener 사용
const button = document.querySelector("button");
button.addEventListener("click", () => {
alert("Button clicked!");
});
이벤트 제거: removeEventListener로 등록된 이벤트 리스너를 제거
function handleClick() {
alert("Button clicked!");
}
button.addEventListener("click", handleClick);
button.removeEventListener("click", handleClick); // 이벤트 제거