JavaScript: узнать ID элемента DOM, альтернативы getAttribute

Быстрый ответ

Для того чтобы извлечь значение ID элемента с помощью JavaScript, подходит метод document.querySelector, если вам нужно обратиться к CSS-селектору, или document.getElementById, если вам известен ID конкретного элемента. Значение ID можно получить при вызове свойства .id:

let element = document.querySelector('.example'); // Обращаемся к элементу, используя CSS-селектор '.example'
// либо
let element = document.getElementById('example'); // обращение к элементу по ID 'example'
let idValue = element.id; // Получили 'example' – цель достигнута!

Подставьте вместо .example или 'example' ваш селектор или ID для того, чтобы получить свойство ID.

Обработка нескольких ID: цикл

В случае, когда у вас есть несколько элементов с ID, примените метод getElementsByTagName для сбора элементов определенного тега и перебора этих элементов с целью извлечения ID каждого из них:

let inputs = document.getElementsByTagName("input");
for (let i = 0; i < inputs.length; i++) {
    console.log(inputs[i].id); // Выводим ID каждого input'а, это как номерки в очереди!
}

Извлечение ID на основе событий: Методика Марвела

Когда речь заходит о обработке событий, используйте this.id в обработчике события для мгновенной реакции:

document.addEventListener('click', function(e) {
    if(e.target.tagName === 'BUTTON') {
        alert(e.target.id); // Сюприз! Выводим ID нажатой кнопки
    }
});

Совместное использование с jQuery: один ID для контроля над всеми

С jQuery извлечь ID элемента становится так же просто, как съесть кусок вкусного торта:

$('#example').on('click', function() {
    alert($(this).attr('id')); // Объявляем 'example', награда найдена!
});

Метод each в jQuery поможет вам при работе с несколькими элементами:

$('input').each(function() {
    alert($(this).attr('id')); // Открываем ID каждого элемента!
});

Визуализация

Вообразите группу ищейки, которая просматривает толпу через бинокль (🔍) в поисках человека с уникальным ID:

Толпа:  [👤, 👤, 👤, 👤(🆔: "unique123"), 👤]

Наша задача — найти того, кто имеет уникальный ID:

let targetPerson = document.getElementById('unique123');

Задача выполнена!: 🔍👤(🆔: "unique123")

"Обнаружили цель: "unique123"

getElementById() можно представить как бинокль, который помогает вам пройтись взглядом по толпе (DOM-элементы), ища уникальный ID.

Профессиональные советы для работы с DOM

Оно существует! Проверка перед обращением

Прежде чем обратиться к свойству .id, убедитесь, что элемент действительно существует:

let element = document.getElementById('example');
if (element) { // Проверяем существование элемента
    let idValue = element.id; // Элемент у нас в руках, обращаемся к его 'id'
} else {
    // Упс! Элемент не найден, пора звать на помощь!
}

Подробнее об этом расскажет наш спикер на видео

Хроники фреймворков: работа с ID в JavaScript-фреймворках

В мире JavaScript-фреймворков таких как Angular и React работа с ID – это специальная процедура:

// Рассказы React
<Button id="uniqueButton" onClick={(e) => console.log(e.target.id)} />

// Легенды Angular
<button id="uniqueButton" (click)="handleClick($event)"></button>
// В файле .ts скрыт секрет
handleClick(event: Event) {
    console.log((event.target as HTMLButtonElement).id);
}

Каждый код потребляет ресурсы: приоритет для производительности

Метод getElementById работает быстрее, в то время как querySelector может оказаться медленнее при использовании со сложными селекторами. Учитывайте расход ресурсов, работая с масштабными приложениями.

Полезные материалы

1. Document: getElementById() method – Web APIs | MDN — Основная информация о методе getElementById.
2. HTML DOM Document getElementById() Method — Практическое руководство с примерами от W3Schools.
3. Searching: getElement, querySelector — Обзор методов поиска элементов в DOM, включая getElementById.
4. The Difference Between ID and Class | CSS-Tricks — Разница между идентификаторами и классами в CSS.
5. JavaScript – href vs onclick for callback function on Hyperlink – Stack Overflow — Описание лучших практик и применения ID в JavaScript.
6. The Basics of DOM Manipulation in Vanilla JavaScript (No jQuery) — SitePoint — Введение в манипуляции с DOM без использования библиотек.
7. javascript – querySelector vs. getElementById – Stack Overflow — Сравнение методов getElementById и querySelector для лучшего понимания их применения в DOM.