skip to main content

querySelectorAll

js

Кратко 🔗

Метод определен для объекта document и любого HTML-элемента (Element) страницы. Позволяет найти все элементы по CSS-селектору среди дочерних. CSS-селектор передается в виде параметра. Этот метод используется в работе очень часто.

Возвращает похожую на массив статическую коллекцию NodeList с найденными элементами. Если элементов не нашлось, то коллекция будет пустая, то есть с размером 0.

Как пишется 🔗

Метод принимает один параметр — CSS-селектор в виде строки. Например, можно выбрать все элементы внутри div

<html>
<head></head>
<body>
<div>
<p>
Князь Василий говорил всегда лениво, как актер говорит роль старой
пиесы. Анна Павловна Шерер, напротив, несмотря на свои сорок лет, была
преисполнена оживления и порывов.
</p>
<p>
Быть энтузиасткой сделалось ее общественным положением, и иногда, когда
ей даже того не хотелось, она, чтобы не обмануть ожиданий людей, знавших
ее, делалась энтузиасткой. Сдержанная улыбка, игравшая постоянно на лице
Анны Павловны, хотя и не шла к ее отжившим чертам, выражала, как у
избалованных детей, постоянное сознание своего милого недостатка, от
которого она не хочет, не может и не находит нужным исправляться.
</p>
</div>
<p>Это параграф, дочерний для body</p>
<script>
let paragraphs = document.querySelectorAll("div>p")
console.log(paragraphs.length) // 2

// ищем несуществующий элемент
let spanFromBody = document.querySelectorAll("span")
console.log(spanFromBody.length) // 0
</script>
</body>
</html>

Динамический пример, введи селектор в поле поиска и «Искать»:

See the Pen Работа querySelectorAll by Nikolai Lopin (@Lopinopulos) on CodePen.

Как понять 🔗

Метод работает с DOM, который связан с HTML разметкой. Каждый HTML-элемент имеет родительские и дочерние элементы:

  • Родители — это элементы, которые содержат текущий элемент. В примере выше у первого элемента p есть два родительских элемента — div и body.
  • Дочерние элементы — это элементы, которые содержит текущий элемент. Они могут быть, а могут не быть. Например, для тега body все элементы страницы дочерние. У p дочерний элемент — текст внутри тега.

Если работаешь с корнем страницы, объектом document, то поиск идет по всем элементам страницы (т.е. от body), если от конкретного элемента, то поиск идет только по всем дочерним.

В работе 🔗

Николай, front-end ниндзя 🔗

🛠 Для поиска вообще всех элементов в качестве аргумента нужно передать строку '*', ее называют wildcard.

🛠 Метод возвращает статическую коллекцию. В отличие от методов getElementsByTagName и getElementsByClassName, которые возвращают живые коллекции. Статическая коллекция не обновляется автоматически при появлении на странице новых элементов. Если нужны свежие данные, то придется запустить поиск заново.

🛠 Результаты поиска можно безопасно обходить с помощью цикла.