document.getElementsByClassName（" sth"）与document.querySelectorAll（" #id标记名"） [英] document.getElementsByClassName("sth") vs document.querySelectorAll("#id tagname")

问题描述

给出以下HTML：

 < ul id =menu-mobile> 
< li class =menu>< a href =＃>连结1< / a>< / li> 
< li class =menu>< a href =＃>连结2< / a>< / li> 
< li class =menu>< a href =＃>连结3< / a>< / li> 
< / ul> 
  

如何定位所有< li> 在最好的方法？是通过使用类名还是通过id与 querySelectorAll（）？

  var menuLink = document.querySelectorAll（'＃menu-mobile li'）; 
 for（var i = 0; i< menuLink.children.length; i ++）{
 var childElement = menuLink.children [i]; 
 childElement.addEventListener（'click'，doSomething，false）; 
 
 
函数doSomething（）{
 alert（Hello）; 
} 
  

和

  var menuLink = document.getElementsByClassName（'menu'）; 
 for（var i = 0; i< menuLink.children.length; i ++）{
 var childElement = menuLink.children [i]; 
 childElement.addEventListener（'click'，doSomething，false）; 
 
 
函数doSomething（）{
 alert（Hello）; 
} 
  

都可以工作。

感谢

解决方案

querySelectorAll 并不要求您阻止通过向列表中的每个元素添加一个类来标记（并且由IE8支持）。

Given the following HTML:

   <ul id="menu-mobile" >
            <li class="menu"><a href="#">Link 1</a></li>
            <li class="menu"><a href="#">Link 2</a></li>
            <li class="menu"><a href="#">Link 3</a></li>
   </ul>

How to target all the <li>s in the best approach? is it by using the class name or by the id with querySelectorAll()?

var menuLink = document.querySelectorAll( '#menu-mobile li' );    
for (var i = 0; i < menuLink.children.length; i++) {
var childElement = menuLink.children[i];
childElement.addEventListener('click', doSomething, false);
}

function doSomething() {
    alert("Hello");
}

and

var menuLink = document.getElementsByClassName( 'menu' );    
for (var i = 0; i < menuLink.children.length; i++) {
var childElement = menuLink.children[i];
childElement.addEventListener('click', doSomething, false);
}

function doSomething() {
    alert("Hello");
}

both work.

Thanks

解决方案

querySelectorAll doesn't require that you block your markup by adding a class to every element in the list (and is supported by IE8).

这篇关于document.getElementsByClassName（" sth"）与document.querySelectorAll（" #id标记名"）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！