JavaScript의 노드에서 하위 요소를 효율적으로 제거하는 방법은 무엇입니까?

JavaScript DOM에서 하위 요소 제거

JavaScript에서 DOM 작업을 수행할 때 특정 노드에서 하위 요소를 제거해야 하는 시나리오가 발생할 수 있습니다. 이 가이드에서는 이 작업을 해결하기 위한 다양한 접근 방식을 탐색합니다.

방법 1: innerHTML 지우기

한 가지 간단한 방법은 상위 노드의 innerHTML 속성을 빈 문자열로 설정하는 것입니다. 이 접근 방식은 간단하지만 브라우저의 HTML 파서를 트리거하므로 고성능 애플리케이션에는 적합하지 않을 수 있습니다.

const myNode = document.getElementById("foo");
myNode.innerHTML = "";

HTML 예:

<div>
<h3 id="방법-모든-하위-노드를-개별적으로-제거합니다">방법 2: 모든 하위 노드를 개별적으로 제거합니다. </h3>
<p>보다 세부적인 접근 방식은 RemoveChild()를 사용하여 각 하위 노드를 개별적으로 제거하는 것입니다. method.</p>
<pre class="brush:php;toolbar:false">const myNode = document.getElementById("foo");
while (myNode.hasChildNodes()) {
  myNode.removeChild(myNode.lastChild);
}

방법 3: QuerySelectorAll()을 사용하는 결합된 접근 방식

제거하려는 특정 하위 요소를 알고 있는 경우, 제거할 특정 하위 요소를 알고 있는 경우에는 RemoveChild()와 querySelectorAll()을 결합하여 대상을 지정할 수 있습니다. 더욱 효율적으로 제거할 수 있습니다.

const myNode = document.getElementById("foo");
const childElements = myNode.querySelectorAll("span, div");
childElements.forEach((element) => {
  myNode.removeChild(element);
});