querySelectorAll无法正常工作

Question

我有一个要求,我必须.div在容器中拾取最后一个并应用一些业务逻辑.选择最后一个.div必须是动态的,因为用户可以选择添加/删除.div元素.

最初我尝试过,querySelectorAll但似乎没有用.所以我决定改变它,getElementsByClassName并且令人惊讶的是它使用了相同的逻辑.有人可以帮助我解释为什么remove_div在第二个(remove_div_2)的情况下不起作用的原因？

注意:我不是在寻找问题的修复/解决方案,因为我已经开始使用第二个选项.我只想知道选项的原因querySelectorAll不起作用.

以下是我的代码:

HTML:

<div id='container'>
    <div id='div1' class='div'>This is Div 1</div>
    <div id='div2' class='div'>This is Div 2</div>
    <div id='div3' class='div'>This is Div 3</div>
</div>
<button type='button' id='append_div'>Append Div</button>
<button type='button' id='remove_div'>Remove Div</button>
<button type='button' id='remove_div_2'>Remove Div 2</button>

JavaScript的:

window.onload = function () {
    var elementToStyle = document.querySelectorAll("#container .div");
    elementToStyle[elementToStyle.length - 1].classList.add('red');

    document.getElementById('append_div').onclick = function () {
       var divToInsert = document.createElement('div');
       divToInsert.id = 'new_div';
       divToInsert.className = 'div';
       divToInsert.innerHTML = 'This is an appended div';
       document.getElementById('container').appendChild(divToInsert);
       var elToStyle = document.querySelectorAll("#container .div");
       for (i = 0; i < elToStyle.length; i++)
           elToStyle[i].classList.remove('red');
           elToStyle[elToStyle.length - 1].classList.add('red');
       };

       document.getElementById('remove_div').onclick = function () {
           var elToStyle = document.querySelectorAll("#container .div");
           document.getElementById('container').removeChild(elToStyle[elToStyle.length - 1]);
           elToStyle[elToStyle.length - 1].classList.add('red');
       };

       document.getElementById('remove_div_2').onclick = function () {
           var elToStyle = document.getElementsByClassName('div');
           document.getElementById('container').removeChild(elToStyle[elToStyle.length - 1]);
           elToStyle[elToStyle.length - 1].classList.add('red');
       };
   }

Answer 1

原因是因为querySelectorAll方法返回静态列表.querySelectorAll使用后对文档所做的任何更改(如removeChild本例所示)都不会反映在返回的节点列表中.因此elToStyle[elToStyle.length - 1]仍然会指向被删除的节点.

而getElementsByClassName另一方面,返回节点的实时列表.这意味着无论在准备好节点列表之后是​​否对文档进行了任何更改,它elToStyle[elToStyle.length - 1]总是指向最后一个.div.

以下是此处提供的官方文档摘录

querySelectorAll()方法返回的NodeList对象必须是静态的,而不是实时的([DOM-LEVEL-3-CORE],第1.1.1节).对底层文档结构的后续更改不得反映在NodeList对象中.这意味着该对象将包含一个匹配的Element节点列表,这些节点在创建列表时位于文档中.

注意:您可以通过在console.log(elToStyle);之前和之后执行此操作来查看此内容removeChild.