javascript dom，如何处理“特殊属性”作为与属性？ [英] javascript dom, how to handle "special properties" as versus attributes?

问题描述

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

没有找到记录，所以运行了一些测试（铬12）：

属性< =>属性

 
 accept，alt，formMethod，formTarget，id，name，placeholder，type，maxlength，size 
形式：方法，名称，目标，动作，enctype 
 

• 可以设置属性或属性


• 将反映到属性或属性


• 异常1：如果form属性将首先查找该名称的元素（！）


• exception 2：action属性使用值重写本身，将设置值传递给属性


• exception 3：enctype保持其完整性，但将设置值传递给属性

属性< =属性

 
值，自动对焦，检查，禁用，formNoValidate，多个，必需
 

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

property =>属性

 
 indeterminate 
 

• 设置属性还设置属性


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

propetry><属性

 
 defaultValue，validity，defaultChecked，readOnly 
 form：novalidate 
 

• 设置属性或属性对其他

给我一个随机的属性/值应用到一个元素，这里是最好的，对我来说这个似乎很随机的行为

我已经提出了一些规则（根据Tim Down（谢谢！）修改）：

• 如果类， code> classList ，用 className 属性




• 一个表单，永远使用属性读取（并且有点小心）




• 如果 typeof element [propName ]！=undefined，使用属性，即元素[attr] = val




• 否则，使用属性，即 element.setAttribute（attr，val）

这是甚至接近正确吗？

注意：有趣的是，如果您有一个名为novalidate的表单，是否可以访问表单本身的 novalidate 属性？

解决方案

除了以下列出的罕见特殊情况，始终使用该属性。一旦浏览器解析了内部HTML，属性对您没有任何帮助，除非您由于某种原因将DOM序列化为HTML。

始终支持属性的原因：

• 处理属性更简单（参见布尔属性，如选中：只需使用 true 和 false ，不用担心是否删除该属性，或将其设置为 或选中）


• 不是每个属性都映射到同名的属性。例如，复选框或单选按钮的选中的属性与任何属性不对应; 检查的属性对应于 defaultChecked 属性，当用户与元素交互时不会更改（除了旧的IE ;见下一点）。同样值和 defaultValue 。


• setAttribute ）和 getAttribute（）是

特殊情况：

• 属性< form> 元素。由于每个表单输入都映射到其对应于其名称的其父< form> 元素的属性，因此它更安全要使用 setAttribute（）和 getAttribute（）获取表单的属性，例如操作，名称和方法。


• 自定义属性，例如< p myspecialinfo =cabbage> 。这些通常不会在DOM元素对象上创建相应的属性，因此应该使用 setAttribute（）和 getAttribute（）

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

issue is whether to use property or attribute.

have not found this documented, so have run some tests (chromium 12):

property <=> attribute

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

• can set either property or attribute
• will reflect to property or attribute
• exception 1: if form property will first look for element of that name (!)
• exception 2: action property rewrites itself using value, passes set value to attribute
• exception 3: enctype maintains its integrity, but passes set value to attribute

property <= attribute

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

• setting property has no effect on attribute
• setting attribute also sets property

property => attribute

indeterminate

• setting property also sets attribute
• setting attribute has no effect on property

propetry >< attribute

defaultValue, validity, defaultChecked, readOnly
form: novalidate

• setting property or attribute has no effect on the other

---

to me this seems pretty random behavior.

given a random attribute/value to apply to an element, here are the best rules I have come up with (modified as per Tim Down (thanks!) below):

• if class, write with classList, read with className property

• if a form, always read using attribute (and be a little careful)

• if typeof element[propName] != "undefined", use property, ie, element[attr]=val

• otherwise, use attribute, ie, element.setAttribute(attr,val)

is this even close to being right?

note: interestingly, if you have a form with an element named "novalidate", is it even possible to access the novalidate property of the form itself?

解决方案

Except for rare special cases listed below, always use the property. Once the browser has parsed the intial HTML, attributes are no help to you unless you're serializing the DOM back to HTML for some reason.

Reasons to always favour properties:

• dealing with properties is simpler (see Boolean properties such as checked: just use true and false and never worry whether you should be removing the attribute, or setting it to "" or "checked")
• not every property maps to an attribute of the same name. For example, the checked property of a checkbox or radio button does not correspond to any attribute; the checked attribute corresponds to the defaultChecked property and does not change when the user interacts with the element (except in old IE; see next point). Likewise value and defaultValue.
• setAttribute() and getAttribute() are broken in older versions of IE.

Special cases:

• Attributes of <form> elements. Since each form input is mapped to a property of its parent <form> element corresponding to its name, it's safer to use setAttribute() and getAttribute() to obtain properties of the form such as action, name and method.
• Custom attributes, e.g. <p myspecialinfo="cabbage">. These will not generally create equivalent properties on the DOM element object, so setAttribute() and getAttribute() should be used.

One final consideration is that there is not an exact correspondence between attribute and property names. For example, the property equivalent of the class attribute is className, and the property for the for attribute is htmlFor.

这篇关于javascript dom，如何处理“特殊属性”作为与属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！