Атрибуты и свойства в Javascript

В HTML мы объявляем элементы и передаем значения в атрибуты. В JavaScript, в частности в DOM, у нас есть свойства, доступные при запросе HTML — элементов через DOM. “Как свойства соотносятся с атрибутами HTML?” В этой статье мы ответим на такие вопросы, как “Что такое DOM?” и “Чем атрибут отличается от свойства?”.

Прочитав эту статью, вы получите новые знания о DOM, атрибутах HTML и свойствах JavaScript DOM — поскольку они могут быть очень похожи, но различны. Давайте их исследуем.

Что такое ДОМ?

В веб-приложениях, которые мы пишем, у нас есть HTML. Как только браузер запросит вашу HTML-страницу, настанет время для того, чтобы DOM ожил! Глубоко внутри вашего браузера, когда страница визуализируется, DOM (объектная модель документа) создается из исходного кода HTML, который анализируется.

HTML — это структурный язык, и эта структура (короче говоря) сопоставляется с представлением JavaScript этого исходного кода-в конечном счете, давая нам “DOM”. HTML — это древовидная структура, мы имеем дело с родительскими и дочерними элементами, поэтому, естественно, DOM-это объект JavaScript, следующий аналогичной структуре.

Например, HTML, такой как <bodyid=»ultimate»>, был бы составлен в DOM-объект, к которому мы могли бы получить доступ через document.body.id. Если вы сделали что-то подобное, вы уже использовали DOM:

// возвращает документ объекта узла
DOM.querySelector(‘input’);

DOM дает нам возможность общаться с различными частями нашей HTML — структуры, обновлять их, создавать их, удалять их- вы называете это. Поскольку DOM-это всего лишь объект JavaScript, все, что нам нужно, — это знание JavaScript, чтобы начать работу.

Когда наш JavaScript  -код выполняется браузером, DOM «поставляется» нам из среды, в которой мы работаем, т. е. В а Node.js среда нет DOM, и поэтому ссылки на такие вещи, как document, не будут работать.
JavaScript-это язык программирования, DOM-это API, предоставляемый нам в глобальном масштабе через браузер для взаимодействия.

Имея это в виду, мы знаем, как писать HTML и объявлять атрибуты. И мы знаем, как запрашивать наш HTML-код через DOM в JavaScript. Это краткое различие, и это только начало, так как есть еще много чего узнать об атрибутах и свойствах — давайте продолжим.

Атрибуты и свойства

В HTML есть атрибуты. В JavaScript DOM мы можем обновлять эти атрибуты с помощью свойств (и даже вызовов методов), которые существуют на элементах, известных как узлы DOM, когда мы делаем запрос. Давайте рассмотрим атрибут, а затем перейдем к свойствам.

Атрибут может быть чем-то вроде значения, например, с этим фрагментом HTML:

<inputtype=»text» value=»0″>

Когда приведенный выше HTML-код будет проанализирован и визуализирован, значение атрибута будет равно «0» и будет иметь тип string, а не number. Что нас интересует, так это собственность. Свойство дает нам доступ через JavaScript для чтения и записи различных значений. Добро пожаловать в ДОМ!

В простом JavaScript давайте запросим наш входной элемент:

const input = документ.querySelector(‘input’);
console.log(input.value); // ‘0’

Когда мы обращаемся к input.value, мы говорим со свойством, а не с атрибутом. Теперь, если мы хотим обновить нашу стоимость, мы используем это свойство:

const input = документ.querySelector(‘input’);
// обновить значение свойства
input.value = 66;
// чтение свойства current value
console.log(input.value); // ’66’

Это обновляет DOM, нашу модель JavaScript, и не обновляет HTML. Если мы проверим элемент, то увидим value=»0″ — но фактическое значение DOM равно 66. Это связано с тем, что обновление свойства не обязательно приводит к обновлению атрибута, и это обычная проблема для разработчиков JavaScript всех уровней квалификации.

Если мы действительно хотим обновить атрибут HTML-элемента, мы можем сделать это с помощью метода setAttribute:

