JavaScript | Как обратиться ко второму элементу с одинаковым ID?

JavaScript | Как обратиться ко второму элементу с одинаковым ID?

Одной командой

document.querySelectorAll("#ТВОЙ_ID")[1]

 

Видео инструкция

В этом видео приводится пример обращения ко второму элементу с одинаковым ID на HTML-странице при помощи JavaScript. Ввод команд осуществляется в консоль браузера Google Chrome. Результат виден сразу.

 

Теория

Откуда появляется подобный вопрос? Давайте разбираться.

Логика работы атрибутов ID для всех HTML-элементов в документе предполагает, что все идентификаторы (ID) на одной странице ДОЛЖНЫ ИМЕТЬ СВОИ УНИКАЛЬНЫЕ ЗНАЧЕНИЯ. То есть разрабатывая документ (руками или программно) нужно сделать так, чтобы значение идентификатора не повторялось в документе. От этого будет зависеть логика работы приложения.

Если страница предполагает большое количество кнопок и форм управления для пользователя, то нужно очень точно обрабатывать поступающие события JavaScript. Представьте, что вы повесили событие на кнопку закрытия формы заказа (например, выход из корзины). Вы нацелились по идентификатору элемента кнопки, предполагая, что он уникальный и другого такого на этой странице нет. Кнопка идеально отрабатывает закрытие для пользователей и все они комфортно работают на сайте.

А теперь приходит ваш коллега по работе и вешает точно такой же ID на кнопку отправки заказа в интернет-магазин. Ну захотелось ему. Или просто ошибся в кнопках. Пользователь сидел, тратил время, кропотливо выбирал себе товары на выходные. Навёл мышку на кнопку «Оформить заказ», нажал и вся форма стёрлась и он перешёл на главную страницу. Как думаете? Каково ему будет? Правильный ответ — он очень расстроится и покинет ваш сайт навсегда.

 

Реальность

В реальной практике разработки может всплыть что угодно. Например, на одной странице будет более чем один идентификатор. Пускай их будет 2. То есть где-то на странице есть 2 элемента с одинаковыми ID. Круть!

<p id="f">Вася</p>
<p id="a">Коля</p>
<p id="x">Дима</p>
<p id="f">Иван</p>

В нашем случае есть параграфы с одинаковыми идентификаторами idf«

Разметка с двумя ID - HTML
Разметка с двумя ID — HTML

Не подготовленный разработчик по логике захочет получить элемент с «уникальным» ID. Он введёт команду:

document.getElementById("f")

Вроде всё логично — «Дай Элемент У Которого Идентификатор Равен F»

 

В ответ прилетает один элемент:

Один элемент с ID равным F - JavaScript
Один элемент с ID равным F — JavaScript

Нас встречает Вася, а вот Иван куда-то запропал.

И вот именно в этот момент разработчик понимает, что нужно как-то обратиться ко второму элементу с одинаковым ID. А как это сделать? Классическая теория разбилась о жестокую действительность.

 

Решить задачу поможет метод querySelectorAll(selectors), который вернёт нам объект NodeList, который является массиво-подобным объектом. Метод принадлежит стандарту объектной модели документа и в частности «миксину ParentNode«.

Обратимся к документу document. У него вызовем метод querySelectorAll(). Передадим в качестве параметра CSS-селектор «#f». Решётка — это принадлежность к ID (как и URI-фрагменты), а точка — это принадлежность к классам. Команда вернёт нам прототип объекта NodeList.

document.querySelectorAll("#f")
NodeList из двух элементов - JavaScript
NodeList из двух элементов — JavaScript

Мы получим два элемента с индексами 0 и 1. Чтобы обратиться ко второму элементу с одинаковым ID нам нужно передать в квадратные скобки индекс 1.

document.querySelectorAll("#f")[1]

Мы можем легко проверить получение элемента, если добавим в команду геттер innerText.

document.querySelectorAll("#f")[1].innerText

 

Ссылки

Стандарт DOM — перевод на русский

Стандарт DOM — официальная страница стандарта

Миксин ParentNode