javascript - 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)都不会反射(reflect)在返回的节点列表中。因此 elToStyle[elToStyle.length - 1] 仍将指向已删除的节点。

然而，另一方面，getElementsByClassName 返回一个事件的节点列表。这意味着 elToStyle[elToStyle.length - 1] 将始终指向最后一个 .div 而不管在准备节点列表后是否对文档进行了任何更改.

以下是可用官方文档的摘录 here

The NodeList object returned by the querySelectorAll() method must be static, not live ([DOM-LEVEL-3-CORE], section 1.1.1). Subsequent changes to the structure of the underlying document must not be reflected in the NodeList object. This means that the object will instead contain a list of matching Element nodes that were in the document at the time the list was created.

注意:您可以通过在 removeChild 之前和之后执行 console.log(elToStyle); 来查看这一点。