何时在JavaScript中使用setAttribute vs .attribute =？
有没有围绕使用setAttribute而不是点（ . ）属性表示法开发的最佳做法？
例如：
myObj.setAttribute("className", "nameOfClass");
myObj.setAttribute("id", "someID");
要么
myObj.className = "nameOfClass";
myObj.id = "someID";
如果你想在JavaScript中进行编程访问，你应该总是使用直接的.attribute形式（但请参阅下面的quirksmode链接）。 它应该正确处理不同类型的属性（认为“onload”）。
如果您希望按原样处理DOM，请使用getAttribute / setAttribute （例如，仅限文字）。 不同的浏览器混淆了这两者。 请参阅怪癖模式：属性（in）兼容性。
从Javascript：权威指南，它澄清了事情。 它指出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>