Question

我们有一个针对DOM元素的setAttribute方法。

https://developer.mozilla.org/en-US/docs/DOM/element.setAttribute

与使用以下内容有何不同？

 domElement.propName = value

这两种方法都有任何好处吗？

感谢。

Answer 1

domElement.setAttribute('propName', obj)正在设置XML属性，它将被转换为字符串并添加到DOM标记中。

domElement.propName正在设置一个expando属性，它可以是任何类型。它将它设置在包装DOM对象实现的JS对象上。

它们没有相同的效果，除非您正在处理解析器识别的属性，如src,id,value。这些属性被复制到expando属性，但是有许多兔子洞和它无法可靠地工作的情况（通常当expando不带字符串时，如onclick, checked）

此示例显示它们不同。

domElement.setAttribute('someProp', 5);
console.log(domElement.someProp); // undefined
domElement.someProp = 10; 
console.log(domElement.someProp); // 10
console.log(domElement.getAttribute('someProp')); // "5" -> it's a string

始终使用DOM expando属性不太可能造成麻烦。您想要使用setAttribute的唯一情况是您需要序列化节点（使用outerHTML）并且您希望该属性反映在序列化中

element.setAttribute（'prop'，value）vs element.prop = value

1 个答案: