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

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

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

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

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

мысли?

260
dom html javascript properties

3 ответов

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

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

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

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

как только браузер анализирует этот код, a HTMLInputElement, потом theInput.getAttribute("type") дает вам "foo" но theInput.type дает "text".

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

    theInput.value // returns "John"

    при этом:

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

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

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

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

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

    596

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

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

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

    31

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

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

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

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

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

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

    8