Вопрос по dom, javascript, html, properties –  а также

292

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

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

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

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

Мысли?

Возможный дубликат.prop () против .attr () Neal

Ваш Ответ

5   ответов
36

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

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

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

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

Да, это понятие отстой и не должно быть так плохо стандартизировано. Это был один из случаев (например, innerHTML), который был хорош в старом IE и должен был быть принят стандартами. Свойства и атрибуты синхронизировались везде, где это было возможно, даже пользовательские атрибуты, создавая очень удобный для чтения синтаксис js dot. HTML5 делает пользовательские теги HTML первоклассными гражданами, пользовательские атрибуты тоже должны быть. Эта функция была удалена, так как старый IE все еще является реальной проблемой - мы только сейчас видим, что многие корпорации традиционно придерживаются IE для старых систем, и теперь обнаруживают, что они повреждены в IE10. mike nelson
@TimDown - Спасибо. Что на самом деле заставило меня пережить WTF? горб. pedz
Это не ответ, но я согласен с вами; это абсолютно безумно Samuel
Это не безумие. Вы неправильно поняли.checked атрибут представленdefaultChecked свойство (аналогично для текстового вводаvalue атрибут представленdefaultValue свойство). Второе свойство,checked, должен представлять, установлен ли флажок, потому что это неотъемлемая часть функциональности флажка: он является интерактивным и может быть изменен (и сброшен на значение по умолчанию, если присутствует кнопка сброса формы) пользователем, таким образом, что другой атрибут, такой какid не является. Это никак не связано с тем, что это логический атрибут. Tim Down
@TimDown Я все еще чувствую, что это «безумие», потому что любой логический подход может привести к совпадению имени свойства и имени атрибута или, по крайней мере, не иметь совпадения имени атрибута и имени свойства, которые не связаны (т.е. проверяемый атрибут ссылается на defaultChecked свойство, в то время как проверяемое свойство не связано). Фактически, логический подход, который, как все предполагают, таков в начале, состоит в том, чтобы вообще не разделять атрибуты и свойства. Атрибуты не должны быть неизменными, но всегда должны отражать значения свойств. Не должно быть различия между ними. dallin
10

http://www.w3.org/TR/SVGTiny12/attributeTable.html

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

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

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

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

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

Эй, Даниэль, я читал это. Просто кажется, что есть четкое определение для разделения двух, поскольку некоторые из того, что упоминает Симе ниже, также могут быть добавлены к элементу HTML, например, alt. Мы продолжим читать некоторые спецификации HTML и посмотрим, есть ли способ четко различить их на практике. schalkneethling
Этот документ относится к SVG, а не к HTML. Luzado
6

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

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

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

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

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

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

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

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

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

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

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

Атрибут HTMLvalue определяетначальная стоимость; ДОМvalue собственностьток стоимость.

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

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

Настройка кнопкиdisabled свойство отключает или включает кнопку. Значениесвойство вопросы.

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

1
Различия в свойствах и атрибутах 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.
654

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

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

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

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

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

htmlFor а такжеclassName я думаю, единственные, чьи имена отличаются от соответствующих им атрибутов. Не уверен насчет полного списка; Может быть, мы могли бы сделать один, если вы дадите мне хороший вариант использования для этого :) Šime Vidas
@oss Ваша ссылка ссылается на список атрибутов HTML. Этот список не является двусмысленным - это атрибуты. Šime Vidas
Есть ли какие-либо документы об отношениях? @ ŠimeVidas SKing7
Где я могу найти полный список атрибутов свойств (например,for ->htmlFor) и аналогичным образом список свойств, которые берут свое начальное значение из атрибута, но не отражают его (input.value). Я ожидаю, что это будет где-то в источнике библиотеки, какgithub.com/Matt-Esch/virtual-dom но это не совсем задокументировано. sstur
Эй, Сайм, я предполагаю, что это довольно неоднозначно, особенно если вы посмотрите здесь:w3.org/TR/html4/index/attributes.htmlи нет однозначного ответа. В основном нужно следовать тому, что указано в сводке в блоге jQuery, и даже тогда один из них будет сопоставляться с другим и работать в обоих случаях с небольшим падением производительности, если вы неправильно используете prop, когда вам нужно использовать attr schalkneethling

Похожие вопросы