JavaScript DOM 조작: 페이지 구조를 자유롭게 다루는 방법

DOM이란 무엇인가?

DOM(Document Object Model)이란 웹 브라우저가 HTML 문서를 해석한 뒤 생성하는 구조체입니다. 이 구조는 계층적인 형태를 가지고 있으며, JavaScript를 이용해 특정 요소를 선택하고 수정할 수 있습니다. 이를 통해 사용자는 단순한 정적인 문서가 아닌, 동적인 페이지 경험을 제공할 수 있습니다.

DOM 요소 선택 방법

요소를 선택하는 것은 구조 변경의 첫 단계입니다. 주로 사용하는 메서드는 다음과 같습니다.
• document.getElementById("id이름"): 특정 ID를 가진 단일 요소 찾기
• document.querySelector("CSS선택자"): CSS 선택자를 이용한 요소 탐색
• document.querySelectorAll("CSS선택자"): 해당하는 모든 요소를 NodeList로 반환

예제: 요소 선택

// ID 선택
const title = document.getElementById("main-title");

// 클래스 선택
const items = document.querySelectorAll(".list-item");

// 태그 선택
const firstParagraph = document.querySelector("p");

DOM 내용 변경하기

선택한 요소의 텍스트나 HTML 구조를 변경할 수 있습니다.
• element.textContent = "새로운 내용";
• element.innerHTML = "<strong>굵게 표시</strong>";

예제: 텍스트 및 HTML 변경

// ID 선택
const title = document.getElementById("main-title");

// 클래스 선택
const items = document.querySelectorAll(".list-item");

// 태그 선택
const firstParagraph = document.querySelector("p");

DOM 스타일 조작하기

직접 스타일을 바꾸거나, CSS 클래스를 추가·제거하여 디자인을 동적으로 변경할 수 있습니다.
• element.style.color = "blue";
• element.classList.add("active");
• element.classList.remove("hidden");

예제: 스타일 변경

const box = document.querySelector(".box");
box.style.backgroundColor = "lightgreen";
box.classList.add("highlight");

DOM 요소 생성 및 제거

새로운 HTML 요소를 만들거나, 기존 요소를 페이지에서 제거할 수도 있습니다.
• 새 요소 만들기: document.createElement("태그이름")
• 부모 요소에 삽입: parentElement.appendChild(새요소)
• 요소 제거: element.remove()

예제: 새로운 요소 추가

const box = document.querySelector(".box");
box.style.backgroundColor = "lightgreen";
box.classList.add("highlight");

예제: 요소 제거

const oldItem = document.querySelector(".old");
oldItem.remove();

이벤트 처리로 동적 상호작용 구현

클릭, 키보드 입력, 마우스 이동 등 다양한 이벤트를 감지해 원하는 동작을 수행할 수 있습니다.
• element.addEventListener("click", 함수);

예제: 클릭 이벤트 추가

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

DOM 조작을 통한 실용 예시

예를 들어, 사용자 입력에 따라 글자를 실시간 변환하거나, 버튼 클릭으로 추가 정보 영역을 표시할 수 있습니다. 이러한 동적인 변화는 단순한 정적 페이지를 넘어 개인화된 사용자 경험을 제공합니다.

DOM을 효율적으로 다루면 웹페이지를 사용자 의도에 따라 유연하게 변화시킬 수 있습니다. 요소 선택, 내용 수정, 스타일 변경, 새로운 태그 추가, 이벤트 핸들링 등을 차근차근 익히면 더욱 풍부한 대화형 콘텐츠를 구현할 수 있습니다.