javascript - 在列表中存储链接变量的纯 JavaScript 方法

Question

我无法编辑 HTML，但我想在列表项中存储 anchor 的变量，以便我可以创建 onclick 事件。

目前似乎没有任何效果，我假设可能是 querySelectorAll 使用不正确。感谢帮助。

//set the link class on nav items
var link = document.querySelectorAll('.nodiv a');

console.log(link);

link.onclick = function(e) {
	e.preventDefault();
	alert("clicked!");
}

<ul>
	<li class="nodiv"><a href="#">Link</a></li>
	<li class="nodiv"><a href="#">Link</a></li>
	<li class="nodiv"><a href="#">Link</a></li>
	<li class="nodiv"><a href="#">Link</a></li>
</ul>

Answer 1

querySelectorAll返回一个节点列表，因此您必须循环遍历该列表才能获取实际节点。

//set the link class on nav items
var link = document.querySelectorAll('.nodiv a');

console.log(link);

for (var i = 0; i < link.length; i++) {
    link[i].onclick = function (e) {
        e.preventDefault();
        alert('clicked!');
    }
}

<ul>
	<li class="nodiv"><a href="#">Link</a></li>
	<li class="nodiv"><a href="#">Link</a></li>
	<li class="nodiv"><a href="#">Link</a></li>
	<li class="nodiv"><a href="#">Link</a></li>
</ul>