Question

querySelectorAll doesn't return live DOM elements.但是，除非我遗漏了某些内容，否则所有属性都不是。

问题：我使用querySelectorAll属性测试了.innerHTML。而不是返回创建文档时存在的数字5，而是返回使用Javascript插入的单词FIVE。这是为什么？

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

我必须错过关于querySelectorAll的关键概念，但我不确定那是什么。我的代码如下。非常感谢！

＆＃13;

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);

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 1

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

但是，NodeList中的这些Elements是对现有DOM元素（活动节点）的引用。因此，对这些元素的任何更改都将反映在后续访问中。

Answer 2

好吧，var largeContainer = document.querySelectorAll(".box_1");选择类box_1的所有DOM元素。如果您稍后更改了类，largeContainer仍然指的是那些DOM元素，而不是曾经用于获取它们的选择器。

Answer 3

而不是返回文档中存在的数字5 创建它返回插入的五个字的JavaScript。这是为什么？

问题中的代码获取

元素的.innerHTML

console.log(largeContainer[5].innerHTML);

在

的元素处设置.innerHTML后

document.getElementsByClassName("box_1")[5].innerHTML = "FIVE";

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

3 个答案: