Javascript dom, как обращаться с "специальными свойствами" как с атрибутами?

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

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

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

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

может установить либо свойство, либо атрибут
будет отражать свойство или атрибут
exception 1: если свойство form сначала ищет элемент этого имени (!)
exception 2: свойство action переписывает себя с использованием значения, передает значение set атрибуту
exception 3: enctype поддерживает свою целостность, но передает установленное значение атрибуту

свойство <= attribute

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

Свойство
не влияет на атрибут Атрибут атрибута
также устанавливает свойство

свойство = > Атрибут

indeterminate

Свойство свойства
также устанавливает атрибут Атрибут настройки
не влияет на свойство

propetry > Атрибут

defaultValue, validity, defaultChecked, readOnly
form: novalidate

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

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

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

если класс, напишите с помощью classList, прочитайте с помощью свойства className
если форма, всегда читайте с использованием атрибута (и будьте осторожны)
if typeof element[propName] != "undefined", используйте свойство, т.е. element[attr]=val
иначе использовать атрибут, т.е. element.setAttribute(attr,val)

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

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

Ответ 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.