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

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

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

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

DOM-свойства

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

DOM-узлы – это обычные объекты JavaScript. Мы можем их изменять.

Например, создадим новое свойство для document.body :

Мы можем добавить и метод:

Также можно изменять встроенные прототипы, такие как Element.prototype и добавлять новые методы ко всем элементам:

Итак, DOM-свойства и методы ведут себя так же, как и обычные объекты JavaScript:

HTML-атрибуты

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

Таким образом, когда у элемента есть id или другой стандартный атрибут, создаётся соответствующее свойство. Но этого не происходит, если атрибут нестандартный.

Пожалуйста, учтите, что стандартный атрибут для одного тега может быть нестандартным для другого. Например, атрибут «type» является стандартным для элемента (HTMLInputElement), но не является стандартным для (HTMLBodyElement). Стандартные атрибуты описаны в спецификации для соответствующего класса элемента.

Мы можем увидеть это на примере ниже:

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

Конечно. Все атрибуты доступны с помощью следующих методов:

Эти методы работают именно с тем, что написано в HTML.

Вот демонстрация чтения нестандартного свойства:

У HTML-атрибутов есть следующие особенности:

Расширенная демонстрация работы с атрибутами:

Пожалуйста, обратите внимание:

Синхронизация между атрибутами и свойствами

Когда стандартный атрибут изменяется, соответствующее свойство автоматически обновляется. Это работает и в обратную сторону (за некоторыми исключениями).

В примере ниже id модифицируется как атрибут, и можно увидеть, что свойство также изменено. То же самое работает и в обратную сторону:

Но есть и исключения, например, input.value синхронизируется только в одну сторону – атрибут → значение, но не в обратную:

DOM-свойства типизированы

DOM-свойства не всегда являются строками. Например, свойство input.checked (для чекбоксов) имеет логический тип:

Есть и другие примеры. Атрибут style – строка, но свойство style является объектом:

Хотя большинство свойств, всё же, строки.

Нестандартные атрибуты, dataset

При написании HTML мы используем много стандартных атрибутов. Но что насчёт нестандартных, пользовательских? Давайте посмотрим, полезны они или нет, и для чего они нужны.

Иногда нестандартные атрибуты используются для передачи пользовательских данных из HTML в JavaScript, или чтобы «помечать» HTML-элементы для JavaScript.

Также они могут быть использованы, чтобы стилизовать элементы.

Например, здесь для состояния заказа используется атрибут order-state :

Это потому, что атрибутом удобнее управлять. Состояние может быть изменено достаточно просто:

Но с пользовательскими атрибутами могут возникнуть проблемы. Что если мы используем нестандартный атрибут для наших целей, а позже он появится в стандарте и будет выполнять какую-то функцию? Язык HTML живой, он растёт, появляется больше атрибутов, чтобы удовлетворить потребности разработчиков. В этом случае могут возникнуть неожиданные эффекты.

Чтобы избежать конфликтов, существуют атрибуты вида data-*.

Вот переписанный пример «состояния заказа»:

Использование data-* атрибутов – валидный, безопасный способ передачи пользовательских данных.

Пожалуйста, примите во внимание, что мы можем не только читать, но и изменять data-атрибуты. Тогда CSS обновит представление соответствующим образом: в примере выше последняя строка (*) меняет цвет на синий.

Итого

Методы для работы с атрибутами:

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

Задачи

Получите атрибут

Напишите код для выбора элемента с атрибутом data-widget-name из документа и прочитайте его значение.

Источник

В чем разница между свойствами и атрибутами в HTML?

После изменений, внесенных в jQuery 1.6.1, я пытался определить разницу между свойствами и атрибутами в HTML.

Глядя на список заметок о выпуске jQuery 1.6.1 (внизу), кажется, что свойства и атрибуты HTML можно классифицировать следующим образом:

Свойства: Все, которые имеют либо логическое значение, либо рассчитанное UA, например selectedIndex.

