Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-26

1 Самая большая часть DOM API сосредоточена в свойствах конкретных элементов. В этом уроке мы рассмотрим только самые базовые свойства, чтобы показать, как они работают в принципе.

2 В повседневной практике программисты постоянно обращаются к<a>документации</a>, чтобы узнать, какие есть свойства и методы у узлов для управления ими.

3 Так выглядит HTML атрибут="значение":

4 Так выглядит DOM свойство:значение:

5 <h2>Атрибуты</h2>

6 У каждого тега в HTML есть атрибуты. Некоторые из них общие для всех, другие - специфичные для конкретных тегов:

7 В примере выше атрибуты id и class можно использовать с любым тегом. Атрибут href только с некоторыми - например, с тегом <a>.

8 Когда браузер загрузил HTML, на его основе строится DOM. Во время обработки, каждый тег становится узлом, а атрибуты - свойствами этого узла. Обычно имена атрибутов и свойств узлов совпадают между собой:

9 Существуют некоторые исключения. Например, атрибут class соответствует свойству className. Есть несколько дополнительных способов для удобной работы с классами.

10 Классов может быть абсолютно любое количество. Они задаются обычной текстовой строкой. Соответственно, если нам нужно изменить этот список, придется работать со строками, что невероятно неудобно.

11 А вот как это можно сделать с помощью DOM-дерева:

12 Есть и дополнительные методы:

13 <ul><li>Метод el.classList.contains("class") проверяет, содержит ли элемент нужный класс, а затем возвращает true или false</li>

14 <li>Метод el.classList.toggle("class") проверяет наличие класса. Если класс есть - удаляет его, если нет - добавляет</li>

15 </ul>Именование - это не единственное различие между атрибутами и свойствами. Отличий значительно больше и они не всегда очевидны. Вот лишь некоторые из них:

16 <ol><li>Атрибут - всегда строка, а свойство - не всегда. Например:

17 Значение свойства rows соответствующего элемента в DOM-дереве будет числом.

18 </li>

19 <li>Атрибуты не чувствительны к регистру:

20 Так писать не стоит, но просто знать об этом факте уже полезно.

21 </li>

22 <li>Атрибут всегда присутствует в HTML, а значит доступен через innerHTML. А вот многие свойства не имеют соответствующих атрибутов. Например, у тега <a> есть свойство hash, но нет такого атрибута.

23 </li>

24 </ol>Как мы увидели выше, атрибут и свойство - это не одно и то же. Поэтому существует набор методов для управления атрибутами:

25 <ul><li>el.hasAttribute(name) - проверяет наличие атрибута</li>

26 <li>el.getAttribute(name) - получает значение атрибута</li>

27 <li>el.setAttribute(name, value) - устанавливает атрибут</li>

28 <li>el.removeAttribute(name) - удаляет атрибут</li>

29 <li>el.attributes - выдает список HTML-атрибутов</li>

30 </ul>Обратите внимание, что они работают именно с атрибутами и их именами, а не свойствами. И позволяют не только их извлекать, но и менять. Возникает закономерный вопрос: поменяется ли атрибут, если поменять свойство и наоборот?

31 Обычно синхронизация работает так: при изменении атрибута свойство обновляется автоматически.

32 Но существуют и исключения. Из этих тезисов не следует делать вывод, что нужно стараться работать через атрибуты. Наоборот, старайтесь работать со свойствами DOM-дерева. Атрибуты используйте только для чтения, чтобы получить то состояние, которое было в DOM на момент инициализации - парсинга HTML:

33 В отличие от свойств, значение атрибута всегда совпадает с тем, что мы видим в HTML. А вот свойства иногда приводятся в нормализованный вид:

34 Нестандартные атрибуты никогда не превращаются в свойства соответствующих элементов DOM-дерева. Например, если мы добавим атрибут href в тег p, то он будет проигнорирован. При этом мы все еще сможем извлечь его через getAttribute.

35 Для работы с произвольными свойствами в HTML зарезервирован специальный атрибут data-*. На месте звездочки может стоять любое слово:

36 Такие атрибуты активно используются в JavaScript- плагинах и позволяют не завязываться на классы. В элементах DOM они доступны через специальное свойство dataset:

37 Внутри объекта dataset имя каждого свойства - это строка после data- в атрибуте. Если имя содержит дефис, то он удаляется, а следующая за ним буква становится заглавной:

38 <h2>Свойства</h2>

39 В зависимости от типа элемента, меняется и набор свойств, кроме тех, что достались в наследство от Node и Element.

40 Чтобы узнать список этих свойств, можно обращаться к спецификации. Они описаны в специальном формате, который несложно понять:

41 Как и в случае с навигацией по DOM-дереву, не нужно запоминать все особенности поведения атрибутов и свойств. Как правило, понимание приходит на практике во время экспериментов методом проб и ошибок.