谷歌API脚本对此进行了有趣的观察:

他们是这样做的:

var scriptElement = document.createElement("script");
scriptElement = setAttribute("src", "https://some.com");
scriptElement = setAttribute("nonce", "https://some.com");
scriptElement.async = "true";

注意，他们如何为"src"和"nonce"使用setAttribute，但是。async =…对于“async”属性。

我不是100%确定，但可能是因为“async”只在支持直接。attr =赋值的浏览器上被支持。因此，尝试setAttribute("async")是没有意义的，因为如果浏览器不理解.async=…它不会理解“async”属性。

希望这是我正在进行的“非最小化GAPI”研究项目的有益见解。如果我说错了，请指正。

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

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

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

增加2个与.textContent和.innerHTML相关的点

<div id="mydiv"></div>


var elem = document.getElementById("mydiv");

elem.textContent = "hello"; // OK - Content has been updated
elem.setAttribute("textContent", "hello"); // NOT OK - You are trying to set
                                           // the attribute than it's content

elem.innerHTML = "world";   // OK - Content has been updated
elem.setAttribute("innerHTML", "world"); // NOT OK - You are trying to set
                                         // the attribute than it's content

谷歌API脚本对此进行了有趣的观察:

他们是这样做的:

var scriptElement = document.createElement("script");
scriptElement = setAttribute("src", "https://some.com");
scriptElement = setAttribute("nonce", "https://some.com");
scriptElement.async = "true";

注意，他们如何为"src"和"nonce"使用setAttribute，但是。async =…对于“async”属性。

我不是100%确定，但可能是因为“async”只在支持直接。attr =赋值的浏览器上被支持。因此，尝试setAttribute("async")是没有意义的，因为如果浏览器不理解.async=…它不会理解“async”属性。

希望这是我正在进行的“非最小化GAPI”研究项目的有益见解。如果我说错了，请指正。

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

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

来自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