Кратко
СкопированоМетод определён для объекта document и любого HTML-элемента (Element) страницы. Позволяет найти элемент по CSS-селектору среди дочерних. Если элементов несколько, то вернётся первый подходящий. Если подходящих элементов нет, то вернёт null.
Как пишется
СкопированоМетод принимает один параметр — CSS-селектор в виде строки. Если передан не CSS-селектор, то система выбросит ошибку. Например, можно выбрать первый элемент внутри <div>:
<body> <div> <p> Князь Василий говорил всегда лениво, как актер говорит роль старой пиесы. Анна Павловна Шерер, напротив, несмотря на свои сорок лет, была преисполнена оживления и порывов. </p> <p> Быть энтузиасткой сделалось её общественным положением, и иногда, когда ей даже того не хотелось, она, чтобы не обмануть ожиданий людей, знавших её, делалась энтузиасткой. Сдержанная улыбка, игравшая постоянно на лице Анны Павловны, хотя и не шла к её отжившим чертам, выражала, как у избалованных детей, постоянное сознание своего милого недостатка, от которого она не хочет, не может и не находит нужным исправляться. </p> </div> <p>Это параграф, дочерний для body</p> <script> const firstParagraph = document.querySelector('div > p') console.log(firstParagraph.textContent) // Напечатает текст, начинающийся с 'Князь Василий' // Ищем несуществующий элемент const spanFromBody = document.querySelector('span') console.log(spanFromBody) // null </script></body>
<body>
<div>
<p>
Князь Василий говорил всегда лениво, как актер говорит роль старой
пиесы. Анна Павловна Шерер, напротив, несмотря на свои сорок лет, была
преисполнена оживления и порывов.
</p>
<p>
Быть энтузиасткой сделалось её общественным положением, и иногда, когда
ей даже того не хотелось, она, чтобы не обмануть ожиданий людей, знавших
её, делалась энтузиасткой. Сдержанная улыбка, игравшая постоянно на лице
Анны Павловны, хотя и не шла к её отжившим чертам, выражала, как у
избалованных детей, постоянное сознание своего милого недостатка, от
которого она не хочет, не может и не находит нужным исправляться.
</p>
</div>
<p>Это параграф, дочерний для body</p>
<script>
const firstParagraph = document.querySelector('div > p')
console.log(firstParagraph.textContent)
// Напечатает текст, начинающийся с 'Князь Василий'
// Ищем несуществующий элемент
const spanFromBody = document.querySelector('span')
console.log(spanFromBody)
// null
</script>
</body>
Динамический пример, введите селектор в поле поиска и нажмите «Искать»:
Как понять
СкопированоМетод работает с DOM, который связан с HTML-разметкой. Каждый HTML-элемент имеет родительские и дочерние элементы:
- Родители — это элементы, которые содержат текущий элемент. В примере выше у первого элемента
<p>есть два родительских элемента —<div>и<body>. - Дочерние элементы — это элементы, которые содержит текущий элемент. Они могут быть, а могут не быть. Например, для тега
<body>все элементы страницы дочерние. У<p>дочерний элемент — текст внутри тега.
Если вы работаете с корнем страницы, объектом document, то поиск идёт по всем элементам страницы (от <body>), если от конкретного элемента, то поиск идёт только по всем дочерним.
На практике
Скопированосоветует
Скопировано🛠 Для поиска первого элемента в DOM нужно передать строку '*' аргументом query, её называют wildcard.