Javascript element.setAttribute（'；prop'；value）与element.prop=value

对于DOM元素，我们有一个setAttribute方法

它与使用下面的有什么不同

 domElement.propName = value

这两种方法都有好处吗

---

谢谢。

doElement.setAttribute（'propName'，obj）

正在设置一个XML属性，它将转换为字符串并添加到DOM标记中

doElement.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

），并且希望该属性反映在序列化中，例如，var x=new Image（）；现在我们可以做，x.src=“/abc.png”或者我们可以做x.setAttribute（'src'，'abc.png'）。你认为这两种方法都是一样的吗？@sbr在src的情况下，因为它是解析器可以识别的属性，并且是字符串，所以它将以任何一种方式工作。但是，最好使用JS中的

img.src

（除非序列化DOM节点时需要它，因为

innerHTML/outerHTML

在您仅设置expando属性时不会更改属性），它们会执行相同的操作，@sbr。。。但另一方面：

var time=document.createElement（“time”）；time.pubdate=true；time.datetime=“2012-10-04T12:28:00.000Z”；time.getAttribute（“日期时间”）如果您使用JS或HTML/DOM来获得所需的结果，它们是非常不同的东西，并且出于非常不同的原因非常重要。只有一些节点具有某些特定属性的getter和setter（如
src
和
href
）。大多数情况下，它们有两个不同的用途，你不能用一种方法同时做这两件事。使用JS的JS方法，并为HTML设置属性。@Norguard您的评论在我的回答中并没有得到保证，因为我已经解释了您所说的一切。另一个问题是，不同的浏览器为不同的节点提供不同的接口。它们不是跨浏览器的标准（除非它们从根本上来说很重要，比如链接）。这对于HTML5API（尤其是新的表单元素）尤其如此，其中一些浏览器将属性扩展到属性（反之亦然），而其他浏览器则不会。一些旧浏览器也是如此，它们甚至不允许您将自己的对象属性/方法分配给节点。