Пост

Глобальные атрибуты. id

Атрибут id в html

Опубликовано
Атрибут id в html
Атрибут id в html
Автор alex
1 мин. чтения
Глобальные атрибуты. id

Определения

Фундаментальный атрибут id определяет уникальный идентификатор элемента (ID).

Значение атрибута id у элементов должно быть уникальным в пределах документа. То есть на странице не может быть два элемента с одинаковыми id.

Атрибут id должен содержать хотя бы один символ и в нем не должно быть пробелов, то есть атрибут my section не допустим.

Атрибут id может содержать символы -_:., и не может содержать символы !@#$, например id my@id не допустим.

Значения атрибута id регистрозависимы, то есть Main и main разные идентификаторы.

Старайтесь придерживаться единого стиля именования идентификаторов на странице.

Если нужно, чтобы идентификаторы повторялись, используйте атрибут class.

id является глобальным атрибутом и может быть указан во всех html элементах

1
2
3

<body id="body">
123
</body>

Примеры названий идентификаторов

  • main_section
  • block
  • contenteditable
  • main-content
  • login-form
  • modal-window
  • background-audio
  • comments-block
  • related-posts
  • error-container
  • collapsed-menu
  • product-card
  • menu__item--active
  • card__title

Для чего используется id

  1. Для стилизации элемента. Из css доступ получаем по идентификатору элемента #body {}.
  2. Для получения доступа к элементу из javascript document.getElementById("main-content");
  3. Позволяет создать якорь ведущий к определенному разделу на странице <a href="#section2">Перейти к разделу 2</a> <div id="section2">...</div>
  4. Позволяет создать связь с тегом label через атрибут for <label for="email">Email:</label> <input type="email" id="email">

Доступ из javascript

С помощью метода getElementById можно получить доступ к атрибуту id, и далее работать с элементом.

1
2
3
4
5

const button = document.getElementById('button');

button.addEventListener('click', function () {
  alert('Click!');
});

Метод getElementById есть только у объекта document, он ищет id по всему документу.

Можно получить доступ и так, это считается плохой практикой, и в основном используется для краткости кода.

1

window.b.textContent // b - это идентификатор указанных на одном из элементах страницы

Прочитать атрибут можно так

1

document.body.id // b

Проверить что существует элемент

1

if (element) {}

Удалить атрибут

1

document.body.removeAttribute('id')

Например, поменяем текст элемента

1
2
3
4
5
6
7

const header = document.getElementById('header');
if (header) {
  header.textContent = 'Новый заголовок';
}

// Или стразу напрямую
//document.body.textContent = '234234324'

Ссылки

Html
Авторский пост защищен лицензией CC BY 4.0 .

Хотите оптимизировать свой бизнес, нужен сервис, сайт или интеграция.

Бесплатно расчитаю время разработки, предложу решение вашей задачи.