id

Глобальний атрибут id визначає ідентифікатор (ID), який повинен бути унікальним у межах всього документа.

Спробуйте його в дії

Опис

Призначення атрибута ID – ідентифікувати один-єдиний елемент для посилань (при використанні ідентифікатора фрагмента), сценаріїв і стилізації (за допомогою CSS).

Елементи з атрибутами ID доступні як глобальні властивості. Ім'я властивості – це атрибут ID, а значення властивості – це елемент. Наприклад, у разі такої розмітки:

<p id="preamble"></p>

До елемента абзацу можна в JavaScript звертатися за допомогою коду:

const content = window.preamble.textContent;

Синтаксис

Значення атрибута ID не повинно містити пробільних символів ASCII. Браузери обробляють невідповідні ID, що містять пробіли, так, як ніби пробіл є частиною ID. На відміну від атрибута class, який дозволяє значення, розділені пробілами, елементи можуть мати лише одне-єдине значення ID.

Технічно кажучи, значення атрибута ID може містити будь-які інші символи Unicode. Однак значення атрибута ID, коли використовується в селекторах CSS, як з JavaScript за допомогою API виду Document.querySelector(), так і в списках стилів CSS, повинні бути валідними ідентифікаторами CSS. Тобто якщо значення атрибута ID не є валідним ідентифікатором CSS (наприклад, my?id або 1234), то його потрібно екранувати перед використанням у селекторі, або використовуючи метод CSS.escape(), або вручну.

У зв'язку з цим розробникам рекомендовано обирати для атрибутів ID значення, що є валідними ідентифікаторами CSS, які не потребують екранування.

Крім цього, не всі валідні значення атрибутів ID є валідними ідентифікаторами JavaScript. Наприклад, 1234 є валідним значенням атрибута, але не є валідним ідентифікатором JavaScript. Це означає, що значення не є валідним ім'ям змінної, тому не можна звертатися до елемента за допомогою коду window.1234. Однак до нього можна звертатися за допомогою window["1234"].

Специфікації

Сумісність із браузерами

Дивіться також

• Усі глобальні атрибути.
• Element.id, що відображає цей атрибут.
• Метод Document.getElementById.
• Селектори ідентифікатора CSS.