如果您希望在JavaScript中进行编程访问，您应该始终使用直接的.attribute形式(但请参阅下面的quirksmode链接)。它应该正确地处理不同类型的属性(想想“onload”)。

使用getAttribute/setAttribute当你希望处理DOM，因为它是(例如，文字文本)。不同的浏览器会混淆这两者。参见怪癖模式:属性(在)兼容性。

如果您希望在JavaScript中进行编程访问，您应该始终使用直接的.attribute形式(但请参阅下面的quirksmode链接)。它应该正确地处理不同类型的属性(想想“onload”)。

使用getAttribute/setAttribute当你希望处理DOM，因为它是(例如，文字文本)。不同的浏览器会混淆这两者。参见怪癖模式:属性(在)兼容性。

在元素上设置属性(例如class)的方法: 1. 埃尔。className = string 2. el.setAttribute(‘类’,字符串) 3.el.attributes.setNamedItem(对象) 4. el.setAttributeNode(节点)

我做了一个简单的基准测试(这里)

似乎setAttributeNode比使用setAttribute快3倍。

所以如果性能是一个问题-使用“setAttributeNode”

来自Javascript: The Definitive Guide，它澄清了一些事情。它注意到HTML文档的HTMLElement对象定义了与所有标准HTML属性对应的JS属性。

因此，您只需要对非标准属性使用setAttribute。

例子:

node.className = 'test'; // works
node.frameborder = '0'; // doesn't work - non standard attribute
node.setAttribute('frameborder', '0'); // works

两者之间的一个区别是setAttribute，当用于设置<input/>的值时，将使该值成为它所在表单上调用.reset()时的默认值，但.value =不会这样做。

https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset

注意，如果调用setAttribute()来设置特定属性的值，则后续调用reset()不会将该属性重置为其默认值，而是将该属性保持setAttribute()调用设置的值。

If the element you are referring to does not already include a Javascript object property for a given attribute (as others have described), then setting that property will not propagate the change back to the DOM, it just adds the named property to the Javascript object, and the DOM ignores it. For example, getting the element mySpan by id and then doing mySpan.class = 'warning' will do nothing, whether or not the span element in question already has a class attribute defined, because mySpan.class is not defined in the Javascript object for a span element. You have to use mySpan.setAttribute('class', 'warning').

然而，第二个细微差别是使用mySpan设置Javascript对象的innerHTML属性。setAttribute("innerHTML"， someHTML)不会更新元素的内容。我不知道Javascript是如何捕获mySpan的。innerHTML = something，并调用HTML解析器，但在底层有一些神奇的东西。