Attributes in DOM

by shurikation

HTML

<button class="button" data-price="100"></button>

JavaScript

const button = document.querySelector('.buyBtn');

//Устанавливаем аттрибут data-manuf со значеним Green Apple
button.setAttribute('data-manuf', 'Green Aplle');

/*** !!! Пользовательские аттрибуты надо ставить через data- ***/

//Получить аттрибут data-price
button.getAttribute('data-price');

//Удалить аттрибут
button.removeAttribute('data-price');

//Псевдомассив элементов
const button2 = document.querySelectorAll('.buyBtn');

//Всем элементам поставить/удалчить что-то нельзя, их надо перд этим перебрать, и уже каждой отдельной ставить:
for (const button of buttons) {
 button.removeAttribute('data-price');
}

// get/remove/setAttribute - низкоуровневые методы ибо напрямую работают с аттрибутами, это может быть неудобно:

const button3 = document.querySelector('.buyBtn');
button.getAttribute('class'); //Если аттрибутов в классе много class="buyBtn c1 c2 btn3", то этот метод вернет мне строку этих классов. И нужный класс придется вырезать, а это гемор. Что делать?

//Для работы с классами есть специальный метод classList
const button4 = document.querySelector('.buyBtn');
button.classList; // метод вернет псевдомассив классов, который можно уже, например, перебрать и что-то установить/убрать

//Добавить
button.classList.add('classFromJs');

//Удалить
button.classList.remove('classFromJs');

//Если такой аттрибут classFromJs есть, то он его удалит, а если нет - добавит
button.classList.toggle('classFromJs');

// Если класс содержит аттрибут 'classFromJs', то вернет true, если нет - false
button.classList.contains('classFromJs');

/** Data-attributes **/
button.dataset //получили DOMStringMap, который хранит все data-attributes в виде свойств без data-, типа псевдомассив 

button.dataset.price //вернет 100. Мы получили свойство дата-атрибута data-price

button.dataset.price = '300'; //Запишем в дата-прайс 300 вместо 100

button.dataset.name = 'White'; //Ставим новый атрибут data-name="White"

button.dataset.myName = 'White'; //Ставим новый атрибут...