何时在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具有添加和删除属性的方法(分别为getNamedItemsetNamedItem )。

请注意,尽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”