Идентификатор id в JavaScript: от основ до продвинутого использования
Атрибут id в JavaScript: получение, установка и использование
Атрибут id является одним из ключевых способов идентификации HTML-элементов. В JavaScript существует несколько подходов для работы с id. Рассмотрим основные варианты.
Основное решение: document.getElementById()
Самый быстрый и прямой способ получить элемент по его id - метод getElementById. Он возвращает ссылку на первый элемент с указанным id или null, если элемент не найден.
// HTML: <div id="myDiv">Привет, мир!</div>
let element = document.getElementById('myDiv');
console.log(element.textContent); // "Привет, мир!"Js id id js src (атрибут id)
Типичная ошибка: id не должен содержать точки, пробелы или начинаться с цифры. Также необходимо вызывать метод после того, как элемент появился в DOM. Если скрипт выполняется до загрузки элемента, вернется null.
Как выбрать элемент по id, используя CSS-селекторы?
Метод querySelector принимает CSS-селектор. Для id используется решётка.
let element = document.querySelector('#myDiv');
console.log(element); // <div id="myDiv">...</div>Этот метод медленнее getElementById, но удобен, когда нужно комбинировать селекторы.
Проблема: querySelector возвращает null, если селектор не найден. Также не следует использовать его, если нужна максимальная производительность.
Как изменить атрибут id у существующего элемента?
Свойство element.id позволяет читать и задавать id.
let div = document.getElementById('oldId');
div.id = 'newId';
console.log(div.id); // "newId"После изменения id элемент больше не доступен по старому id. Следует учитывать это при последующих обращениях.
Ошибка: если присвоить id, который уже существует на странице, это нарушит уникальность и может привести к непредсказуемому поведению.
Как присвоить уникальный id новому элементу при создании?
При динамическом создании элементов полезно генерировать уникальные id, например, с помощью счётчика или случайных чисел.
let counter = 0;
function createDiv() {
let newDiv = document.createElement('div');
newDiv.id = 'dynamic-' + counter++;
newDiv.textContent = 'Элемент ' + newDiv.id;
document.body.appendChild(newDiv);
}Это гарантирует, что каждый новый элемент получит уникальный идентификатор.
Проблема: при перезагрузке страницы счётчик сбрасывается. Для постоянных id можно использовать данные из сервера.
Как передать id элемента в атрибут src для загрузки контента?
Иногда требуется динамически задать src тегу img или iframe, используя id другого элемента.
// HTML: <input id="imageId" value="photo"> <img id="preview">
let input = document.getElementById('imageId');
let img = document.getElementById('preview');
img.src = 'https://example.com/' + input.value + '.jpg';Также id можно использовать в якорях: location.hash = '#' + element.id для скролла к элементу.
Ошибка: при вводе пользователем некорректного id в src может возникнуть ошибка загрузки. Рекомендуется проверять значение.
Как убедиться, что элемент с заданным id существует на странице?
Простая проверка на null.
let elem = document.getElementById('nonExistent');
if (elem) {
console.log('Элемент найден');
} else {
console.log('Элемент не существует');
}Альтернативно можно использовать try/catch, но лучше проверять в условии.
Распространённая ошибка: забыть проверить null и сразу обратиться к свойствам, что вызовет TypeError.
Расширенные примеры работы с атрибутом id
Пример 1: Поиск всех id по префиксу с помощью querySelectorAll
Хотя id уникальны, может потребоваться найти элементы, id которых начинаются с определённой строки (например, все элементы с id "item-*").
// HTML: <div id="item-1">1</div><div id="item-2">2</div>
let items = document.querySelectorAll('[id^="item-"]');
console.log(items.length); // 2
items.forEach(el => console.log(el.id));2 item-1 item-2
Пример 2: Генерация уникальных id с помощью crypto.randomUUID()
Современный способ создания уникальных идентификаторов без счётчика.
function createUniqueDiv() {
let div = document.createElement('div');
div.id = crypto.randomUUID();
div.textContent = 'UUID: ' + div.id;
document.body.appendChild(div);
}
createUniqueDiv();(в консоли появится элемент с id вида "550e8400-e29b-41d4-a716-446655440000")
Пример 3: Использование id для установки src в iframe с якорем
Предположим, есть список элементов с id разделов, и мы хотим открыть iframe на определённом разделе документа.
// HTML: <iframe id="contentFrame"></iframe> <button data-section="section1">Раздел 1</button>
let buttons = document.querySelectorAll('[data-section]');
buttons.forEach(btn => {
btn.addEventListener('click', function() {
let sectionId = this.dataset.section;
let iframe = document.getElementById('contentFrame');
iframe.src = 'documentation.html#' + sectionId;
});
});Пример 4: Переключение CSS через изменение id
Изменением id можно динамически менять стили, если в CSS есть селекторы по конкретным id.
// CSS: #highlight { background: yellow; }
let div = document.getElementById('myDiv');
div.id = 'highlight';
// Через какое-то время вернуть обратно
setTimeout(() => { div.id = 'myDiv'; }, 2000);Пример 5: Работа с id внутри Shadow DOM
Метод getElementById не находит элементы внутри теневого дерева. Нужно использовать shadowRoot.getElementById.
let host = document.getElementById('myHost');
let shadow = host.attachShadow({mode: 'open'});
shadow.innerHTML = '<div id="inner">Тень</div>';
let inner = shadow.getElementById('inner');
console.log(inner.textContent); // "Тень"Пример 6: Проверка на дубликаты id при добавлении элементов
function addElementWithId(id) {
if (document.getElementById(id)) {
console.warn('Элемент с id "' + id + '" уже существует');
return;
}
let el = document.createElement('div');
el.id = id;
document.body.appendChild(el);
}
addElementWithId('unique');
addElementWithId('unique'); // предупреждение(в консоли: "Элемент с id "unique" уже существует")
Пример 7: Сравнение производительности getElementById и querySelector
Выполним 100000 обращений и замерим время.
// HTML: <div id="test"></div>
console.time('getElementById');
for(let i=0; i<100000; i++) document.getElementById('test');
console.timeEnd('getElementById');
console.time('querySelector');
for(let i=0; i<100000; i++) document.querySelector('#test');
console.timeEnd('querySelector');getElementById: ~2ms querySelector: ~10ms