JS Document QuerySelector

Селектор `document.querySelector()` является одним из основных методов JavaScript для поиска и выбора элементов на веб-странице. Он позволяет получить первый элемент, удовлетворяющий заданному CSS-селектору.

Примеры использования `document.querySelector()`:

1. Поиск элемента по его идентификатору:

javascript
const element = document.querySelector("#myElement");

В данном примере `document.querySelector("#myElement")` вернет первый элемент на странице с атрибутом `id`, равным "myElement". Если такой элемент не найден, будет возвращено значение `null`.

2. Поиск элемента по его классу:

javascript
const elements = document.querySelectorAll(".myClass");

`document.querySelectorAll(".myClass")` вернет все элементы на странице с классом "myClass" в виде списка (объект `NodeList`). Чтобы получить только первый элемент из списка, можно использовать `document.querySelector(".myClass")`.

3. Поиск элемента по его типу тега:

javascript
const elements = document.querySelectorAll("div");

`document.querySelectorAll("div")` вернет все элементы div на странице. Снова, если вам нужен только первый элемент, вы можете использовать `document.querySelector("div")`.

4. Поиск элемента с использованием комплексного CSS-селектора:

javascript
const element = document.querySelector("div > .myClass");

Этот пример найдет первый элемент с классом "myClass", который является прямым потомком элемента `div`.

Обратите внимание, что `document.querySelector()` возвращает только первый элемент, который соответствует выбранному селектору. Если вам нужно выбрать все элементы, которые удовлетворяют селектору, используйте `document.querySelectorAll()`.