Атрибуты: «Атрибуты», которые можно добавить к элементу HTML, который не является ни логическим, ни содержащим значение, созданное UA.

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

Например, этот элемент HTML:

имеет 2 атрибута ( type и value ).

Когда узел DOM создается для данного элемента HTML, многие его свойства относятся к атрибутам с одинаковыми или похожими именами, но это не отношение один к одному. Например, для этого элемента HTML:

Свойство id является отраженное свойство для атрибута id : получение свойства считывает значение атрибута, а установка свойства записывает значение атрибута. id является отраженным свойством pure, оно не изменяет и не ограничивает значение.

Свойство value отражает текстовое содержимое current внутри поля ввода, а атрибут value содержит текстовое содержимое initial атрибута value из исходного кода HTML.

Ответы уже объясняют, как атрибуты и свойства обрабатываются по-разному, но я действительно хотел бы указать, насколько полностью безумно это так. Даже если это в какой-то степени спецификация.

Это безумие, когда некоторые атрибуты (например, id, class, foo, bar) сохраняют только один вид значений в DOM, тогда как некоторые атрибуты (например, checked, selected) сохраняют два значения; то есть значение «когда оно было загружено» и значение «динамическое состояние». (Разве DOM не должен представлять состояние document в полной мере?)

Дифференциация «это логический атрибут» просто не имеет для меня никакого смысла или, по крайней мере, не является достаточной причиной для этого.

хорошо, они определены w3c, что является атрибутом и что является свойством http://www.w3.org/TR/SVGTiny12/attributeTable.html

но в настоящее время attr и prop не сильно отличаются друг от друга и существуют почти одинаково

но они предпочитают опору для некоторых вещей

Краткое изложение предпочтительного использования

ну, на самом деле вам не нужно что-то менять, если вы используете attr или prop или оба, оба работают но я видел в моем собственном приложении, что prop работал там, где atrr не работал, поэтому я взял в своем приложении 1.6 prop =)

Атрибут HTML и свойство DOM

Атрибуты определяются HTML. Свойства определяются DOM (Объектная модель документа).

Некоторые атрибуты HTML не имеют соответствующих свойств. colspan is один пример.

Некоторые свойства DOM не имеют соответствующих атрибутов. textContent это один пример.

Эта последняя категория сбивает с толку, пока вы не поймете это общее правило:

Атрибуты инициализировать свойства DOM, а затем они готовы. Имущество значения могут измениться; значения атрибута не могут.

Когда пользователь вводит «Sally» в поле ввода, элемент DOM value свойство становится «Салли». Но атрибут HTML value остается без изменений, если вы узнаете, спрашиваете ли вы об этом элемент ввода атрибут: input.getAttribute(‘value’) возвращает «Bob».

Атрибут HTML value указывает значение initial; DOM value свойство является значением current.

Установка свойства disabled отключает или включает кнопку. Значение свойства имеет значение.

Различия в свойствах и атрибутах HTML:

Давайте сначала посмотрим на определения этих слов, прежде чем оценивать разницу в HTML:

Английское определение:

В контексте HTML:

Когда браузер анализирует HTML, он создает древовидную структуру данных, которая в основном представляет собой представление HTML в памяти. Это древовидная структура данных содержит узлы, которые являются HTML-элементами и текстом. Атрибуты и свойства относятся к этому следующим образом:

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

Кроме того, у разных элементов DOM разные свойства. Например, элемент имеет свойство value, которого нет в свойстве

Пример:

Давайте возьмем следующий HTML-документ:

Затем мы проверяем

Мы видим следующие свойства DOM (chrome devtools, показаны не все свойства):

Источник

В чем разница между свойствами и атрибутами в HTML?

после изменений, внесенных в jQuery 1.6.1, я пытался определить разницу между свойствами и атрибутами в HTML.

глядя на список на jQuery 1.6.1 примечания к выпуску (внизу), кажется, можно классифицировать свойства и атрибуты HTML следующим образом:

