querySelector и querySelectorAll vs getElementsByClassName и getElementById в JavaScript

взыскании с Документация Mozilla:

интерфейс NodeSelector Эта спецификация добавляет два новых метода к любым объектам, реализующим интерфейс Document, DocumentFragment или Element:

querySelector

возвращает первый соответствующий узел элемента в поддереве узла. Если соответствующий узел найден, null возвращенный.

querySelectorAll

возвращает a список узлов, содержащий все соответствующие элементы узлы в поддерево узла или пустой список узлов, если совпадения не найдены.

и

Примечание: NodeList возвращается querySelectorAll() не проживают, что означает, что изменения в DOM не отражаются в коллекции. Это отличается от других методов запроса DOM, которые возвращение в прямом эфире список узлов.

о различиях, есть важный в результатах между querySelectorAll и getElementsByClassName: возвращаемое значение отличается. querySelectorAll вернет статическую коллекцию, в то время как getElementsByClassName возвращает живую коллекцию. Это может привести к путанице, если вы сохраните результаты в переменной для дальнейшего использования:

• переменная, сгенерированная с помощью querySelectorAll будет содержать элементы, которые выполнены селектор на данный момент метод был назван.
• A переменная генерируется с помощью getElementsByClassName будет содержать элементы, которые выполнены селектор если используется (это может отличаться от момента вызова метода).

например, обратите внимание, как даже если вы не переназначить переменные aux1 и aux2, они содержат разные значения после обновления классов:

// storing all the elements with class "blue" using the two methods
var aux1 = document.querySelectorAll(".blue");
var aux2 = document.getElementsByClassName("blue");

// write the number of elements in each array (values match)
console.log("Number of elements with querySelectorAll = " + aux1.length);
console.log("Number of elements with getElementsByClassName = " + aux2.length);

// change one element's class to "blue"
document.getElementById("div1").className = "blue";

// write the number of elements in each array (values differ)
console.log("Number of elements with querySelectorAll = " + aux1.length);
console.log("Number of elements with getElementsByClassName = " + aux2.length);

.red { color:red; }
.green { color:green; }
.blue { color:blue; }

<div id="div0" class="blue">Blue</div>
<div id="div1" class="red">Red</div>
<div id="div2" class="green">Green</div>

querySelector может быть полный CSS (3)-селектор с идентификаторами и классами и Псевдоклассами вместе, как это:

'#id.class:pseudo'

// or

'tag #id .class .class.class'

С getElementByClassName вы можете просто определить класс

'class'

С getElementById вы можете просто определить идентификатор

'id'

Я пришел на эту страницу исключительно для того, чтобы узнать лучший метод для использования с точки зрения производительности - т. е. который быстрее:

querySelector / querySelectorAll or getElementsByClassName

и я нашел это: https://jsperf.com/getelementsbyclassname-vs-queryselectorall/18

он запускает тест на 2 x примерах выше, плюс он также запускает тест для эквивалентного селектора jQuery. мои результаты теста были следующими:

getElementsByClassName = 1,138,018 operations / sec - <<< clear winner
querySelectorAll = 39,033 operations / sec
jquery select = 381,648 operations / sec

querySelector и querySelectorAll являются относительно новыми API, тогда как getElementById и getElementsByClassName были с нами намного дольше. Это означает, что вы используете, будет в основном зависеть от того, какие браузеры нужно поддерживать.

Что касается :, это имеет особое значение, так что вы должны избежать его, если вы должны использовать его как часть имени ID/класса.