Все элементы в DOM-дереве могут обладать атрибутами или свойствами, и и те,
и другие могут быть совершенно разными: они могут обозначать геометрию объекта,
его высоту, ширину и любые другие его параметры: классы,
которые с ним связаны, его метаописания.
И для работы со всеми ними разработаны методы,
которые позволяют получить к ним доступ.
И первый набор методов, которые мы рассмотрим для работы
с атрибутами — это так называемые star attribute.
Мы получаем наш элемент формы с помощью getElementById, и впоследствии,
когда вы будете видеть переменную form — это всегда наш элемент формы.
И вызываем у нее метод getAttribute.
В качестве параметра он получает имя атрибута,
который мы хотим, к которому мы хотим обратиться,
а в качестве возвращаемого значения в виде строки — содержимое этого атрибута.
И таким образом мы получаем значение атрибута action.
Также есть метод hasAttribute,
который проверяет наличие атрибута, и мы проверяем,
есть ли у формы атрибут method, и получаем false, так как его нету.
Метод setAttribute, который устанавливает значение атрибута,
и мы устанавливаем значение method в POST,
и он принимает имя атрибута и его значение.
При повторном вызове метод has уже вернет нам true,
так как новый атрибут уже был добавлен в DOM-дерево.
Метод remove для удаления атрибута по его имени,
и снова вызываем метод has и видим, что атрибут был успешно удален.
Наряду со множеством атрибутов, описанных в спецификации по html,
разработчики спецификации подумали о том, что этих атрибутов может быть недостаточно
и люди захотят записывать внутри html-элементов какое-то
метаописание и какие-то параметры, какие-то значения, какие-то статусы,
возможно, и для этого нужны будут специальные атрибуты.
И так были разработаны так называемые data-атрибуты.
Это атрибуты, которые начинаются с префикса data-,
а далее следует название атрибута в виде латинских букв, цифр и знаков дефиса.
И с помощью них можно записывать совершенно произвольные
значения под совершенно произвольным именем.
Но разработчики пошли дальше.
Они подумали: «Вот есть data-атрибуты,
у них есть вполне конкретное специальное предназначение.
К ним, безусловно, можно обращаться, как к обычным атрибутам с помощью getAttribute,
передав их полное название в качестве параметра.
Но это будет достаточно долго, неудобно, и давайте придумаем что-нибудь попроще».
И разработчики сделали специальный объект dataset,
который есть внутри любого DOM-элемента,
который содержит значения всех data-атрибутов,
которые есть внутри этого элемента.
И они подумали: «data-атрибуты имеют вполне конкретное название,
они начинаются с префикса data-.
Давайте сделаем обращение к ним максимально простым».
Поэтому они преобразовывают имя атрибута,
убирают от него префикс data-, а все дефисы и последующие
буквы преобразуют к верхнему регистру, так называемому CamelCase.
Таким образом имя атрибута становится валидным идентификатором
для переменной в JavaScript, и мы можем обращаться к нему без одинарных
или двойных кавычек, через так называемую дот-нотацию.
И мы можем с помощью этого как обратиться к атрибуту
на чтение, так и установить новое значение атрибута,
которые будет прописано в DOM-дерево уже в развернутом data- виде.
У всех элементов есть как атрибуты, так и свойства.
И порой это совершенно разные вещи.
Например, у элемента формы в нашем случае есть атрибут action,
нет атрибута method, и его значение используется по умолчанию,
и есть параметр атрибут id.
Также у этого DOM-элемента есть свойства.
Есть свойство action, которое указывает на то, куда будет отправлен наш запрос.
Есть свойство method, и оно принимает значение get,
так как это значение по умолчанию, несмотря на то,
что в нашей html-форме не указан метод для ее отправки.
И есть свойство id.
Слава Богу, id в этом месте равно значение атрибута
id и указывает то же самое строковое значение.
Порой атрибуты и свойства ведут себя очень непредсказуемо,
и значения у них могут сильно отличаться.
Поэтому я бы настоятельно рекомендовал использовать атрибуты в большинстве
случаев вместо свойств, а если вы хотите пользоваться свойствами,
то использовать самые простые и общие свойства,
такие как id и className, которые всегда ведут себя предсказуемо.
Атрибут class — это, пожалуй,
один из самых широко используемых атрибутов в html.
С помощью него вы можете помечать элементы для того,
чтобы наложить на них css-свойства и настроить их визуальное отображение,
для того чтобы выбрать их с помощью селектора,
и вообще объединить в какие-то логически связанные группы.
Пометить несколько элементов, которые для вас важны,
какими-то своеобразными метками, а потом с ними работать.
Для работы с атрибутом class есть свойство className,
которое в строковом представлении содержит значение атрибута class в
html и представляет весь набор классов,
который указан у этого html-элемента в виде строки.
Но пользоваться им не очень удобно.
Для того чтобы отредактировать набор классов: убрать класс,
добавить класс, вам необходимо устанавливать это свойство
и заменять строчку уже существующую на новую с помощью конкатенации,
с помощью регулярных выражений или с помощью замены внутри строки.
Это усложняет и поиск, и выборку, и проверку наличия класса.
Поэтому разработчики создали новый, достаточно современный метод classList,
который содержит набор методов для работы с классами.
Прежде всего, это метод add, который добавляет класс к списку уже существующих,
метод item, который получает класс по его
индексу и по порядковому расположению его в html-элементе,
метод contains, который позволяет вам по имени
класса проверить, есть ли он внутри этого элемента, и метод remove,
который позволяет вам удалить класс из html-элемента.
Конев Антонразработчик интерфейсов, Яндекс
Сергей Жигаловразработчик интерфейсов, Яндекс
Чистяков Денисруководитель службы разработки, Яндекс
