javascript dom，如何处理“特殊属性” as 与属性？

Question

问题是是否使用属性或属性。

尚未找到此记录，因此运行了一些测试（chromium 12）：

property <=>; attribute

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

• 可以设置 property 或 attribute，
• 将反映到 property 或 attribute
• 异常 1：如果表单属性将首先查找该名称的元素 (!)
• 异常 2：action 属性使用值重写自身，将设置值传递给属性
• 异常3：enctype保持其完整性，但将设置值传递给属性

property<=attribute

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

• 设置property对属性没有影响设置
• attribute也设置property

property==>属性

indeterminate

• 设置属性也设置属性
• 设置属性对属性没有影响

财产>>< 给定应用于元素的随机属性/值，设置属性

defaultValue, validity, defaultChecked, readOnly
form: novalidate

• 或属性对另一个没有影响

---

to me this seems pretty random behavior.

，这是我想出的最佳规则（根据下面的 Tim Down（谢谢！）进行修改）：

• 如果是类，用classList写入，用className属性读取

• 如果是表单，则始终使用属性读取（并且要小心一点）

• if 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 中。

特殊情况：

• 
  
  元素的属性。由于每个表单输入都映射到与其 name 对应的父 元素的属性，因此使用 setAttribute() 更安全和getAttribute()来获取表单的属性，例如action、name和method。
• 自定义属性，例如

  。这些通常不会在 DOM 元素对象上创建等效属性，因此应使用 setAttribute() 和 getAttribute()。

最后一个考虑因素是属性和属性名称之间不存在精确的对应关系。例如，class 属性的等效属性是 className，for 属性的属性是 htmlFor 。