JS властивість Element.id

Загальний опис

Властивість id об'єкта Element представляє унікальний ідентифікатор елемента в межах документа. Ця властивість використовується для встановлення або отримання значення атрибута id елемента HTML. Значення id повинно бути унікальним для кожного елемента в документі, що робить його корисним для ідентифікації та доступу до конкретних елементів за допомогою JavaScript або CSS.

Встановлення значення id для елемента виконується шляхом присвоєння рядкового значення властивості id. Наприклад:

<div id="myDiv"></div>

const myDiv = document.getElementById('myDiv');
console.log(myDiv.id); // Виведе: "myDiv"

// Зміна значення id
myDiv.id = 'newId';
console.log(myDiv.id); // Виведе: "newId"

У цьому прикладі ми спочатку отримуємо елемент div за його початковим id "myDiv" за допомогою методу document.getElementById(). Потім ми виводимо значення властивості id у консоль, що показує "myDiv". Після цього ми змінюємо значення id на "newId" і знову виводимо його в консоль.

Властивість id є особливо корисною для доступу до елементів за допомогою JavaScript. Наприклад, ви можете використовувати метод document.getElementById() для отримання посилання на елемент за його id:

<div id="content">
  <p>Це параграф</p>
</div>

const contentDiv = document.getElementById('content');
const paragraph = contentDiv.firstElementChild;
paragraph.textContent = 'Новий текст параграфа';

У цьому прикладі ми отримуємо елемент div з id="content" і зберігаємо його в змінній contentDiv. Потім ми використовуємо властивість firstElementChild для доступу до першого дочірнього елемента (p) і змінюємо його текстовий вміст за допомогою властивості textContent.

Крім того, властивість id широко використовується в CSS для стилізації конкретних елементів. Ви можете застосовувати стилі до елемента за його id, використовуючи селектор #id:

<div id="myDiv">Це div</div>

#myDiv {
  color: red;
  font-weight: bold;
}

У цьому прикладі всі стилі, визначені в CSS-правилі #myDiv, будуть застосовані до елемента div з id="myDiv".

Властивість id також може бути корисною для створення зв'язків між різними частинами документа, наприклад, між елементами label і відповідними полями введення в формах або між посиланнями та цільовими елементами на сторінці.

правити

Порада

Використовуйте властивість id для швидкого доступу до елементів за допомогою методів, таких як document.getElementById(). Це ефективний спосіб отримати посилання на конкретний елемент без необхідності traversувати всю структуру DOM.

автор: Bond правити

Порада

Властивість id можна використовувати для створення зв'язків між різними частинами документа, наприклад, між елементами label і відповідними полями введення в формах або між посиланнями та цільовими елементами на сторінці. Це полегшує навігацію та взаємодію з вмістом.

автор: Bond правити

Порада

Пам'ятайте, що властивість id можна використовувати не лише для доступу до елементів через JavaScript, але й для стилізації елементів за допомогою CSS. Селектор #id в CSS дозволяє застосовувати стилі до конкретного елемента за його id.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

Element.id

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	23	1	1	12.1	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	25	4	1

Підтримка: серверні переглядачі

Переглядач
	-	-

Приклади

+ запропонувати свій приклад у пісочниці

<div id="myElementId">Демонстраційний елемент</div>

// Отримуємо елемент за його id
const myElement = document.getElementById('myElementId');

// Перевіряємо, чи елемент знайдено
if (myElement) {
  // Змінюємо стиль елемента
  myElement.style.backgroundColor = 'yellow';
  myElement.style.padding = '10px';
} else {
  console.log('Елемент з ідентифікатором "myElementId" не знайдено.');
}

<form id="registrationForm">
    <p><label for="nameInput">Ім'я:</label>
    <input type="text" id="nameInput" required></p>
    <p><label for="passwordInput">Пароль:</label>
    <input type="password" id="passwordInput" required></p>
    <button type="submit">Зареєструватися</button>
</form>

const form = document.getElementById('registrationForm');

form.addEventListener('submit', (event) => {
    event.preventDefault();

    const name = document.getElementById('nameInput').value;
    const password = document.getElementById('passwordInput').value;

    console.log('Реєструємо', name, '— пароль на', password.length, 'символів');
});