웹 페이지의 DOM(Document Object Model) 트리를 동적으로 변경하는 것은 JavaScript를 사용하여 웹 애플리케이션을 개발하는 중요한 부분입니다. DOM을 변경하여 새로운 콘텐츠를 추가하거나 기존 요소를 업데이트하고 제거할 수 있습니다.

DOM API를 사용하여 요소 추가하기

새로운 요소를 DOM에 추가하기 위해서는 document.createElement() 함수를 사용하여 새 요소를 만든 다음, appendChild()나 insertBefore()를 사용하여 새 요소를 기존 DOM 요소에 추가할 수 있습니다.

// 새로운 div 요소 생성
var newDiv = document.createElement('div');

// 기존 요소에 새로운 div 추가
var existingElement = document.getElementById('existing');
existingElement.appendChild(newDiv);

DOM 요소 수정하기

기존 DOM 요소를 수정하기 위해서는 innerHTML 속성을 사용하여 해당 요소의 내부 HTML을 변경하거나, setAttribute()를 사용하여 요소의 속성을 변경할 수 있습니다.

// id가 "myElement"인 요소의 내부 HTML을 변경
var myElement = document.getElementById('myElement');
myElement.innerHTML = '<p>새로운 내용</p>';

// id가 "myLink"인 링크의 href 속성을 변경
var myLink = document.getElementById('myLink');
myLink.setAttribute('href', 'https://www.example.com');

DOM에서 요소 제거하기

DOM에서 요소를 제거하기 위해서는 removeChild() 함수를 사용하여 요소를 해당 부모 요소로부터 제거할 수 있습니다.

// id가 "oldDiv"인 div 요소를 제거
var oldDiv = document.getElementById('oldDiv');
oldDiv.parentNode.removeChild(oldDiv);

DOM을 변경함으로써 사용자 상호작용을 개선하거나 동적 콘텐츠를 효과적으로 관리할 수 있습니다.

위 내용은 JavaScript를 사용하여 DOM을 변경하는 간단한 방법을 설명한 것이며, 더 많은 기능과 세부 사항을 확인하려면 MDN web docs를 참조하세요.