it-swarm.com.ru

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

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

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

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

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

Мысли?

285
schalkneethling

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

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

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

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

После того, как браузер проанализирует этот код, будет создан объект HTMLInputElement , и этот объект будет содержать десятки свойств, таких как: accept, accessKey, align, alt, атрибуты, автофокус, baseURI, флажок, 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 является отраженным свойством pure, оно не изменяет и не ограничивает значение.

  • Свойство 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 отражает текстовое содержимое current внутри поля ввода, а атрибут value содержит текстовое содержимое initial атрибута 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) и так далее. Спецификация охватывает различные виды отражения.

649
Šime Vidas

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

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

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

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

35
sibidiba

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

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

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

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

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

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

10
Daniel Ruf

Прочитав ответ Sime Vidas , я искал больше и нашел очень простое и понятное объяснение в angular docs .

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


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

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

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

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

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

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

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

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

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

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


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

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

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

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

3
subtleseeker

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

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

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

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

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

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

  • Attributes - это дополнительная информация, которую мы можем поместить в HTML для initialize определенных свойств 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, показаны не все свойства):

 html properties and attributes

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