Атрибут и свойство в чем разница

Атрибут и свойство объекта. В чем разница?

Кто может пояснить (или направить в нужном направлении), чем атрибут объекта отличается от свойства объекта? Существуют ли точные определения?

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

Атрибут — изменяемое значение конкретно указывающее на объект. Свойство — значение описывающее объект, но присущее любому колличеству объектов.

Одно свойство может подходить и одному и другому объекту и служит для описания объекта. Атрибут же явный указатель объекта.

Есть люди. Они делятся на взрослых, детей и стариков. На белых, чёрных, жёлтых и так далее.

Так вот «палец», «мозг», это свойства описывающие некий объект. Только вот палец и мозг есть и у людей и у обезьян.

А если мы скажем «Рука» или «Одежда», это уже будет атрибут. Потому когда мы говорим «Рука», мы имеем ввиду человеческую руку, но не ЛАПУ животного. Ровно как и одежду носят люди, но не носят животные.

Свойство, прошу прощения за тафтологию, может быть свойственно многим объектам, атрибут же — явный селектор. Указатель на объект.

Заглянем в Википедию.

Атрибут — в философии — необходимое, существенное, неотъемлемое свойство предмета или явления (в отличие от преходящих, случайных его состояний).

Так что атрибут – это и есть свойство.

Но в той же Википедии:

Атрибут — в мифологии и иконографии предмет, служащий постоянным устойчивым знаком и отличительным признаком мифологического или реального персонажа или аллегорической персонификации какого-либо понятия (молнии Зевса, весы и повязка Фемиды).

Так что атрибут может быть и предметом, но предмет в религии является символом, проводником к какой-то Сущности, за ним всегда стоит гораздо больше, чем он изображает.

Поэтому (заглянем в dic. academic) «Атрибут подразумевает необходимое отношение к некоторой субстанции, но он сам не может быть субстанцией или существовать без нее».

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

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

Например, для такого тега <body > у DOM-объекта будет такое свойство body.id="page" .

Но преобразование атрибута в свойство происходит не один-в-один! В этой главе мы уделим внимание различию этих двух понятий, чтобы посмотреть, как работать с ними, когда они одинаковые и когда разные.

DOM-свойства

Ранее мы уже видели встроенные DOM-свойства. Их много. Но технически нас никто не ограничивает, и если этого мало – мы можем добавить своё собственное свойство.

Работа с атрибутами и свойствами элементов в JavaScript

Атрибуты — это HTML-сущности, с помощью которых мы можем добавить определённые данные к элементам в HTML-коде.

Когда браузер запрашивает некоторую страницу, он получает её исходный HTML-код. После этого он парсит этот код и строит на его основании DOM. Во время этого процесса HTML-атрибуты элементов переводятся в соответствующие DOM-свойства .

Например, браузер, при чтении следующей HTML-строчки кода, создаст для этого элемента следующие DOM-свойства: id , className , src и alt .

Обращение к этим свойствам в коде JavaScript выполняется как к свойствам объекта. Объектом здесь выступает узел (элемент) DOM.

Пример, в котором получим значения DOM-свойств для элемента, приведённого выше, и выведем их значения в консоль:

Некоторые названия DOM-свойств не соответствуют именам атрибутов. Одним из таких является атрибут class . Данному атрибуту соответствует DOM-свойство className . Данное отличие связано с тем, что class является ключевым словом в JavaScript, оно зарезервировано и не может использоваться. Из-за этого разработчики стандарта решили использовать для соответствия какое-то другое название, в качестве которого было выбрано className .

Ещё один нюанс связан с тем, что перевод HTML-атрибутов, заданных в исходном коде документа, в DOM-свойства не всегда осуществляется один к одному.

Если элемент имеет нестандартный HTML-атрибут, то свойство, соответствующее ему в DOM, не создаётся .

Другое отличие связано с тем, что значения определённых HTML-атрибутов и соответствующих им DOM-свойств могут быть различными. Т.е. атрибут может иметь одно значение, а DOM-свойство, созданное на его основе – другое .

Одним из таких атрибутов является checked .

Значение HTML-атрибута checked в данном случае – это пустая строка. Но, свойство, соответствующее данному атрибуту в DOM, будет иметь значение true . Т.к. по правилам стандарта для установления true достаточно лишь упоминание этого атрибута в HTML-коде и при этом не важно какое он будет иметь значение.

При этом даже если мы в HTML-коде не укажем атрибут checked для элемента input с типом checkbox , то для него в DOM всё равно будет создано свойство checked , но оно будет равно false .

Кроме этого, JavaScript позволяет также работать с атрибутами. Для этого в DOM API имеются специальные методы. Но их желательно использовать только тогда, когда вам действительно нужно работать с данными именно так.

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

Основные отличия между DOM-свойствами и атрибутами:

значение атрибута – это всегда строка, а значение DOM-свойства – определённый тип данных (не обязательно строка);
имя атрибута – регистронезависимо, а DOM-свойства — регистрозависимо. Т.е. в HTML-коде мы можем, например, HTML-атрибут id написать, как Id , ID и т.д. То же касается и имени атрибута, которые мы указываем в специальных методах JavaScript для работы с ним. Но к соответствующему DOM-свойству мы можем обратиться только по id и никак по-другому.

Читать:

Что делать если не работает клавиша на клавиатуре механике

Работа с DOM-свойствами элемента

Работа со свойствами элементов в JavaScript как уже было отмечено выше осуществляется как со свойствами объектов.

Но для того, чтобы обратиться к свойству некоторого элемента, его необходимо сначала получить. Получить DOM-элемент в JavaScript можно, например, с помощью универсального метода querySelector , а коллекцию DOM элементов, например, посредством querySelectorAll .

