мое новое расписание: пн-пт с 8.00 по 16.00 по москве, сб и вс - выходные; после 16.00 и на вых. отвечаю по возможности

Получение DOM элемента в JavaScript

Сейчас мы с вами научимся получать DOM элементы страницы, чтобы в дальнейшем производить с ними какие-нибудь манипуляции.

Пусть у нас есть некоторая кнопка:

<input id="button" type="submit">

Давайте получим ссылку на эту кнопку в переменную.

Для этого следует использовать метод querySelector специального объекта document. Этот метод параметром принимает CSS селектор и возвращает ссылку на найденный по этому селектору элемент.

У нашей кнопочки есть атрибут id со значением button. Значит, мы можем найти это кнопку по селектору #button. Итак, давайте найдем нашу кнопочку и запишем ссылку на нее в переменную:

let button = document.querySelector('#button'); console.log(button);

Даны 3 абзаца:

<p id="elem1">1</p> <p id="elem2">2</p> <p id="elem3">3</p>

Запишите ссылку на каждый из абзацев в отдельную переменную и выведите содержимое каждой из этих переменных в консоль.

Более сложные селекторы

Давайте сделаем что-нибудь более сложное.

Пусть, к примеру, у нас есть вот такой HTML код:

<div id="parent"> <input> </div>

Давайте получим ссылку на инпут, находящийся внутри блока с id, равным parent:

let elem = document.querySelector('#parent input'); console.log(elem);

Как вы видите, мы получили наш инпут по селектору #parent input. На самом деле под этот CSS селектор попадают все инпуты, находящиеся в #parent.

Пусть, к примеру, у нас два таких инпута:

<div id="parent"> <input value="1"> <input value="2"> </div>

Тогда, если написать селектор #parent input в CSS коде, он затронет оба наших инпута:

#parent input { color: red; }

Метод querySelector, однако, работает не так. Он всегда получает только один элемент - первый, попавший под указанный селектор. Давайте посмотрим на примере.

Пусть у нас есть инпуты с классом elem:

<input class="elem"> <input class="elem">

Давайте получим первый из этих инпутов:

let elem = document.querySelector('.elem'); console.log(elem); // здесь будет первый инпут

Дан следующий HTML:

<div id="block"> <p>1</p> <p>2</p> </div>

Получите ссылку на первый абзац из дива с id, равным block.

Дан следующий HTML:

<div class="block"> <p>1</p> <p>2</p> </div>

Получите ссылку на первый абзац из дива с классом block.

Дан следующий HTML:

<p class="www">text</p> <p class="www">text</p>

Получите ссылку на первый абзац с классом www.