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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник

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

Когда браузер загружает страницу, он «читает» (также говорят: «парсит») 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 из документа и прочитайте его значение.

Источник

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

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

3 ответа 3

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

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

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

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

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

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

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

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

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

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

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

Источник

В чем разница между свойствами и атрибутами в 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 =)

Источник

Форум

Справочник

DOM: свойства VS атрибуты

У DOM-элементов в javascript есть свойства и атрибуты. И те и другие имеют имя и значение.
Поэтому иногда разработчики путают одно с другим.

Между ними есть соответствие, но оно не однозначное и его лучше понимать.

Свойства DOM-элементов

Узлы DOM являются объектами с точки зрения javascript. А у объектов есть свойства. Поэтому любому узлу можно назначить свойство, используя обычный синтаксис.

Значением свойства может быть любой объект. Это же javascript.

DOM-Атрибуты

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

Атрибуты можно добавлять, удалять и изменять. Для этого есть специальные методы:

setAttribute(name, value) Устанавливает значение атрибута getAttribute(name) Получить значение атрибута hasAttribute(name) Проверить, есть ли такой атрибут removeAttribute(name) Удалить атрибут

Имя атрибута является регистронезависимым.

Значением атрибута может быть только строка. Это же HTML..

DOM-атрибуты VS DOM-свойства

Все, вроде бы, ясно. Есть свойства. Есть атрибуты.

Но создатели javascript решили (с лучшими намерениями) запутать ситуацию и создать искусственное соответствие между свойством и атрибутом.

Синхронизация

А именно, браузер синхронизирует значения ряда свойств с атрибутами. Если меняется атрибут, то меняется и свойство с этим именем. И наоборот.

Для «левых» атрибутов браузер ничего не гарантирует

Возможные значения

Создатели IE поступили хитро: setAttribute ставит оба свойства ( abc и ABC ).. Ну а getAttribute возвращает первое попавшееся из них, с учетом регистронезависимости. Если таких свойств несколько, то невозможно сказать, какое именно он вернет.

Запустите этот пример в IE6/7 и, например, в Firefox, чтобы лучше понять различия.

Вообще говоря, браузер не гарантирует синхронизацию атрибута и свойства.

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

В первой строке атрибуту присвоено значение-объект. Firefox тут же автоматически преобразовал его в строку. А IE, в нарушение стандартов, оставил атрибут объектом.

Вообще, обычно свойств хватает с головой.

В IE также является исключением ключевое атрибут for, для него используется свойство forHtml.

Атрибуту for тега соответствует свойство htmlFor:

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

ничего не понятно из статьи ((((((
все как-то не систематично и непонятно
какие-то свойства и атрибуты
что это вообще такое?

Смотри братуха, вот что здесь сказано: Имена свойств регистрозависмые а имена атрибутов ето ключи обьекта и не чувствительны к регистру. В СУБД MYSQL установленной на операционной системе Windows тоже самое с именами атрибутов обьекта, то есть с именами ключей-атрибутов таблицы реляционных данных.

Так и не понял что такое атрибут и свойство((((

Обновил статью. Надеюсь, стало понятнее.

Огромное спасибо!
Первая строка статьи очень полезная .

Так а почему ты сидишь на этом сайтике? И читаешь статьи, которые авторы печатают с чистым сердцем, чтобы разъяснить ситуацию другим. Авторам, спасибо, а таким Гостям, как этот чёрт желаю побольше ситуаций в которых они будут свои нервы тренировать сдерживать.

в приведённых Вами учебниках много ненужной воды. Лучше суть понять читая такие краткие и понятные статьи, а уж потом читать макулатуру, уже отталкиваясь от уже уяснённой модели.

Мне кажется, проще сказать, что свойства в JavaScript аналогичны свойствам в любом объектно-ориентированном языке. С тем исключением, что иногда свойства получают те же значения, что и атрибуты. Но не всегда.
И еще мне кажется, что лучше пользоваться этой связью насколько возможно меньше. Атрибуты получать и устанавливать через getAttribute и setAttribute соответственно, в обход свойств. Меньше путаницы в итоге получится.

Автор же ясно дал понять, что свойств хватает с головой,
т.е. атрибуты лучше не использовать, и они не нужны

Спасибо за 1-вый комментарий!Теперь точно понял.

Вот тут Cy1on идеально всё объяснил. Со статьи сложно было понять, а после прочтения комментария стало всё ясно.

Отличная статья!
Я легко и быстро понял разницу.
Это именно то, что нужно.

Источник