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); // 이벤트 제거