Удаление дочерних узлов узла div

Question

У меня есть следующие коды для удаления дочерних узлов узла div. Оба эти кода верны?

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

Другое это

innerWindowContentBox.innerHTML = '';

Обратите внимание, что код предназначен для скрипта Greasemonkey, поэтому поддержка IE не требуется.

Answer 1

Оба бита кода выполнят работу, но использует подход DOM (то есть while(innerWindowContentBox.hasChildNodes() ...).

Преимущества:

1. Это немного быстрее. См. это сравнение скорости на jsperf.com . В примере HTML (сотни узлов, каждый с обработчиками событий) подход DOM был в 10-20 раз быстрее (пока).

2. Избегает вредных привычек.Неверное использование innerHTML может привести к неожиданным ошибкам, особенно в коде, который нуждается в широкой поддержке браузера.По крайней мере, он уничтожает обработчики событий, которые вы можете захотеть сохранить.В данном конкретном случае это не проблема, но в какой-то момент это укусит вас, если вы привыкнете манипулировать innerHTML.

3. Методы DOM могут хирургически изменить только бит, который вынужно, где innerHTML уничтожает все дочерние узлы, что требует от браузера восстановить любой, который вы хотите сохранить.

Answer 2

Добавлен еще один тестовый пример к jsPerf тесту , опубликованному @Brock Adams. Это немного быстрее для тестирования с использованием element.firstChild (по крайней мере, в Chrome):

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

Answer 3

Оба из них должны делать примерно одно и то же в отношении пользователя и поведения вашего приложения.

Тем не менее, стоит отметить, что если вы добавляете элементы на страницу, вы должны использовать первый метод. Когда вы используете innerHTML, механизм JS может не всегда знать об изменениях DOM, и вы можете столкнуться с каким-то странным или неожиданным поведением.