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