代码之家 › 专栏 › 技术社区 › Willem van der Veen

动态和静态DOM元素

dom html javascript

Willem van der Veen · 技术社区 · 6 年前

实时收藏 当DOM中的更改反映在集合中时。它是一个当情况并非如此时收集。

When is NodeList live and when is it static?

答案是 HTMLCollection 他们总是活着 NodeList

然而,情况仍然如此吗?我似乎无法复制一个静态集合。例如 document.querySelectorAll 是应该的( 来源

const elements = document.querySelectorAll('.hi');

function change() {
  document.querySelectorAll('.hi')[0].style.backgroundColor = 'red';
}

function checkvalue() {
  console.log(elements[0].style.backgroundColor);
}

<div class="hi">test</div>
<div class="hi">test</div>

<button onclick="change()">change</button>
<button onclick="checkvalue()">checkvalue</button>

在本例中,元素 节点列表 仍然会更新红色,从而更新元素 节点列表 好像还活着。

问题:

1 回复 | 直到 6 年前

T.J. Crowder 6 年前

你误解了什么是动态的/静态的:这是那是活的还是静态的,不是元素

如果您这样做:

const spans = document.getElementsByTagName("span");

后来 ,添加新的 span 对DOM来说 spans.length 将增加,因为新的跨度被添加到集合中; HTMLCollection 实例是居住 .

但如果你这么做了:

const spans = document.querySelectorAll("span");

后来 ,添加新的 跨度 对DOM来说 跨度.长度 将增加,因为新的跨度没有添加到列表中;这个 NodeList querySelectorAll 是 静止的 .

元素

例子:

const coll = document.getElementsByTagName("span");
const list = document.querySelectorAll("span");
console.log("(before) coll.length = " + coll.length);
console.log("(before) list.length = " + list.length);

console.log("Adding another span");
document.body.appendChild(
  document.createElement("span")
);
console.log("(after)  coll.length = " + coll.length);
console.log("(after)  list.length = " + list.length);

<span></span>

DOM实际上没有静态元素。如果你需要类似的东西,你可以元素,这样它们就不在DOM中了,所以您(对副本)所做的更改不会影响DOM中的元素:

const elements = Array.prototype.map.call(
    document.querySelectorAll('.hi'),
    element => element.cloneNode(true)
);

例子:

const elements = Array.prototype.map.call(
  document.querySelectorAll('.hi'),
  element => element.cloneNode(true)
);

function change() {
  document.querySelectorAll('.hi')[0].style.backgroundColor = 'red';
}

function checkvalue() {
  console.log(elements[0].style.backgroundColor);
}

<div class="hi">test</div>
<div class="hi">test</div>

<button onclick="change()">change</button>
<button onclick="checkvalue()">checkvalue</button>

推荐文章

Softly · 单选按钮未按预期取值

1 年前

NovoMannen · 导航中的下拉菜单在内容后面重叠

1 年前

Thirumal isireddy · 在导航栏顺风css中,img被扭曲,而不是将元素推到旁边

1 年前

eXor420 · 如何在脚本标记中使用导出的函数?

1 年前

Hadi · 如何在无效和有效输入中选择用于更改样式的psoudo元素(after)

1 年前

IonicMan · 剑道网格在宽度过大时不显示某些列

1 年前

Kernier · 如何将数学公式支持添加到StacksEditor?

1 年前

Md. Ibrahim · CSS网格项溢出小屏幕滚动

1 年前

Arjun V Srivatsa · 如何将系统时区信息分配给javascript中的变量?

1 年前

Akshay mek · Vscode扩展建议不适用于某些文件夹

1 年前