Кратко
Секция статьи "Кратко"Метод определён для объекта document
и любого HTML-элемента (Element
) страницы. Позволяет найти все элементы по CSS-селектору среди дочерних. CSS-селектор передаётся в виде параметра. Этот метод используется в работе очень часто.
Возвращает похожую на массив статическую коллекцию NodeList
с найденными элементами. Если элементов не нашлось, то коллекция будет пустая, то есть с размером 0.
Как пишется
Секция статьи "Как пишется"Метод принимает один параметр — CSS-селектор в виде строки. Например, можно выбрать все элементы внутри <div>
<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>
<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>
Динамический пример, введи селектор в поле поиска и «Искать»:
Как понять
Секция статьи "Как понять"Метод работает с DOM, который связан с HTML-разметкой. Каждый HTML-элемент имеет родительские и дочерние элементы:
- Родители — это элементы, которые содержат текущий элемент. В примере выше у первого элемента
<p>
есть два родительских элемента —<div>
и<body>
. - Дочерние элементы — это элементы, которые содержит текущий элемент. Они могут быть, а могут не быть. Например, для тега
<body>
все элементы страницы дочерние. У<p>
дочерний элемент — текст внутри тега.
Если работаешь с корнем страницы, объектом document
, то поиск идёт по всем элементам страницы (т.е. от <body>
), если от конкретного элемента, то поиск идёт только по всем дочерним.
На практике
Секция статьи "На практике"🛠 Для поиска вообще всех элементов в качестве аргумента нужно передать строку '*'
, её называют wildcard.
🛠 Метод возвращает статическую коллекцию. В отличие от методов getElementsByTagName
и getElementsByClassName
, которые возвращают живые коллекции. Статическая коллекция не обновляется автоматически при появлении на странице новых элементов. Если нужны свежие данные, то придётся запустить поиск заново.
🛠 Результаты поиска можно безопасно обходить с помощью цикла.