Від автора: крім створення нових тегів і контенту JavaScript найчастіше використовується для зміни атрибутів у вже існуючих тегів: наприклад, зміна атрибуту src тега video для створення списку відтворення відео. JS також може додавати атрибути тегам, які тільки створюються.
Насамперед визначтеся з тегами, з якими будете працювати, а самі методи додавання, видалення і зміни атрибутів не такі і складні:
Додавання атрибута з допомогою setAttribute
Якщо на нашій сторінці є, приміром, один тег video, знайдений в JS з допомогою querySelector:
var video = document.querySelector(“video”);
…то з допомогою setAttribute ми можемо додати до цього тегу атрибут poster і відповідне йому значення:
video.setAttribute(“poster”, “woke.jpg”);
Результат в DOM:
Зверніть увагу, що 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, про який я детально розповім в наступній статті.
