javascript - 获取 document.getElementsByClassName 的子类

Question

所以，我有这个 html 代码:

<div class='class1' id='example'>
  <span class='class2'>Some text</span>
  <span class='class3'>Some text 2</span>
 </div>

我想获取每个 class1，然后在 class2 和 class3 上添加一个事件监听器(单击)(并且我需要该 id 从 PHP 文件中获取一些信息)。我尝试过这样的事情:

var yes = document.getElementsByClassName('class1');
for (var i=0 ; i<yes.length;i++)
  yes[i].getElementsByClassName('class2').addEventListener('click',redirectfunction,false);

它不工作。我能做什么？!

Answer 1

您可能最好使用querySelectorAll，因为它比getElementsByClassName(IE 8+)拥有更广泛的支持，并且您可以一次性获取元素:

var yes = document.querySelectorAll('.class1 > .class2, .class1 > .class3');

querySelectorAll返回一个静态NodeList，因此迭代返回的对象以访问成员。

但是，请准备好为旧版浏览器提供后备方案。