6장: DOM 조작
DOM(Document Object Model)은 HTML 문서의 구조화된 표현이며, JavaScript를 사용하여 웹 페이지의 내용을 동적으로 변경할 수 있는 인터페이스를 제공합니다. 이 장에서는 DOM 조작의 기본 개념과 요소 선택, 요소 조작, 이벤트 처리에 대해 알아보겠습니다.
#### DOM 소개
DOM은 웹 페이지의 HTML 문서를 트리 구조로 표현한 것입니다. 이 트리 구조에서 각 요소는 노드로 표현되며, JavaScript를 사용하여 노드를 선택하고 조작할 수 있습니다.
#### 요소 선택하기
JavaScript에서는 다양한 방법으로 DOM 요소를 선택할 수 있습니다. 대표적인 방법으로 `getElementById`, `getElementsByClassName`, `getElementsByTagName`, `querySelector`, `querySelectorAll` 등이 있습니다.
- `getElementById(id)`: 주어진 ID를 가진 요소를 선택합니다.
- `getElementsByClassName(className)`: 주어진 클래스 이름을 가진 모든 요소를 선택합니다.
- `getElementsByTagName(tagName)`: 주어진 태그 이름을 가진 모든 요소를 선택합니다.
- `querySelector(selector)`: 주어진 CSS 선택자와 일치하는 첫 번째 요소를 선택합니다.
- `querySelectorAll(selector)`: 주어진 CSS 선택자와 일치하는 모든 요소를 선택합니다.
예제:
let element = document.getElementById("myElement");
let items = document.getElementsByClassName("item");
let paragraphs = document.getElementsByTagName("p");
let firstItem = document.querySelector(".item");
let allItems = document.querySelectorAll(".item");
#### 요소 조작하기
선택한 요소의 내용, 속성, 스타일 등을 변경할 수 있습니다.
##### 텍스트 내용 변경
`textContent`와 `innerHTML` 속성을 사용하여 요소의 텍스트를 변경할 수 있습니다.
element.textContent = "새 텍스트 내용";
element.innerHTML = "<strong>강조된 텍스트</strong>";
##### 속성 변경
`setAttribute`, `getAttribute`, `removeAttribute` 메서드를 사용하여 요소의 속성을 조작할 수 있습니다.
element.setAttribute("class", "active");
let className = element.getAttribute("class");
element.removeAttribute("class");
##### 스타일 변경
`style` 속성을 사용하여 요소의 스타일을 직접 변경할 수 있습니다.
element.style.color = "red";
element.style.fontSize = "20px";
##### 클래스 조작
`classList` 속성을 사용하여 요소의 클래스를 조작할 수 있습니다.
element.classList.add("new-class");
element.classList.remove("old-class");
element.classList.toggle("active");
#### 이벤트 처리
이벤트는 사용자나 브라우저가 수행하는 특정 동작을 나타냅니다. JavaScript를 사용하여 이벤트에 반응하는 코드를 작성할 수 있습니다. 대표적인 이벤트로는 `click`, `mouseover`, `mouseout`, `keydown`, `submit` 등이 있습니다.
##### 이벤트 리스너 추가
`addEventListener` 메서드를 사용하여 이벤트 리스너를 추가할 수 있습니다.
element.addEventListener("click", function() {
console.log("요소가 클릭되었습니다.");
});
##### 이벤트 객체
이벤트 리스너는 이벤트 객체를 매개변수로 받아 이벤트에 대한 다양한 정보를 제공할 수 있습니다.
element.addEventListener("click", function(event) {
console.log("클릭 위치: ", event.clientX, event.clientY);
});
##### 이벤트 전파
이벤트는 캡처링 단계와 버블링 단계를 거쳐 전파됩니다. `stopPropagation` 메서드를 사용하여 이벤트 전파를 중단할 수 있습니다.
element.addEventListener("click", function(event) {
event.stopPropagation();
console.log("이벤트 전파 중단");
});
##### 기본 동작 방지
이벤트의 기본 동작을 방지하려면 `preventDefault` 메서드를 사용합니다.
let link = document.querySelector("a");
link.addEventListener("click", function(event) {
event.preventDefault();
console.log("링크 클릭 기본 동작이 중단되었습니다.");
});
#### DOM 조작 예제
다음은 DOM 요소를 선택하고, 조작하며, 이벤트를 처리하는 예제입니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM 조작 예제</title>
</head>
<body>
<div id="content">
<p class="text">Hello, World!</p>
<button id="changeText">텍스트 변경</button>
</div>
<script>
let button = document.getElementById("changeText");
button.addEventListener("click", function() {
let paragraph = document.querySelector(".text");
paragraph.textContent = "텍스트가 변경되었습니다!";
});
</script>
</body>
</html>
위 예제에서 버튼을 클릭하면 `p` 요소의 텍스트가 변경됩니다. 이는 `getElementById`와 `querySelector`를 사용하여 요소를 선택하고, `textContent`를 사용하여 내용을 변경하는 과정을 보여줍니다.
이 장에서는 JavaScript를 사용하여 DOM을 조작하는 방법에 대해 배웠습니다. 요소 선택, 조작, 이벤트 처리 등은 동적인 웹 페이지를 만들기 위한 기본 기술입니다. 다음 장에서는 JavaScript의 고급 개념에 대해 알아보겠습니다.
댓글
댓글 쓰기