javascript - document.getElementsByClassName ("sth") 与 document.querySelectorAll ("#id tagname")

Question

给定以下 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>

如何定位所有 <li>这是最好的方法吗？是通过使用类名还是通过带有 querySelectorAll() 的 ID ？

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");
}

和

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");
}

两者都有效。

谢谢

Answer 1

querySelectorAll 不需要您通过向列表中的每个元素添加类来阻止您的标记(IE8 支持)。