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

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

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

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

Мысли?

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

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

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

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

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

Для данного объекта узла 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), и т.д. на. Спецификация охватывает различные виды отражения.

Прочитав ответ Симе Видаса , я искал больше и нашел очень простое и легкое для понимания объяснение в угловых документах .

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

---

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

• Некоторые атрибуты HTML имеют отображение 1: 1 на свойства. idэто один пример.

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

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

• Многие атрибуты HTML отображаются в свойствах ... но не так, как вы думаете!

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

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

Например, когда браузер выполняет рендеринг <input type="text" value="Bob">, он создает соответствующий узел DOM со valueсвойством, инициализированным как «Bob».

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

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

---

disabledАтрибут является еще одним своеобразным примером. disabledСвойство кнопки falseпо умолчанию, поэтому кнопка включена. Когда вы добавляете disabledатрибут, только его наличие инициализирует disabledсвойство кнопки, trueпоэтому кнопка отключается.

Добавление и удаление disabledатрибута отключает и включает кнопку. Значение атрибута не имеет значения, поэтому вы не можете включить кнопку, написав<button disabled="false">Still Disabled</button>.

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

Атрибут HTML и свойство DOM - это не одно и то же, даже если они имеют одинаковые имена.

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

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

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

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

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

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

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

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

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

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

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

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

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

• Атрибуты ссылаются на дополнительную информацию об объекте.
• Свойства описывают характеристики объекта.

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

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

• Атрибуты - это дополнительная информация, которую мы можем поместить в HTML для инициализации определенных свойств DOM.
• Свойства формируются, когда браузер анализирует HTML и генерирует DOM. Каждый из элементов в DOM имеет свой собственный набор свойств, которые все устанавливаются браузером. Некоторые из этих свойств могут иметь начальное значение, заданное атрибутами HTML. Всякий раз, когда изменяется свойство DOM, которое влияет на визуализированную страницу, страница будет немедленно перерисована

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

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

Пример:

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

 <!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">  <!-- charset is a attribute -->
  <meta name="viewport" content="width=device-width"> <!-- name and content are attributes -->
  <title>JS Bin</title>
</head>
<body>
<div id="foo" class="bar foobar">hi</div> <!-- id and class are attributes -->
</body>
</html>

Затем мы проверяем <div>, в консоли JS:

 console.dir(document.getElementById('foo'));

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

• Мы видим, что атрибут id в HTML теперь также является свойством id в DOM. Идентификатор был инициализирован HTML (хотя мы могли бы изменить его с помощью javascript).
• Мы видим, что атрибут класса в HTML не имеет соответствующего свойства класса ( classзарезервированное ключевое слово в JS). Но на самом деле 2 свойства, classListа className.