자바스크립트

자바스크립트 DOM (Document Object Model) 개념과 구조, 요소 선택 추가 제거, 이벤트 처리

9월 01, 2024

7. DOM (Document Object Model)

DOM(Document Object Model)은 웹 페이지의 구조화된 표현입니다. 웹 페이지의 HTML 문서를 브라우저가 파싱한 후 트리 형태의 객체 모델로 표현한 것이 DOM입니다. 자바스크립트를 통해 DOM을 조작하면 웹 페이지의 내용을 동적으로 변경하거나 이벤트를 처리할 수 있습니다. 이 장에서는 DOM의 개념, 요소 선택, 요소 추가 및 제거, 이벤트 처리, 그리고 이벤트 리스너에 대해 알아보겠습니다.

자바스크립트 DOM


7.1 DOM의 개념과 구조

7.1.1 DOM이란?

DOM은 HTML이나 XML 문서의 프로그래밍 인터페이스입니다. DOM은 문서를 트리 구조로 표현하며, 각 요소는 노드(Node)로서 트리의 일부가 됩니다. 자바스크립트는 DOM을 통해 HTML 요소를 동적으로 수정하거나, 요소를 추가/삭제하고, 사용자와 상호작용하는 이벤트를 처리할 수 있습니다.


7.1.2 DOM 트리 구조

HTML 문서는 DOM 트리로 변환됩니다. 트리의 각 노드는 요소 노드, 텍스트 노드, 속성 노드 등으로 구성됩니다. 최상위 요소인 <html>이 트리의 루트(root)가 되고, 그 아래로 <head>, <body>, 각 HTML 요소들이 자식 노드로 연결됩니다.

html
<!DOCTYPE html>
<html>
<head>
  <title>Example</title>
</head>
<body>
  <h1>Hello, World!</h1>
  <p>This is a paragraph.</p>
</body>
</html>

위 HTML 문서는 아래와 같은 DOM 트리 구조로 표현됩니다:

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

DOM을 통해 자바스크립트로 이 트리 구조의 각 노드에 접근하여 조작할 수 있습니다.




7.2 요소 선택하기

DOM을 조작하려면 먼저 원하는 요소를 선택할 수 있어야 합니다. 자바스크립트는 DOM 요소를 선택하기 위한 다양한 메서드를 제공합니다. 가장 일반적으로 사용되는 메서드로는 getElementById, getElementsByClassName, querySelector, querySelectorAll이 있습니다.

7.2.1 getElementById

getElementById 메서드는 ID 속성을 기준으로 특정 요소를 선택합니다. ID는 문서 내에서 유일해야 하므로, 한 번에 하나의 요소만 반환합니다.

html
<h1 id="header">Hello, World!</h1>

javascript
const header = document.getElementById("header");
console.log(header.textContent);  // Hello, World!

7.2.2 getElementsByClassName

getElementsByClassName 메서드는 클래스 이름을 기준으로 요소를 선택합니다. 이 메서드는 동일한 클래스를 가진 모든 요소를 선택하여 HTMLCollection이라는 유사 배열 형태로 반환합니다.

html
<p class="text">Paragraph 1</p>
<p class="text">Paragraph 2</p>

javascript
const paragraphs = document.getElementsByClassName("text");
console.log(paragraphs.length);  // 2

7.2.3 getElementsByTagName

getElementsByTagName 메서드는 태그 이름을 기준으로 요소를 선택합니다. 이 메서드는 특정 태그를 가진 모든 요소를 선택하여 유사 배열 형태로 반환합니다.

html
<p>Paragraph 1</p>
<p>Paragraph 2</p>

javascript
const paragraphs = document.getElementsByTagName("p");
console.log(paragraphs.length);  // 2

7.2.4 querySelector

querySelector 메서드는 CSS 선택자를 사용하여 요소를 선택합니다. 첫 번째로 일치하는 하나의 요소만 반환합니다.

html
<p class="text">Paragraph 1</p>
<p class="text">Paragraph 2</p>

javascript
const firstParagraph = document.querySelector(".text");
console.log(firstParagraph.textContent);  // Paragraph 1

7.2.5 querySelectorAll

querySelectorAll 메서드는 CSS 선택자를 사용하여 일치하는 모든 요소를 선택합니다. 반환된 결과는 NodeList로, forEach 메서드를 사용할 수 있습니다.

html
<p class="text">Paragraph 1</p>
<p class="text">Paragraph 2</p>

javascript
const paragraphs = document.querySelectorAll(".text");
paragraphs.forEach(paragraph => {
  console.log(paragraph.textContent);
});
// Paragraph 1
// Paragraph 2



7.3 요소 추가 및 제거

자바스크립트를 통해 DOM에 새로운 요소를 추가하거나, 기존 요소를 제거할 수 있습니다.

7.3.1 요소 추가하기

새로운 DOM 요소를 추가하려면 먼저 요소를 생성하고, 그 요소를 DOM에 삽입해야 합니다. 이를 위해 createElement()와 appendChild() 같은 메서드를 사용합니다.

예시: 새로운 요소 추가

javascript
// 새로운 p 요소 생성
const newParagraph = document.createElement("p");
newParagraph.textContent = "This is a new paragraph.";

