div 노드의 자식 노드 삭제

Question

다음 코드는 div 노드의 자식 노드를 제거합니다. 이 두 코드가 모두 맞습니까? 다른

while(innerWindowContentBox.hasChildNodes())  
innerWindowContentBox.removeChild(innerWindowContentBox.childNodes[0]); 

는 IE의 지원이 필요하지 않도록 코드가 그리스 몽키 스크립트입니다

innerWindowContentBox.innerHTML = ''; 

주입니다.

Answer 1

두 가지 모두 사용자가가는 한 대략적으로 앱의 동작이 진행될 때까지해야합니다.

그러나 페이지에 개의 요소를 추가하는 경우 이전 방법을 사용해야합니다. innerHTML을 사용하면 JS 엔진이 DOM 변경 사항을 항상 인식하지 못할 수 있으며 이상하거나 예기치 않은 동작이 발생할 수 있습니다.

Answer 2

두 코드 모두 작업이 완료되지만 은 DOM 접근 방식 (즉 while(innerWindowContentBox.hasChildNodes() ...)을 사용합니다.

장점 :

1. 그것은 꽤 빠릅니다. this speed comparison at jsperf.com을 참조하십시오. 샘플 HTML (수백 개의 노드, 이벤트 핸들러가있는 노드)에서 DOM 접근 방식은 10-20 배 빨라졌습니다 (지금까지).

2. 나쁜 습관을 피할 수 있습니다. innerHTML을 사용하면 예기치 않은 버그가 발생할 수 있습니다. 특히 광범위한 브라우저를 지원해야하는 코드의 경우 특히 그렇습니다. 최소한, 보존하고 싶은 이벤트 핸들러는 파괴됩니다. 이 특별한 경우에는 문제가되지 않지만, innerHTML 습관을 들으면 어느 시점에 당신을 물 것입니다.

3. DOM 메서드는 외과 적으로 필요한 비트 만 변경할 수 있습니다. 여기에서 innerHTML은 모든 자식 노드를 파괴하므로 브라우저에서 보존하려는 모든 노드를 재구성해야합니다.

Answer 3

@Brock Adams가 게시 한 jsPerf benchmark에 다른 테스트 케이스가 추가되었습니다. element.firstChild (적어도 Chrome에서는)을 사용하여 테스트하는 것이 약간 빠릅니다.

while (containerNode.firstChild) { 
    containerNode.removeChild (containerNode.childNodes[0]); 
}