Почему стили не могут быть удалены в прямом порядке?

Question

Я изменил вопрос/ответ в сообщении SO ниже, чтобы удалить стили в прямом порядке.

Вопрос/ответ удаляет скрипты в обратном порядке.

Это не сработало. Однако, если я изменил его на обратный порядок, все сработало.

Мое предположение, что если вы удалите style[0], то style[1] немедленно обновится, чтобы стать стилем [0], в примере w/only two styles. Следовательно, цикл не сработает.

Это правильно?

Обновлен ли массив стилей сразу же после его изменения?

Reference Post

var scripts = document.getElementsByTagName("script"); 
for (var i=scripts.length; i--;){ 
    (scripts[i]).parentNode.removeChild(scripts[i]); 
} 

Answer 1

Ваше предположение верно; getElementsByTagName возвращает live «массив» (который на самом деле не массив, а скорее NodeList или HTMLCollection, в зависимости от браузера и версии), который отражает последующие обновления DOM.

Таким образом, вы можете написать:

var styles = document.getElementsByTagName("style"); 
while (styles.length) { 
    styles[0].parentNode.removeChild(styles[0]); 
} 

Тем не менее, нет никаких оснований предпочесть этот путь. Поскольку JavaScript выполняется в том же потоке, который рисует пользовательский интерфейс, результат удаления стилей не будет действовать до тех пор, пока цикл не будет завершен, поэтому порядок не имеет для вас значения.

Полезные ссылки MDN:

• element.getElementsByTagName
• NodeList
• HTMLCollection

Answer 2

От https://developer.mozilla.org/en-US/docs/Web/API/element.getElementsByTagName:

элементы живой NodeList (но см. примечание ниже) найденных элементов в том порядке, в котором они появляются в поддереве. Если элементы не найдены, NodeList пуст.

Таким образом, как только вы удаляете элементы [0], элементы [0] заполняются элементами [1], таким образом удаляя элементы [1] (если не были элементы [2]).

Вы можете сделать это в «нормальном» порядке, как это (хотя это не так, как производительный из-за повторяющегося испытания scripts.length):

var scripts = document.getElementsByTagName("script"); 
while (scripts.length) { 
    (scripts[0]).parentNode.removeChild(scripts[0]); 
}