我应该使用什么函数在JavaScript中遍历节点列表?

Question

const navLinks = document.querySelectorAll(".nav-link");
navLinks.forEach((link) => {
link.addEventListener("click", (e) => {
console.log(e.target.classList);
return e.target.classList.toggle("active");
});
});

当我退出classlist时，我得到一个包含navLink类的所有元素的列表，而不是被单击的那个。我有一种感觉，它是我使用的每个函数的。我如何得到正确的分类，如在点击链接?现在，当我退出，我得到类在所有的navlink元素

Answer 1

1. 使用stopPropagation来阻止事件的进一步传播

2. classList是ArrayLike对象，实际上不是数组。但是它可以转换为Array。

const navLinks = document.querySelectorAll(".nav-link");
navLinks.forEach((link) => {
link.addEventListener("click", (e) => {
e.stopPropagation(); // prevents further propagation of the current event in the capturing and bubbling phases
console.log('Array: ', Array.from(e.target.classList));
console.log('ArrayLike: ', e.target.classList);
return e.target.classList.toggle("active");
});
});

.nav-link {
width: 150px;
height: 50px;
border: 1px solid gray;
}

<div class="nav-link 1-item"></div>
<div class="nav-link 2-item"></div>
<div class="nav-link 3-item"></div>
<div class="nav-link 4-item"></div>