javascript dom,如何处理"特殊属性"与属性？

Question

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

没有发现这个记录,所以进行了一些测试(铬12):

property <=>属性

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

• 可以设置属性或属性
• 将反映属性或属性
• 异常1:如果form属性首先查找该名称的元素(!)
• 异常2:action属性使用value重写自身,将set value传递给attribute
• 异常3:enctype维护其完整性,但将set值传递给attribute

property <= attribute

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

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

property =>属性

indeterminate

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

propetry> <属性

defaultValue, validity, defaultChecked, readOnly
form: novalidate

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

---

对我来说,这似乎很随意.

给出一个随机属性/值来应用于一个元素,这里是我提出的最好的规则(根据Tim Down(谢谢!)修改):

• if class,write with classList,read with classNameproperty

• 如果一个表单,总是使用属性读取(并且要小心)

• 如果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()并且在IE的旧版本中getAttribute()被破坏了.

特别案例:

• <form>元素的属性.由于每个表格输入被映射到它的父的属性<form>对应于它的元件name,它的使用更安全setAttribute(),并getAttribute()以获得的形式,例如的性质action,name和method.
• 自定义属性,例如<p myspecialinfo="cabbage">.的DOM元素对象上这些通常将不创建等效性,因此setAttribute()和getAttribute()应该被使用.

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