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

之前的答案都不完整，大多数都包含错误信息。

在JavaScript中有三种访问DOM元素属性的方法。这三种方法都可以在现代浏览器中可靠地工作，只要您了解如何使用它们。

1. element.attributes

元素有一个属性属性，它返回Attr对象的活动NamedNodeMap。此集合的索引可能因浏览器而异。所以，顺序是不能保证的。NamedNodeMap有添加和删除属性的方法(分别是getNamedItem和setNamedItem)。

注意，尽管XML显式区分大小写，但DOM规范要求规范化字符串名称，因此传递给getNamedItem的名称实际上是不区分大小写的。

使用示例:

var div = document.getElementsByTagName('div')[0]; //you can look up specific attributes var classAttr = div.attributes.getNamedItem('CLASS'); document.write('attributes.getNamedItem() Name: ' + classAttr.name + ' Value: ' + classAttr.value + '<br>'); //you can enumerate all defined attributes for(var i = 0; i < div.attributes.length; i++) { var attr = div.attributes[i]; document.write('attributes[] Name: ' + attr.name + ' Value: ' + attr.value + '<br>'); } //create custom attribute var customAttr = document.createAttribute('customTest'); customAttr.value = '567'; div.attributes.setNamedItem(customAttr); //retreive custom attribute customAttr = div.attributes.getNamedItem('customTest'); document.write('attributes.getNamedItem() Name: ' + customAttr.name + ' Value: ' + customAttr.value + '<br>'); <div class="class1" id="main" data-test="stuff" nonStandard="1234"></div>

2. element.getAttribute & element.setAttribute

这些方法直接存在于Element上，不需要访问属性及其方法，但执行相同的功能。

再次注意，字符串名称是不区分大小写的。

使用示例:

var div = document.getElementsByTagName('div')[0]; //get specific attributes document.write('Name: class Value: ' + div.getAttribute('class') + '<br>'); document.write('Name: ID Value: ' + div.getAttribute('ID') + '<br>'); document.write('Name: DATA-TEST Value: ' + div.getAttribute('DATA-TEST') + '<br>'); document.write('Name: nonStandard Value: ' + div.getAttribute('nonStandard') + '<br>'); //create custom attribute div.setAttribute('customTest', '567'); //retreive custom attribute document.write('Name: customTest Value: ' + div.getAttribute('customTest') + '<br>'); <div class="class1" id="main" data-test="stuff" nonStandard="1234"></div>

3.DOM对象上的属性，例如element.id

使用DOM对象上的方便属性可以访问许多属性。给定对象上存在哪些属性取决于对象的DOM节点类型，而与HTML中指定的属性无关。可用的属性定义在DOM对象原型链中的某个地方。因此，所定义的特定属性将取决于您正在访问的Element的类型。

例如，className和id定义在Element上，存在于所有DOM节点上，这些节点是元素，但不包括文本或注释节点。价值的定义更为狭义。它只在HTMLInputElement和它的后代上可用。

注意，JavaScript属性是区分大小写的。尽管大多数属性将使用小写字母，但也有一些是驼峰式的。所以一定要检查说明书。

这个“图表”捕获了这些DOM对象的原型链的一部分。它甚至还没有完成，但它展示了整体结构。

                      ____________Node___________
                      |               |         |
                   Element           Text   Comment
                   |     |
           HTMLElement   SVGElement
           |         |
HTMLInputElement   HTMLSpanElement

使用示例:

var div = document.getElementsByTagName('div')[0]; //get specific attributes document.write('Name: class Value: ' + div.className + '<br>'); document.write('Name: id Value: ' + div.id + '<br>'); document.write('Name: ID Value: ' + div.ID + '<br>'); //undefined document.write('Name: data-test Value: ' + div.dataset.test + '<br>'); //.dataset is a special case document.write('Name: nonStandard Value: ' + div.nonStandard + '<br>'); //undefined <div class="class1" id="main" data-test="stuff" nonStandard="1234"></div>

注意:本文解释了HTML规范如何定义属性，以及现代的常青浏览器如何处理属性。当然，有些老的浏览器(IE、Netscape等)没有遵守这个规范，甚至比这个规范更早。如果你需要支持旧的(破损的)浏览器，你需要的信息比这里提供的更多。

谷歌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中什么时候使用setAttribute vs .attribute= ?”

一般的规则是使用.attribute并检查它是否在浏览器上工作。

．．如果它可以在浏览器上运行，那么就可以开始了。

．．如果没有，使用. setattribute (attribute, value)来代替该属性的.attribute。

冲洗-重复所有属性。

如果你很懒，你可以简单地使用. setattribute。这在大多数浏览器上都可以正常工作。(尽管支持.attribute的浏览器可以比. setattribute (attribute, value)更好地优化它。)

增加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

我发现需要使用setAttribute的一种情况是在更改ARIA属性时，因为没有相应的属性。例如

x.setAttribute('aria-label', 'Test');
x.getAttribute('aria-label');

没有x。arialabel之类的东西，所以你必须使用setAttribute。

编辑:x["aria-label"]不工作。你确实需要setAttribute。

x.getAttribute('aria-label')
null
x["aria-label"] = "Test"
"Test"
x.getAttribute('aria-label')
null
x.setAttribute('aria-label', 'Test2')
undefined
x["aria-label"]
"Test"
x.getAttribute('aria-label')
"Test2"