const input = документ.querySelector(‘input’);
// обновите атрибут value
input.setAttribute(‘value’, 99);
// чтение свойства current value
console.log(input.value); // ’99’

Самое интересное здесь то, что наш HTML будет обновляться от вызова метода setAttribute, давая нам точное отражение при проверке элемента — однако он также обновляет и свойство DOM! Вот почему input.valueравен 99 при выходе из системы.

Почему именно эти двое? DOM-это модель JavaScript, поэтому нам не нужно постоянно обновлять атрибуты HTML, это действительно может быть пустой тратой ресурсов. Если нам нужно использовать только DOM, мы должны делать это, а не хранить состояние внутри HTML. DOM оптимизирован и быстр, поэтому использование чего-то вроде value над setAttribute имеет гораздо больше смысла.

DOM просто немного странен в некоторых вещах, и то, как вы имеете дело с атрибутами, не является исключением. Существует несколько способов работы с атрибутами элементов. Под атрибутами я подразумеваю такие вещи, как идентификатор в <divid=»cool»></div>. Иногда вам нужно установить их. Иногда их нужно достать. Иногда существуют причудливые вспомогательные API. Иногда нет.

Предположим, что el-это элемент DOM в вашем JavaScript. Допустим, вы сделали что-то вроде constel = document.querySelector(«#cool»); и соответствующий <divid=»cool»> или что-то еще. Некоторые атрибуты также являются атрибутами самого объекта DOM, поэтому, если вам нужно установить идентификатор или заголовок, вы можете это сделать:

el.id; // «cool»
el.title = «мой титул»;
el.title; // «мой титул»;

Другие, которые работают так же, — это lang, align и все большие события, такие как onclick.

Тогда есть атрибуты, которые работают аналогично этому, но вложены глубже. Атрибут стиля таков. Если вы войдете в el.style, то увидите тонну объявлений стилей CSS. Вы можете легко получить и установить их:

el.style.color = «красный»;
module.style.backgroundColor = «черный»;

Вы также можете получить вычисленные цвета таким образом. Если вы делаете module.style.color в надежде получить цвет элемента из ворот, вы, вероятно, не получите его. Для этого вам придется сделать:

letstyle = window.getComputedStyle(el);
style.color; // все, что в CSS победило

Но не все атрибуты похожи на первоклассные атрибуты, подобные этому:

el[‘aria-hidden’] = true; // нет

Это “работает” в том смысле, что он устанавливает это как свойство, но не устанавливает его в DOM должным образом. Вместо этого вам придется использовать общие функции setter и getter, которые работают для всех атрибутов, например:

el.setAttribute(«aria-hidden», true);
el.getAttribute(«ария-скрытая»);

У некоторых атрибутов есть причудливые помощники. Самый модный — это classList для атрибутов класса. На таком элементе, как:

<divclass=»modulebig»></div>

Ты бы так и сделал:

el.classList.value; // «модуль большой»
el.classList.length; // 2
el.classList.add(«прохладный»); // добавляет класс «круто», поэтому «модуль большой классный»
el.classList.remove(«большой»); // удаляет «большой», так что модуль «прохладный»
el.classList.toggle(«большой»); // добавляет «большой», потому что он пропал без вести (ходит взад и вперед)
el.classList.contains(«модуль»); // true

Есть еще кое-что, и сам classList ведет себя как массив, так что вы можете forEach его и тому подобное. Это довольно веская причина для использования классов, так как DOM API вокруг них очень удобен. Еще один тип атрибута, который имеет несколько причудливую справку — это data -*. Допустим,у вас есть:

<div data-active=»true» data-placement=»top right» data-extra-words=»hi»>test</div>

У вас есть набор данных:

el.dataset;
/*
{
active: «true»,
«placement», «top right»
*/

el.dataset.active; // «true»
el.dataset.extraWords; // «hi», обратите внимание на преобразование в camelCase

el.dataset.active = «false»; // сеттеры работают следующим образом