gpt4 book ai didi

javascript - 循环后不保留元素自定义属性

转载 作者:行者123 更新时间:2023-12-03 10:01:04 25 4
gpt4 key购买 nike

我有一些更复杂的代码,具有奇怪的行为,我已设法在此处重现:

<!DOCTYPE html>
<html>
<body>
<div>things</div>
<div>stuff</div>
<div>other</div>
<div>misc</div>
<script>
var forEach = function (array, callback, scope) {
for (var i = 0; i < array.length; i++) {
callback.call(scope, array[i], i);
}
}
var d = document.querySelectorAll('div');
d[1].o = d[1].textContent;
forEach(d, function (el, i) {
d[1].innerHTML += '<p>div things</p> sdf d';
document.body.innerHTML += '<div>new div</div> fdsffsd fsdf';
alert(d[1].o);
});
</script>
</body>
</html>

我应该收到 4 个警报,每个警报都说“东西”。我会这样做,直到我进行硬刷新,然后进行正常刷新。然后只有第一个警报说“东西”,其他警报说“未定义”。看来添加到 div[1] 的“o”属性没有被保留。它似乎与循环中添加到 body 中的 innerHTML 有关。添加到 divinnerHTML 似乎没有问题。

我看不出问题出在哪里。此外,这似乎只发生在 Chrome (v43) 中,而不是 Firefox 中。

有什么想法吗?

最佳答案

当主体的innerHTML更新时发生这种情况的原因是整个主体的innerHTML需要重新解析。这意味着附加到任何元素的任何自定义属性都会丢失,因为这些 DOM 元素正在被重新创建。

因此,除非您确定自己知道自己在做什么,否则不应将innerHTML 与+= 运算符一起使用。

为什么它有时甚至有效是一个谜......

关于javascript - 循环后不保留元素自定义属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30597919/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com