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.