Javascript DOM, как обрабатывать «специальные свойства» в отличие от атрибутов?

Question

вопрос заключается в том, использовать ли свойство или атрибут.

не нашел этого документально, поэтому выполнил несколько тестов (хром 12):

свойство <=> атрибут

accept, alt, formMethod, formTarget, id, name, placeholder, type, maxlength, size
form: method, name, target, action, enctype

• может установить либо свойство, либо атрибут
• будет отражать свойство или атрибут
• исключение 1: если свойство формы сначала будет искать элемент этогоимя (!)
• исключение 2: свойство действия перезаписывает себя, используя значение, передает установленное значение атрибуту
• исключение 3: enctype сохраняет свою целостность, но передает установленное значение атрибуту

свойство <= атрибут </strong>

value, autofocus, checked, disabled, formNoValidate, multiple, required

• параметр настройки не влияет на атрибут
• параметр настройки также устанавливает свойство

property => attribute

indeterminate

• Установочное свойство также устанавливает атрибут
• Установочный атрибут не влияет на свойство

пропетрия> <атрибут </strong>

defaultValue, validity, defaultChecked, readOnly
form: novalidate

• seСвойство или атрибут tting не влияют на другие

мне это кажется довольно случайным поведением.

учитывая случайный атрибут / значение для применения к элементу, вот лучшие правила, которые я придумал (изменено согласно Тиму Дауну (спасибо!) ниже):

• если класс, напишите classList, прочитайте className свойство

• если форма, всегда прочитайте используя атрибут (и будьте немного осторожнее)

• , если typeof element[propName] != "undefined", используйте свойство, т. е. element[attr]=val

• в противном случае используйте атрибутто есть element.setAttribute(attr,val)

это даже близко к правде?

примечание: интересно, если у вас есть форма с элементом с именем "novalidate",возможно ли получить доступ к свойству novalidate самой формы?

Answer 1

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

Причины всегда отдавать предпочтение свойствам:

• работать со свойствами проще (см. Логические свойства, такие как checked: просто используйте true и false и никогда не волнуйтесь, следует ли вам удалять атрибут или устанавливать его на "" или "checked")
• не каждое свойство отображается на атрибут с таким же именем. Например, свойство checked флажка или переключателя не соответствует ни одному атрибуту; атрибут checked соответствует свойству defaultChecked и не изменяется, когда пользователь взаимодействует с элементом (кроме старого IE; см. следующий пункт). Аналогично value и defaultValue.
• setAttribute() и getAttribute() не работают в старых версиях IE .

Особые случаи:

• Атрибуты <form> элементов. Поскольку каждый вход формы сопоставляется со свойством родительского элемента <form>, соответствующего его name, безопаснее использовать setAttribute() и getAttribute() для получения свойств формы, таких как action, name и method.
• Пользовательские атрибуты, например <p myspecialinfo="cabbage">. Обычно они не создают эквивалентные свойства для объекта элемента DOM, поэтому следует использовать setAttribute() и getAttribute().

И последнее замечание: нет точного соответствия между именами атрибутов и свойств. Например, свойство, эквивалентное атрибуту class, равно className, а свойство атрибута for - htmlFor.

.