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

Question

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

没有发现这个记录，所以已经运行了一些测试（铬 12）：

属性属性

接受、替代、formMethod、formTarget、id、名称、占位符、类型、最大长度、大小 形式：方法、名称、目标、动作、编码类型

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

属性

值，自动对焦，选中，禁用，formNoValidate，多个，必需

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

属性 => 属性

不定

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

属性>

defaultValue、有效性、defaultChecked、只读 形式：novalidate

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

---

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

给定一个随机属性/值来应用到一个元素，这里是我想出的最好的规则（根据下面的 Tim Down（谢谢！）修改）：

• 如果是类，使用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() 是 broken in older versions of IE。

特殊情况：

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

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