В качестве первого примера рассмотрим следующий HTML-элемент:

На базе него разберём как осуществляется получение DOM-свойств, их изменение и добавление новых.

Чтение значений DOM-свойств:

Изменение значений DOM-свойств:

Пример, в котором выведем в консоль все значения классов, которые есть у элементов p на странице:

Пример, в котором установим всем элементам с классом content свойство lang со значением «ru»:

Атрибуты элементов и методы для работы с ними

Атрибуты изначально задаются в HTML-коде. Они хоть и связаны, некоторым образом, со свойствами, но это не одно и тоже. В большинстве случаев следует работать именно со свойствами, а к атрибутам обращаться только тогда, когда это действительно нужно.

Значения атрибутов, в отличие от DOM-свойств, как это уже было отмечено выше всегда является строкой.

В JavaScript для выполнения операций, связанных с атрибутами, имеется четыре метода:

.hasAttribute(‘имя_атрибута’) – проверяет наличие указанного атрибута у элемента. Если проверяемый атрибут есть у элемента, то данный метод возвращает true , в противном случае — false .
.getAttribute(‘имя_атрибута’) – получает значение атрибута. Если указанного атрибута нет у элемента, то данный метод возвращает пустую строку («») или null .
.setAttribute(‘имя_атрибута’, ‘значение_атрибута’) – устанавливает указанный атрибут с указанным значением элементу. Если указанный атрибут есть у элемента, то данный метод тогда просто изменит ему значение.
.removeAttribute(‘имя_атрибута’) — удаляет указанный атрибут у элемента.

Очень интересный пример с атрибутом value .

Пример с атрибутом value

Получим значение атрибута value и DOM-свойства value :

Из этого примера видно, что, при измении атрибута value , браузер автоматически изменяет в соответствии с ним DOM-свойство value .

Теперь давайте проделаем действия, наоборот, а именно изменим значение DOM-свойства и проверим изменится ли значение атрибута:

Из этого примера видно, что не всегда изменение DOM-свойства приводит к соответствующему изменению атрибута. Т.е. в этом случае изменение DOM-свойства value не изменяет соответствующий ему атрибут .

Тоже самое произойдёт, когда пользователь будет вводить текст в это поле. В DOM-свойстве value будет находится действительное значение, а в соответствующем ему атрибуте изначальное или то, которое мы установили, например, с помощью метода setAttribute .

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

Даже в случае, когда вам нужно получить начальное значение value , которое мы установили в HTML, можно воспользоваться свойством. Свойство, содержащее начальное значение атрибута value называется defaultValue .

Ещё один очень интересный пример, но теперь с атрибутом href.

Пример с атрибутом href

Пример, в котором нам нужно получить значение ссылки так, как оно было установлено в HTML.

В этом примере атрибут href и DOM-свойство href содержат разные значения. В атрибуте href — то, что мы установили в коде, а в DOM-свойстве — полный URL. Это различие продиктовано стандартом, в соответствии с которым браузер должен привести значение href к полному URL.

Поэтому если нам нужно получить то, что находится в атрибуте, то без метода getAttribute в этом случае не обойтись.

В завершении разберём ещё атрибут selected .

Пример с атрибутом selected

Пример, в котором показано как можно получить значение выбранной опции select :

Пример, в котором показано как можно получить выбранные значения опций в элементе select :

Ещё один способ работы с атрибутами (свойство attributes)

В JavaScript у каждого элемента имеется свойство attributes , с помощью которого можно получить все его атрибуты в виде объекта NamedNodeMap .

Данный способ может находить применение, когда вам нужно, например перебрать все атрибуты элемента.

Доступ к атрибуту в этой коллекции осуществляется по его индексу или с помощью метода item . Отсчёт атрибутов в этой коллекции ведётся с 0.

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

Кроме этого, работать с этой коллекцией можно также посредством следующих методов :

.getNamedItem(‘имя_aтpибyтa’) – получает значение указанного атрибута (если указанный атрибут отсутствует у элемента, то в качестве результата получим null ).
.setNamedItem(‘aтpибyт_yзeл’) – добавляет новый атрибут к элементу или обновляет значение у существующего. Для создания атрибута необходимо использовать метод document.createAttribute() , которому в качестве параметра необходимо передать имя атрибута. После этого созданному атрибуту необходимо присвоить значение с помощью свойства value .
.removeNamedItem(‘имя_атрибута’) – удаляет указанный атрибут у элемента (в качестве результата возвращает удалённый атрибут).

Пример, работы с атрибутами через методы getNamedItem, setNamedItem и removeNamedItem:

Атрибуты и свойства элементов документа (HTML, XHTML)

Атрибут элемента HTML — это сущность, которая используется для определения характеристик html-элемента.

Атрибут элемента помещается внутри открытого тега элемента и состоит из двух частей:

имя атрибута — это свойство элемента, которое вы хотите определить или изменить;
значение — это значение, которое вы хотите установить для указанного выше свойства (значение атрибута всегда помещается в кавычки ).

Имена и значения атрибутов в HTML не зависят от регистра, однако консорциум World Wide Web (W3C) рекомендует использовать атрибуты и значения атрибутов в нижнем регистре.

Атрибуты могут быть стандартными и нестандартными, причем стандартный атрибут для одного тега может быть нестандартным для другого . Например, атрибут «type» является стандартным для элемента <input> (HTMLInputElement), но не является стандартным для <body> (HTMLBodyElement).

Стандартные атрибуты описаны в спецификации для соответствующего класса элемента.

Когда браузер парсит HTML, чтобы создать DOM-объекты для тегов, он распознаёт стандартные атрибуты элементов документа и создаёт свойства объектов DOM для них.