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

Ответ 1

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

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

<input type="text" value="Name:">

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

Когда браузер проанализирует этот код, будет создан объект HTMLInputElement, и этот объект будет содержать десятки таких свойств, как: accept, accessKey, align, alt, атрибуты, автофокус, baseURI, checked, childElementCount, childNodes, children, classList, className, clientHeight и т.д.

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

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

<input id="the-input" type="text" value="Name:">

соответствующий узел DOM будет иметь свойства id, type и value (среди прочих):

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

• Свойство type является отраженным свойством для атрибута type: получение свойства считывает значение атрибута, а свойство свойства записывает значение атрибута. type не является чистым отраженным свойством, поскольку он ограничен известными значениями (например, действительными типами ввода). Если у вас есть <input type="foo">, тогда theInput.getAttribute("type") дает вам "foo" но theInput.type дает вам "text".

• Напротив, свойство value не отражает атрибут value. Вместо этого это текущее значение входа. Когда пользователь вручную изменит значение поля ввода, свойство value будет отражать это изменение. Поэтому, если пользователь вводит "John" в поле ввода, то:

  theInput.value // returns "John"
  

  в то время как:

  theInput.getAttribute('value') // returns "Name:"
  

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

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

  theInput.value                 // returns "John"
  theInput.getAttribute('value') // returns "Name:"
  theInput.defaultValue          // returns "Name:"
  

Есть несколько свойств, которые непосредственно отражают их атрибут (rel, id), некоторые - прямые отражения с немного разными именами (htmlFor отражает атрибут for, className отражает атрибут class), многие из которых отражают их атрибут, но с ограничениями/модификациями (src, href, disabled, multiple) и т.д. Спектр охватывает различные виды отражения.

Ответ 2

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

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

Абсолютно важно, чтобы два поля ввода, например. текст и флажок ведут себя одинаково. Если поле ввода текста не сохраняет отдельное значение "когда оно было загружено" и "текущее, динамическое" значение, почему этот флажок? Если флажок имеет два значения для проверенного атрибута, почему у него нет двух атрибутов класса и идентификатора? Если вы ожидаете изменить значение поля ввода * текста *, и вы ожидаете, что DOM (т.е. "сериализованное представление" ) изменится и отразит это изменение, почему бы вам не ожидать того же от поля ввода type на проверенном атрибуте?

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

Ответ 3

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

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

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

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

Метод .prop() следует использовать для логических атрибутов/свойств и для свойств, которые не существуют в html (например, window.location). Все другие атрибуты (те, которые вы можете видеть в html) могут и должны по-прежнему обрабатываться с помощью метода .attr().

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