Позволяет ли присваивать innerHTML удалить HTML-поддерево?

Question

Я просто открываю этот удивительный метод элементов HTML DOM, innerHTML.

Рекомендуется ли удалять все дочерние узлы, прежде чем назначать новый контент innerHTML? Что происходит со старым поддеревом, когда я делаю новое задание?

var removeChildNodes = function(node) { 
    while (node.firstChild) { 
    node.removeChild(node.firstChild); 
    } 
}; 

var dynamicContentNode = document.getElementById('dynamic-content'); 

// Is this step important? 
removeChildNodes(dynamicContentNode); 

// (Recursively?) Populate the new subtree of HTML DOM elements 
dynamicContentNode.innerHtml = '<div><p>Oh hai</p></div>'; 

Answer 1

innerHTML полностью заменяет элементы HTML для элемента. Их просто удаляют, а мусор собирает браузер. Вам не нужно сначала удалять дочерние элементы. Поддерево исчезло.

Answer 2

Это интересно. Я предполагаю, что querySelector возвращает узел ссылка - иначе как вы могли бы использовать его для управления узлом?

Поэтому я ожидаю, что приведенный ниже код будет предупреждать «Это тест», а затем выбросить ошибку, поскольку переменная span больше не указывает на узел.

Предупреждения IE «Это тест», а затем он уведомляет пустую строку.

Все другие браузеры предупреждение «Это тест» для обоих предупреждений. Как будто сбор мусора не происходит.

Обновление: В случае, если сбор мусора удаленного узла DOM возникает, когда не было ссылок на узел, я помещаю querySelector в функцию. Если сборка мусора происходит во время простоя, я ставлю второе предупреждение внутри setTimeout. В setTimeout, переменная span по-прежнему определяется, но я удивлен, что узел он ссылается еще существует:

function test() { 
 
    var span= document.querySelector('span'); 
 
    alert(span.innerHTML); 
 
    document.querySelector('div').innerHTML= 'Bye, bye'; 
 
    setTimeout(function() { 
 
    alert(span.innerHTML); 
 
    },100); 
 
} 
 

 
test();

<div id="D"> 
 
    <span>This is a test</span> 
 
</div>