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支持）。

Answer 2

这取决于。 getElementsByClassName是much faster，如果您需要最高性能，这个事实可能很有用。对于对DOM的复杂查询，querySelectorAll对开发人员更友好。

document.getElementsByClassName（“sth”）vs document.querySelectorAll（“＃id tagname”）

2 个答案: