document.getElementsByClassName ("СТГ") против document.querySelectorAll ("# Идентификатор тэгу")

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()?

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, и этот факт может быть полезен, если вам требуется максимальная производительность. querySelectorAll является более подходящим для разработчиков в случае сложных запросов к DOM.