JavaScript DOM 활용과 유용한 조작법

JavaScript DOM 이해하기

웹 페이지를 동적으로 조작하기 위해서는 JavaScript DOM(Document Object Model)에 대한 이해가 필수적입니다. DOM은 HTML 문서의 구조를 객체 형태로 표현하여, JavaScript를 통해 웹 페이지의 요소들을 선택하고 조작할 수 있는 기초를 제공합니다. 이는 단순 정적인 페이지를 넘어, 사용자와 상호작용하는 다양한 동적 콘텐츠를 생성하는 데 기여합니다.

DOM 요소 선택 방법

DOM에서 특정 요소를 선택하는 것은 옵션을 제어하는 첫걸음입니다. 다음은 자주 사용되는 선택 방법들입니다:

• document.getElementById("id이름"): 특정 ID를 가진 요소를 찾아냅니다.
• document.querySelector("CSS선택자"): CSS 선택자를 이용하여 원하는 요소를 검색합니다.
• document.querySelectorAll("CSS선택자"): 주어진 선택자에 해당하는 모든 요소를 가져옵니다.

예를 들어, ID가 “main-title”인 요소를 선택하는 코드는 다음과 같습니다:

const title = document.getElementById("main-title");

DOM 내용 변경하기

선택한 DOM 요소의 내용이나 구조를 수정하는 방법도 다양합니다. 다음과 같은 메서드를 활용할 수 있습니다:

• element.textContent = "새로운 내용";: 요소의 텍스트 내용 변경하기
• element.innerHTML = "변경된 내용";: HTML 구조를 바꿉니다.

아래는 텍스트 내용을 수정하는 예시입니다:

const firstParagraph = document.querySelector("p");
firstParagraph.textContent = "새로운 텍스트";

스타일 조작하기

웹 요소의 스타일을 변경하려면, 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 요소 생성 및 제거

페이지에 새로운 요소를 추가하거나 기존 요소를 삭제하는 작업도 가능합니다. 아래의 방법들을 활용해보세요:

• 새로운 요소 생성: document.createElement("태그이름")
• 부모 요소에 추가: parentElement.appendChild(새요소)
• 요소 삭제: element.remove()

예를 들어 새로운 div 요소를 추가하는 코드는 다음과 같습니다:

const newElement = document.createElement("div");
newElement.textContent = "안녕하세요!";
document.body.appendChild(newElement);

이벤트 처리 및 동적 상호작용

JavaScript를 이용한 DOM 조작은 이벤트 처리를 통해 더욱 다채로운 사용자 경험을 제공합니다. 다양한 이벤트를 감지하여 원하는 기능을 추가할 수 있습니다. 일반적인 방식은 다음과 같습니다:

• element.addEventListener("click", 함수);: 클릭 이벤트를 추가

클릭 시 알림이 뜨는 예시는 아래와 같습니다:

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

DOM 조작을 통한 실제 예시

DOM을 통해 유연하게 웹 페이지를 변화시킬 수 있습니다. 예를 들어, 사용자가 버튼을 클릭했을 때 리스트에 항목을 추가하거나 지울 수 있습니다:

const list = document.getElementById("list");
const addButton = document.getElementById("addButton");
const removeButton = document.getElementById("removeButton");
addButton.addEventListener("click", () => {
  const newItem = document.createElement("li");
  newItem.textContent = "새 항목";
  list.appendChild(newItem);
});
removeButton.addEventListener("click", () => {
  if (list.children.length > 0) {
    list.removeChild(list.lastElementChild);
  }
});

결론

JavaScript DOM 조작은 웹 페이지에서 동적인 콘텐츠를 관리하는 데 핵심적인 역할을 합니다. 요소 선택, 내용 수정, 스타일 조정, 이벤트 처리 및 요소 생성이나 제거 등을 마스터하면, 여러분의 웹 애플리케이션은 사용자의 요구와 상호작용에 맞게 변형될 수 있습니다. 앞으로는 더 심화된 DOM 조작 기법에 대해 배워보실 것을 권장합니다.

자주 찾으시는 질문 FAQ