mirror of
https://github.com/freeCodeCamp/freeCodeCamp.git
synced 2026-09-24 23:01:18 +08:00
39 lines
1.5 KiB
Markdown
39 lines
1.5 KiB
Markdown
---
|
|
title: HTML DOM querySelector()
|
|
localeTitle: HTML DOM querySelector ()
|
|
---
|
|
Метод объекта Document `querySelector()` возвращает `первый` элемент в документе, который соответствует указанному селектору или группе селекторов. Если совпадений не найдено, возвращается null.
|
|
|
|
**Содержание HTML:**
|
|
|
|
```html
|
|
|
|
<div id="id-example"></div>
|
|
<div class="class-example"></div>
|
|
<a>element-example</a>
|
|
```
|
|
|
|
**Содержание JavaScript:**
|
|
|
|
```javascript
|
|
document.querySelector("#id-example"); // Возвращает элемент с id "id-example"
|
|
document.querySelector(".class-example"); // Возвращает элемент с классом "class-example"
|
|
document.querySelector("a"); // Возвращает элемент "a"
|
|
```
|
|
|
|
Заметим, что `querySelector()` возвращает первый соответствующий элемент, чтобы вернуть все совпадения, используйте метод querySelectorAll ().
|
|
|
|
```html
|
|
|
|
<div id="example">First</div>
|
|
<div id="example">Second</div>
|
|
```
|
|
|
|
```javascript
|
|
document.querySelector("#example"); // Возвращает только элемент с содержанием 'First'
|
|
```
|
|
|
|
#### Дополнительная информация:
|
|
|
|
[MDN - document.querySelector ()](https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector)
|