свойства: все, что имеет логическое значение или вычисляется UA, например selectedIndex.

атрибуты: «Атрибуты», которые могут быть добавлены к HTML-элементу, который не является логическим и не содержит сгенерированное значение UA.

3 ответов

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

например, этот элемент HTML:

имеет 2 атрибута ( type и value ).

для данного объекта узла DOM свойства являются свойствами этого объекта, а атрибуты-элементами attributes свойство этого объекта.

когда узел DOM создается для данного элемента HTML, многие его свойства относятся к атрибуты с одинаковыми или похожими именами, но это не один-к-одному отношения. Например, для этого элемента HTML:

на value свойство отражает настоящее текстовое содержимое внутри поля ввода, тогда как содержит нач текст-контент value атрибут из исходного кода HTML.

поэтому, если вы хотите знать, что в настоящее время находится внутри текстового поля, прочитайте свойство. Если вы, однако, хотите знать, каким было начальное значение текстового поля, прочитайте атрибут. Или вы можете использовать defaultValue свойство, которое является чистым отражением value атрибут:

ответы уже объясняют, как атрибуты и свойства обрабатываются по-разному, но я действительно хотел бы указать, насколько полностью безумие это. Даже если это в какой-то степени спекуляция.

Это безумие, иметь некоторые атрибуты (например,id, класс, фу, бар) сохранить только один вид значения в DOM, в то время как некоторые атрибуты (например,проверил, выбранный), чтобы сохранить два значения, то есть значения «, когда он был загружен» и значение «динамического состояния». (Разве DOM не должен представлять состояние документ в полной мере?)

совершенно необходимо, чтобы два поля ввода, например a текст и a флажок ведут себя точно так же, как. Если в поле ввода текста не сохраняется отдельное значение» при загрузке «и значение» текущее, динамическое», почему установлен флажок? Если флажок имеет два значения the проверил атрибут, почему у него нет двух для его класс и id атрибуты? Если вы ожидаете изменить значение a текст * поле ввода*, и вы ожидаете, что DOM (т. е. «сериализованное представление») изменится и отразит это изменение, почему бы вам не ожидать того же от вход

ну, они указаны w3c, что такое атрибут и что такое свойство http://www.w3.org/TR/SVGTiny12/attributeTable.html

но в настоящее время attr и prop не так уж отличаются, и есть почти то же самое

но они предпочитают опору на некоторые вещи

резюме предпочтительного использования

ну на самом деле вам не нужно что-то менять, если вы используете attr или prop или оба, оба работают но я видел в своем собственном приложении, что prop работал там, где atrr не так я взял в своем 1.6 app prop =)

Источник

В чем разница между атрибутом и свойством?

Кажется, это означает одно и то же. Но какой термин больше подходит в каком контексте?

В общих терминах (и при обычном использовании английского языка) термины означают одно и то же.

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

Чтобы еще больше запутать вещи, изменения в свойствах обычно обновляют атрибуты.

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

Эти слова существовали задолго до появления информатики.

Часто атрибут используется для описания механизма или реальной вещи.

Свойство используется для описания модели.

Например, документ (сидящий на вашем столе) может иметь атрибут, который является черновиком.

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

Точное значение этих терминов будет во многом зависеть от того, на каком языке/системе/вселенной вы говорите.

В HTML/XML атрибут является частью тега со знаком равенства и значением, а свойство ничего не значит, например.

Поэтому нам нужно больше информации о том, какой домен вы обсуждаете.

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

В этом примере элемент DOM input имеет свойство type со значением «checkbox» и свойство checked со значением true (обратите внимание, что это значение отличается от значения внутри атрибута HTML).

Используя Firebug, вы можете наблюдать за поведением свойств, щелкая элемент и выбирая «DOM view».

Источник

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

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

3 ответа 3

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

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

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

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

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

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

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

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

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

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

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

Источник