[javascript] DOM 노드 타입과 속성 변경하기
웹 페이지의 동적 상호작용을 구현하려면 DOM(Document Object Model)의 노드 타입과 속성을 변경해야 합니다. 이 글에서는 JavaScript를 사용하여 DOM 노드의 타입과 속성을 변경하는 방법을 살펴보겠습니다.
DOM 노드 타입 변경하기
1. 요소 노드 추가하기
// 새로운 div 요소를 생성하고 id와 class 속성을 설정함
var newDiv = document.createElement("div");
newDiv.id = "new-div";
newDiv.className = "content";
2. 요소 노드 제거하기
// 기존의 div 요소를 제거함
var oldDiv = document.getElementById("old-div");
oldDiv.parentNode.removeChild(oldDiv);
DOM 속성 변경하기
1. 속성 값 변경하기
// 이미지의 속성인 src를 변경함
var image = document.getElementById("my-image");
image.src = "new-image.jpg";
2. 클래스 속성 변경하기
// 요소의 클래스 속성을 추가함
var element = document.getElementById("my-element");
element.classList.add("new-class");
이제 JavaScript를 사용하여 웹 페이지의 DOM 노드 타입과 속성을 변경하는 방법을 알아보았습니다. 이를 응용하여 다양한 동적인 웹 페이지를 구현해보세요.