Добавление, удаление, изменение и проверка HTML5 атрибутов с помощью JavaScript

От автора: кроме создания новых тегов и контента JavaScript зачастую используется для изменения атрибутов у уже существующих тегов: к примеру, изменение атрибута src тега video для создания плейлиста видео. JS также может добавлять атрибуты тегам, которые только создаются.

Первым делом определитесь с тегами, с которыми будете работать, а сами методы добавления, удаления и изменения атрибутов не такие и сложные:

Добавление атрибута с помощью setAttribute

Если на нашей странице есть, к примеру, один тег video, найденный в JS с помощью querySelector:

…то с помощью setAttribute мы можем добавить этому тегу атрибут poster и соответствующее ему значение:

Результат в DOM:

Обратите внимание, что setAttribute обязательно требует указывать значение атрибута, даже если это булев атрибут типа controls. С технической точки зрения данному атрибуту не нужно значение, нужно лишь указать слово. Для большинства таких атрибутов внутри setAttribute в качестве значения атрибута можно указывать просто true:

Если атрибут уже задан, setAttribute изменит его значение на то, что передано в аргументе.

Также стоит сказать, что большинство атрибутов доступны в виде свойств соответствующих объектов DOM. К примеру, по video.id мы получаем доступ к идентификатору. Данную запись можно использовать для проверки значения, изменения или удаления.

Помимо всего прочего, такие вещи как классы лучше обрабатывать с помощью соответствующих им методов типа classList.

Удаление атрибута

Вы будете удивлены, но за удаление атрибута отвечает метод removeAttribute. Метод принимает название атрибута:

Вам могут встретиться советы по удалению атрибутов, в которых люди советуют просто поставить значение атрибута в null, т.е. video.setAttribute(«poster», «»). Не делайте так: это не всегда работает. Лучше используйте removeAttribute.

Если во время попытки удаления атрибут был не задан у тега, JavaScript выбросит исключение, а скрипт продолжит работу без ошибок. Можно проверять наличие атрибута у элемента с помощью метода hasAttribute, который мы разберем ниже:

Проверка наличия атрибута у элемента

Перед изменением значения атрибута стоит проверить, а присвоен ли этот атрибут к тегу. Сделать это можно с помощью hasAttribute, который обычно располагается в условии if:

Получить полный список применяемых к тегу атрибутов можно с помощью свойства .attributes, о котором я подробно расскажу в следующей статье.

Источник: //thenewcode.com/

Редакция: Команда webformyself.

Комментарии Вконтакте: