javascript - 为什么 querySelectorAll 有时会返回实时 DOM 元素？

Question

querySelectorAll doesn't return live DOM elements.但是，除非我遗漏了什么，否则并非所有属性都是如此。

问题:我用.innerHTML 属性测试了querySelectorAll。它没有返回创建文档时出现的数字 5，而是返回了用 Javascript 插入的单词 FIVE。这是为什么？

作为控件，我使用 .length 属性测试了 querySelectorAll，它按预期返回了数字 10。

我一定是遗漏了一个关于 querySelectorAll 的关键概念，但我不确定那是什么。我的代码如下。非常感谢!

var largeContainer = document.querySelectorAll(".box_1");
		
document.getElementsByClassName("box_1")[9].className = "box_2";				
console.log(largeContainer.length);
		
document.getElementsByClassName("box_1")[5].innerHTML = "FIVE";  
console.log(largeContainer[5].innerHTML);

.box_1 {
  height: 100px;
  margin: 0 0 16px 0;
  font-size: 2rem;
  color: white;
  background-color: red;
}

.box_2 {
  height: 100px;
  margin: 0 0 16px 0;
  font-size: 2rem;
  color: white;
  background-color: blue;
}

<div class="box_1">0</div>
<div class="box_1">1</div>
<div class="box_1">2</div>
<div class="box_1">3</div>
<div class="box_1">4</div>
<div class="box_1">5</div>
<div class="box_1">6</div>
<div class="box_1">7</div>
<div class="box_1">8</div>
<div class="box_1">9</div>

Answer 1

根据 documentation ，你是正确的，它返回一个静态 NodeList即它在安装过程中选择的元素集不会改变。

但是，这些Elements在 NodeList 中是对现有 DOM 元素(事件节点)的引用。因此，对这些元素的任何更改都将反射(reflect)在后续访问中。