为什么getAttribute()在js给出错误:?

Question

下面是我写的代码。如果我将for循环中的代码更改为i<len-1，那么除了最后一个链接外，它的工作很好但是，如果我保持它像i><len，它不工作的任何链接。>

const allLists = document.querySelectorAll("a:link");
var len = allLists.length;
for (var i = 0; i < len; i++) {
allLists[i].addEventListener("click", function (e) {
e.preventDefault();
const href = allLists[i].getAttribute("href");
console.log(href);
if (href == "#") {
window.scrollTo({
top: 0,
behavior: "smooth",
});
}
});
}

错误:script.js:33 Uncaught TypeError:无法读取未定义的属性(读取'getAttribute')在HTMLAnchorElement。

Answer 1

因为i变量被len循环后

然后，每次调用click事件时，要运行的代码将始终是:

const href = allLists[len].getAttribute("href");

这个问题是closure问题你可以在这里看到更多

修改后的代码如下:(将var更改为let)

const allLists = document.querySelectorAll("a:link");
var len = allLists.length;
for (let i = 0; i < len; i++) {
allLists[i].addEventListener("click", function (e) {
e.preventDefault();
const href = allLists[i].getAttribute("href");
console.log(href);
if (href == "#") {
window.scrollTo({
top: 0,
behavior: "smooth",
});
}
});
}

<a href="1">1</a>
<a href="2">2</a>
<a href="3">3</a>
<a href="4">4</a>

Answer 2

正如Mozilla开发人员文档中所述，" querySelectorAll()的行为与大多数常见的JavaScript DOM库不同，这可能导致意想不到的结果。"

所以我建议遵循文档并编写一个' forEach '循环而不是' for '循环。