skip to main content

querySelector

js

Кратко 🔗

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

Как пишется 🔗

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

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

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

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

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

Как понять 🔗

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

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

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

В работе 🔗

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

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