javascript dom，如何处理 "special properties"作为属性？

Question

问题是使用属性还是属性。

没有找到这个文档，所以运行了一些测试(chromium 12):

属性 <=> 属性

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

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

属性 <= 属性

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

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

property => 属性

indeterminate

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

属性 ><属性

defaultValue, validity, defaultChecked, readOnlyform: novalidate

• 设置属性或特性对其他没有影响

---

对我来说，这似乎是非常随机的行为。

给定一个随机属性/值以应用于元素，这是我想出的最佳规则(根据下面的 Tim Down(谢谢!)进行了修改):

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

• 如果是表单，请始终阅读使用属性(并且要小心)

• 如果 typeof element[propName] != "undefined"，使用属性，即 element[attr]=val

• 否则，使用属性，即 element.setAttribute(attr,val)

这是否接近正确？

注意:有趣的是，如果您有一个包含名为“novalidate”的元素的表单，是否有可能访问表单本身的 novalidate 属性？

Answer 1

除了下面列出的罕见特殊情况外，请始终使用该属性。一旦浏览器解析了初始 HTML，除非出于某种原因将 DOM 序列化回 HTML，否则属性对您没有帮助。

总是青睐属性的原因:

• 处理属性更简单(参见 bool 属性，例如 checked :只需使用 true 和 false 并且不必担心您是应该删除该属性，还是将其设置为 "" 或 "checked" )
• 并非每个属性都映射到同名的属性。例如，checked复选框或单选按钮的属性不对应于任何属性； checked属性对应于 defaultChecked属性并且在用户与元素交互时不会改变(旧 IE 除外；请参阅下一点)。同样value和 defaultValue .
• setAttribute()和 getAttribute()是broken in older versions of IE .

特殊情况:

• <form> 的属性元素。由于每个表单输入都映射到其父级的属性 <form>其name对应的元素, 使用 setAttribute() 更安全和 getAttribute()获取表单的属性，例如 action , name和 method .
• 自定义属性，例如<p myspecialinfo="cabbage"> .这些通常不会在 DOM 元素对象上创建等效属性，因此 setAttribute()和 getAttribute()应该使用。

最后一个考虑因素是属性和特性名称之间没有精确的对应关系。例如，属性等同于 class属性是 className ，以及 for 的属性属性是 htmlFor .