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.
Порада:	Властивість `id` можна використовувати для створення зв'язків між різними частинами документа, наприклад, між елементами `label` і відповідними полями введення в формах або між посиланнями та цільовими елементами на сторінці. Це полегшує навігацію та взаємодію з вмістом.
Порада:	Пам'ятайте, що властивість `id` можна використовувати не лише для доступу до елементів через JavaScript, але й для стилізації елементів за допомогою CSS. Селектор `#id` в CSS дозволяє застосовувати стилі до конкретного елемента за його `id`.

Синтаксис

Element.id

Значення

Return

Переглядачі

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

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

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

Приклади

У цьому прикладі користувач може встановити унікальний ідентифікатор для елемента div за допомогою поля введення та кнопки "Встановити ідентифікатор". Властивість id використовується для отримання поточного ідентифікатора елемента та встановлення нового ідентифікатора. Поточний ідентифікатор елемента відображається в абзаці #output.

При натисканні кнопки "Встановити ідентифікатор" спочатку отримується значення з поля введення #elementIdInput. Якщо поле не порожнє, його значення присвоюється властивості id елемента div за допомогою targetElement.id = newId. Після цього викликається функція updateOutput(), яка оновлює текст у абзаці #output відповідно до поточного ідентифікатора елемента. Поле введення очищається після встановлення ідентифікатора.

Функція updateOutput() отримує поточний ідентифікатор елемента div за допомогою targetElement.id. Якщо ідентифікатор присутній, у абзаці #output виводиться повідомлення "Ідентифікатор елемента: [ідентифікатор]". Якщо ідентифікатор відсутній, виводиться повідомлення "Елемент не має ідентифікатора".

Ця функція також викликається при завантаженні сторінки, щоб відобразити початковий стан елемента div (з ідентифікатором або без нього).


  See the Pen <a href="https://codepen.io/css_in_ua/pen/mdgOBNQ">
  Untitled</a> by css.in.ua (<a href="https://codepen.io/css_in_ua">@css_in_ua</a>)
  on <a href="https://codepen.io">CodePen</a>.

У цьому прикладі ми використовуємо властивість id для отримання елемента з HTML-документа за його унікальним ідентифікатором. Після цього ми змінюємо стиль елемента, щоб продемонструвати, що ми успішно отримали потрібний елемент.

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

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

У цьому прикладі ми створюємо просту форму реєстрації, де користувач має ввести ім'я та пароль. Ми використовуємо властивість id для отримання елементів форми та перевіряємо введені дані перед відправленням форми на сервер.

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

<script>
// Отримуємо форму за її id
const form = document.getElementById('registrationForm');

// Додаємо обробник події для відправлення форми
form.addEventListener('submit', (event) => {
  // Отримуємо елементи введення за їх id
  const nameInput = document.getElementById('nameInput');
  const passwordInput = document.getElementById('passwordInput');
  
  // Перевіряємо, чи введені дані
  if (nameInput.value.trim() === '' || passwordInput.value.trim() === '') {
    event.preventDefault(); // Зупиняємо відправлення форми
    alert('Будь ласка, введіть ім\'я та пароль.');
  }
});
<script>

JS довідник

JavaScript

Наповнення JS розділу