// body 요소에 p 요소 추가
document.body.appendChild(newParagraph);

위 코드에서는 새로운 <p> 요소를 생성하고, 이를 <body> 요소에 추가했습니다.


7.3.2 요소 제거하기

DOM에서 요소를 제거하려면 removeChild() 메서드나 remove() 메서드를 사용합니다.

예시: 요소 제거

html
<div id="container">
  <p id="text">This is a paragraph.</p>
</div>

javascript
// 특정 요소 제거
const container = document.getElementById("container");
const text = document.getElementById("text");
container.removeChild(text);  // <p> 요소가 삭제됨

또는 remove() 메서드를 사용하여 간단하게 제거할 수 있습니다.

javascript
const text = document.getElementById("text");
text.remove();  // <p> 요소가 삭제됨



7.4 이벤트 처리

이벤트는 웹 페이지에서 발생하는 사용자와의 상호작용을 처리하는 데 사용됩니다. 클릭, 입력, 마우스 이동 등의 이벤트가 발생하면, 자바스크립트로 해당 이벤트를 감지하고 처리할 수 있습니다.

7.4.1 click 이벤트

click 이벤트는 사용자가 요소를 클릭할 때 발생합니다.

html
<button id="myButton">Click me</button>

javascript
const button = document.getElementById("myButton");
button.addEventListener("click", () => {
  console.log("Button was clicked!");
});

7.4.2 hover 이벤트

mouseenter와 mouseleave 이벤트는 사용자가 요소 위에 마우스를 올리거나 벗어날 때 발생합니다.

html
<div id="hoverArea">Hover over me!</div>

javascript
const hoverArea = document.getElementById("hoverArea");

hoverArea.addEventListener("mouseenter", () => {
  console.log("Mouse entered the area!");
});

hoverArea.addEventListener("mouseleave", () => {
  console.log("Mouse left the area!");
});

7.4.3 input 이벤트

input 이벤트는 사용자가 텍스트 입력 필드에 데이터를 입력할 때 발생합니다.

html
<input type="text" id="textInput" placeholder="Type something..." />

javascript
const input = document.getElementById("textInput");

input.addEventListener("input", (event) => {
  console.log("Input value:", event.target.value);
});



7.5 이벤트 리스너 (addEventListener)

이벤트 리스너는 특정 이벤트가 발생했을 때 실행할 함수를 등록하는 방법입니다. addEventListener 메서드를 사용하여 이벤트를 처리할 수 있습니다.

7.5.1 addEventListener의 기본 사용법

addEventListener는 두 가지 인수를 받습니다:

  1. 이벤트 유형: 어떤 이벤트를 감지할지 정의합니다. 예: click, input, mouseover.
  2. 콜백 함수: 이벤트가 발생했을 때 실행할 함수입니다.
html
<button id="clickButton">Click Me</button>

javascript
const button = document.getElementById("clickButton");

button.addEventListener("click", () => {
  console.log("Button clicked!");
});

위 코드에서 click 이벤트 리스너가 등록되었고, 버튼을 클릭할 때마다 콘솔에 메시지가 출력됩니다.


7.5.2 이벤트 객체 (Event Object)

이벤트가 발생하면 브라우저는 이벤트와 관련된 정보를 담은 이벤트 객체를 생성하고, 이를 이벤트 리스너 함수에 전달합니다. 이벤트 객체는 발생한 이벤트에 대한 정보를 제공하며, 주로 event라는 이름으로 콜백 함수에서 사용됩니다.

html
<button id="myButton">Click Me</button>

javascript
const button = document.getElementById("myButton");

button.addEventListener("click", (event) => {
  console.log("Event type:", event.type);  // click
  console.log("Clicked element:", event.target);  // <button> 요소
});

위 예제에서는 event 객체를 통해 이벤트의 유형(type)과 이벤트가 발생한 대상(target)을 확인할 수 있습니다.


7.5.3 이벤트 리스너 제거

등록된 이벤트 리스너를 제거하려면 removeEventListener 메서드를 사용합니다. 이때, addEventListener에 전달한 함수와 동일한 함수를 사용해야 합니다.

html
<button id="myButton">Click Me</button>

javascript
const button = document.getElementById("myButton");

function handleClick() {
  console.log("Button clicked!");
}

// 이벤트 리스너 등록
button.addEventListener("click", handleClick);

// 이벤트 리스너 제거
button.removeEventListener("click", handleClick);


DOM 조작은 자바스크립트를 사용해 웹 페이지의 구조를 동적으로 변경하거나, 사용자와 상호작용하는 이벤트를 처리하는 데 핵심적인 역할을 합니다. 이 장에서 다룬 DOM 요소 선택, 추가 및 제거, 이벤트 처리, 그리고 이벤트 리스너는 자바스크립트로 웹 페이지를 더욱 동적으로 만들 수 있는 중요한 도구입니다. DOM을 자유롭게 다루기 위해서는 다양한 메서드와 이벤트를 잘 이해하고 활용하는 것이 필요합니다.

비밀스런체셔

작성자: 비밀스런체셔

댓글 쓰기

0 댓글