element.setAttribute('prop'，value) vs element.prop = value

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扩展属性不太可能造成麻烦。唯一需要使用setAttribute的情况是需要序列化节点(使用outerHTML)，并且希望在序列化中反映该属性