何时在JavaScript中使用setAttribute vs .attribute =？
有关于使用setAttribute而不是点（ . ）属性表示法的最佳实践指示？
例如：
myObj.setAttribute("class", "nameOfClass"); myObj.setAttribute("id", "someID");
要么
myObj.className = "nameOfClass"; myObj.id = "someID";
如果您想在JavaScript中进行编程访问，则应始终使用直接.attribute表单（但请参阅下面的quirksmode链接）。 它应该正确处理不同types的属性（认为“onload”）。
如果您希望按原样处理DOM，请使用getAttribute / setAttribute （例如，仅限文字）。 不同的浏览器混淆了这两者。 请参阅怪癖模式：属性（在）兼容性 。
从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 ）。
请注意，尽pipeXML明确区分大小写，但DOM规范要求将string名称进行规范化 ，所以传递给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>
一个我发现setAttribute是必要的情况是当改变ARIA属性时，因为没有相应的属性。 例如
x.setAttribute('aria-label', 'Test'); x.getAttribute('aria-label');
没有x.arialabel或类似的东西，所以你必须使用setAttribute。
编辑： x [“唱腔标签”]不起作用 。 你真的需要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"
这看起来像使用setAttribute更好的一种情况：
Dev.Opera – 高效的JavaScript
var posElem = document.getElementById('animation'); var newStyle = 'background: ' + newBack + ';' + 'color: ' + newColor + ';' + 'border: ' + newBorder + ';'; if(typeof(posElem.style.cssText) != 'undefined') { posElem.style.cssText = newStyle; } else { posElem.setAttribute('style', newStyle); }
“什么时候在JavaScript中使用setAttribute vs .attribute =？
一般的规则是使用.attribute并检查它是否在浏览器上工作。
如果它在浏览器上工作，你很好。
..如果不是，请使用.setAttribute(attribute, value)而不是.attribute属性。
冲洗 – 重复所有属性。
那么，如果你懒，你可以简单地使用.setAttribute 。 这应该在大多数浏览器上正常工作。 （尽pipe支持.attribute浏览器可以比.setAttribute(attribute, value)更好地优化它。）
在元素上设置属性（例如类）的方法：1. el.className = string 2. el.setAttribute（'class'，string）3. el.attributes.setNamedItem（object）4. el.setAttributeNode（node）
我做了一个简单的基准testing（ 这里 ）
看来setAttributeNode比使用setAttribute快了3倍。
所以如果性能是一个问题 – 使用“setAttributeNode”
