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

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

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

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

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

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

var video = document.querySelector("video");

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

video.setAttribute("poster", "woke.jpg");

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

<video poster="woke.jpg" autoplay src="">

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

video.setAttribute("controls", "true");

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

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

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

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

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

video.removeAttribute("autoplay");

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

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

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

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

if (video.hasAttribute("autoplay")) {
    // делаем что-то
}

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

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

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

JavaScript&jQuery с нуля до профи

Пройдите пошаговый видеокурс по JavaScript&jQuery

Научиться

Метки:

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

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree