Question

为什么向document.querySelector('li')添加事件可以正常工作，但是将事件添加到document.getElementsByTagName('li').childNodes 导致错误以及如何克服此问题并将事件附加到所有人它的子节点成功，我知道使用childNodes创建一个数组，但我们如何添加它。我应该使用for循环吗？

Answer 1

您可以将事件添加到元素，但不能添加到集合。

您可以从元素访问childNodes但不能访问集合。请注意，childNodes可能包含不支持事件处理程序的文本节点。

你想要的是 document.querySelectorAll() ，它会根据CSS selector创建一系列元素。

您可以使用for循环遍历集合，并在此过程中添加事件侦听器：

var nodes= document.querySelectorAll('li > *');

for(var i = 0 ; i < nodes.length ; i++) {
  nodes[i].addEventListener('click', function() {
    alert('You clicked ' + this.textContent);
  });
}

li * {background: orange;}

<ul>
  <li>Lorem <em>ipsum</em> dolor <strong>sit</strong> amet</li>
  <li>Consectetur <em>adipiscing</em> elit</li>
  <li>beatae <em>vitae</em> dicta <strong>sunt</strong></li>
</ul>

Answer 2

for(var element : document.getElementsByTagName('li')) {
  Event.observe(element, "click", function(){...});
}

为所有子节点添加事件

2 个答案: