[JavaScript 기초 시리즈] 7일차: JavaScript로 DOM 조작하기

7. DOM 조작 기초

DOM이란 무엇인가?

DOM(Document Object Model)은 HTML 문서를 트리 구조로 나타낸 것입니다. JavaScript를 사용하면 DOM을 조작하여 웹 페이지의 콘텐츠와 구조를 동적으로 변경할 수 있습니다.

DOM 요소 선택

JavaScript에서는 다양한 방법으로 DOM 요소를 선택할 수 있습니다.

 

1. getElementById

ID 속성을 사용하여 요소를 선택합니다.

let element = document.getElementById("myElement");

 

2. getElementsByClassName

클래스 이름을 사용하여 요소를 선택합니다.

let elements = document.getElementsByClassName("myClass");

 

3. getElementsByTagName

태그 이름을 사용하여 요소를 선택합니다.

let elements = document.getElementsByTagName("div");

 

4. querySelector

CSS 선택자를 사용하여 첫 번째 일치하는 요소를 선택합니다.

let element = document.querySelector(".myClass");

 

5. querySelectorAll

CSS 선택자를 사용하여 모든 일치하는 요소를 선택합니다.

let elements = document.querySelectorAll(".myClass");

DOM 요소 조작

선택한 요소의 콘텐츠와 속성을 조작할 수 있습니다.

 

1. 텍스트 콘텐츠 변경

let element = document.getElementById("myElement");
element.textContent = "새로운 텍스트";

 

2. HTML 콘텐츠 변경

let element = document.getElementById("myElement");
element.innerHTML = "<strong>새로운 HTML</strong>";

 

3. 속성 변경

let element = document.getElementById("myElement");
element.setAttribute("class", "newClass");

 

4. 스타일 변경

let element = document.getElementById("myElement");
element.style.color = "red";
element.style.backgroundColor = "yellow";

DOM 요소 생성 및 추가

새로운 DOM 요소를 생성하고 기존 요소에 추가할 수 있습니다.

 

1. 새로운 요소 생성

let newElement = document.createElement("div");
newElement.textContent = "새로운 요소";

 

2. 요소 추가

let parentElement = document.getElementById("parent");
parentElement.appendChild(newElement);

 

이벤트 처리

DOM 요소에 이벤트를 추가하여 사용자의 상호작용을 처리할 수 있습니다.

 

1. 클릭 이벤트 추가

let button = document.getElementById("myButton");
button.addEventListener("click", function() {
  alert("버튼이 클릭되었습니다!");
});

 

2. 이벤트 제거

let button = document.getElementById("myButton");

function handleClick() {
  alert("버튼이 클릭되었습니다!");
}

button.addEventListener("click", handleClick);

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

 

이벤트 객체

이벤트 객체는 이벤트와 관련된 정보를 제공합니다.

let button = document.getElementById("myButton");
button.addEventListener("click", function(event) {
  console.log("클릭 위치: " + event.clientX + ", " + event.clientY);
});

 

결론

DOM 조작은 JavaScript를 사용하여 웹 페이지를 동적으로 변경하는 중요한 기술입니다. 요소를 선택하고 조작하는 방법, 새로운 요소를 추가하는 방법, 이벤트를 처리하는 방법을 이해하면 더욱 상호작용적인 웹 페이지를 만들 수 있습니다.

 

이로써 JavaScript 기초 시리즈를 마무리하겠습니다. 다음 시리즈인 JavaScript 심화 시리즈에서 만나요!