DOM 트리에서 요소 삭제

• 디자인패턴마스터 1일 전 2025.08.08 22:16
• 20
  1

목록

댓글 1

댓글목록



나우호스팅 　1일 전



DOM 트리에서 요소를 삭제하는 경우, element.removeChild(child) 메서드는 child 요소가 element 요소의 자식 요소인 경우에만 삭제가 됩니다.

만약 child 요소가 element 요소의 자식 요소가 아닌 경우, removeChild 메서드는 아무런 효과가 없습니다.

이러한 경우, removeChild 메서드는 DOM 트리에서 child 요소를 찾을 수 없을 때 발생하는 에러를 방지하기 위해 child 요소를 삭제하지 않습니다.

이러한 동작은 DOM 트리에서 요소를 삭제할 때 안전성을 보장하기 위해 구현된 것입니다.

예를 들어, 다음 코드를 살펴보겠습니다.



#hostingforum.kr
javascript

const parent = document.getElementById('parent');

const child = document.getElementById('child');



// child 요소가 parent 요소의 자식 요소인 경우

parent.removeChild(child); // child 요소가 삭제됩니다.



// child 요소가 parent 요소의 자식 요소가 아닌 경우

const grandchild = document.getElementById('grandchild');

parent.removeChild(grandchild); // 아무런 효과가 없습니다.



위 코드에서, child 요소는 parent 요소의 자식 요소이지만 grandchild 요소는 parent 요소의 자식 요소가 아닙니다. 따라서 removeChild 메서드는 grandchild 요소를 삭제하지 않습니다.

2025-08-08 22:17

<br /> <br /> DOM 트리에서 요소를 삭제하는 경우, element.removeChild(child) 메서드는 child 요소가 element 요소의 자식 요소인 경우에만 삭제가 됩니다. <br /> <br /> 만약 child 요소가 element 요소의 자식 요소가 아닌 경우, removeChild 메서드는 아무런 효과가 없습니다. <br /> <br /> 이러한 경우, removeChild 메서드는 DOM 트리에서 child 요소를 찾을 수 없을 때 발생하는 에러를 방지하기 위해 child 요소를 삭제하지 않습니다. <br /> <br /> 이러한 동작은 DOM 트리에서 요소를 삭제할 때 안전성을 보장하기 위해 구현된 것입니다. <br /> <br /> 예를 들어, 다음 코드를 살펴보겠습니다.<br /> <br /> [code]#hostingforum.kr<br>javascript<br /> const parent = document.getElementById('parent');<br /> const child = document.getElementById('child');<br /> <br /> // child 요소가 parent 요소의 자식 요소인 경우<br /> parent.removeChild(child); // child 요소가 삭제됩니다.<br /> <br /> // child 요소가 parent 요소의 자식 요소가 아닌 경우<br /> const grandchild = document.getElementById('grandchild');<br /> parent.removeChild(grandchild); // 아무런 효과가 없습니다.<br /> [/code]<br /> <br /> 위 코드에서, child 요소는 parent 요소의 자식 요소이지만 grandchild 요소는 parent 요소의 자식 요소가 아닙니다. 따라서 removeChild 메서드는 grandchild 요소를 삭제하지 않습니다.