Question

（使用纯javascript）我如何将事件连接到某个标签或某个类的所有元素？使用＆＃34; querySelector＆＃34;，他们只选择一个项目（第一个），同时使用＆＃34; getElementByTagName＆＃34;或＆＃34; getElementByClassName＆＃34;不是我没有选择（我在控制台中显示错误）。

非常感谢。

＆＃13;

//byCssSelector - CLASS
document.querySelector(".myClass").addEventListener("click", function() { alert("ok"); });
// byCssSelector - TAG
document.querySelector("section").addEventListener("click", function() { alert("ok"); });

//byClass
document.getElementByClassName("myClass2").addEventListener("click", function() { alert("ok"); });
//byTag
document.getElementByTagName("div").addEventListener("click", function() { alert("ok"); });

＆＃13;

<br><b>querySelector:</b><br>
<p class="myClass">1) querySelector(".class")</p>
<section>2) querySelector("[tag]")</section>
<br><b>Tag/Class-name:</b><br>
<span class="myClass2">3) getElementByTagName</span>
<div>4) getElementByClassName</div>

＆＃13;

Answer 1

querySelector仅返回它找到的第一个元素。您应该使用querySelectorAll，它返回与标记匹配的元素列表。然后，您可以使用forEach来遍历元素并将侦听器附加到每个元素。

document.querySelectorAll('.myClass').forEach(function (el) {
  el.addEventListener('click', function() {
    alert('ok');
  });
});

NodeList.forEach是一项新功能，并非所有浏览器都支持。您可以查看兼容性here。如果您希望支持它们，则必须使用for循环或将nodeList转换为array。

您可以使用[].slice.call。如果您使用的是ES6/ES2015，您甚至可以查看Array.from

Answer 2

使用“getElementByTagName”或“getElementByClassName”而不是我选择无（我在控制台中显示错误）。

有2个错误

应该是 getElementsByTagName ，而不是 getElementByTagName
getElementsByTagName 返回节点的实时集合，而不是单个元素。

成功

var x = Array.prototype.slice.call(document.getElementByClassName("myClass2"));
x.forEach( function(el){
  el.addEventListener("click", function() { alert("ok"); });
});

Answer 3

.querySelector，根据MDN，

返回文档中与指定的选择器组匹配的第一个元素。

var divs = document.querySelector('.content');
console.log(divs)

<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>

您要找的是.querySelectorAll。

返回与指定的选择器组匹配的文档中的元素列表（使用文档节点的深度优先预先遍历遍历）。返回的对象是NodeList。

var divs = document.querySelectorAll('.content');
console.log(divs)

<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">4</div>

获得列表后，您可以参考以下指向loop over nodeList

的链接

有用的参考：querySelector and querySelectorAll vs getElementsByClassName and getElementById

将事件连接到某个标记或某个类的所有html元素

3 个答案: