何时在JavaScript中使用setAttribute vs .attribute =？

Question

有没有开发使用setAttribute而不是dot（.）属性符号的最佳实践？

Ef。：

myObj.setAttribute("className", "nameOfClass");
myObj.setAttribute("id", "someID");

要么

myObj.className = "nameOfClass";
myObj.id = "someID";

Answer 1

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

当您希望按原样处理DOM时使用getAttribute / setAttribute（例如仅限文字文本）。不同的浏览器混淆了两者。见Quirks modes: attribute (in)compatibility。

Answer 2

从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

Answer 3

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

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

1. `element.attributes`

元素有一个属性attributes，返回NamedNodeMap对象的实时Attr。浏览器中此集合的索引可能不同。因此，订单无法保证。 NamedNodeMap有添加和删除属性的方法（分别为getNamedItem和setNamedItem）。

请注意，尽管XML明确区分大小写，但DOM规范要求string names to be normalized，因此传递给getNamedItem的名称实际上不区分大小写。

Example Usage:

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上，无需访问attributes及其方法，但执行相同的功能。

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

Example Usage:

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节点上（即，不是文本或注释节点）。但value更狭隘。它在HTMLInputElement上定义，可能不存在于其他元素上。

请注意，JavaScript属性区分大小写。虽然大多数属性都使用小写，但有些属性是camelCase。因此，请务必检查规格。

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

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

Example Usage:

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规范定义和现代浏览器如何处理属性的解释。我没有尝试处理古老的，破碎的浏览器的局限性。如果您需要支持旧版浏览器，除了这些信息之外，您还需要了解这些浏览器中的内容。

Answer 4

我发现需要setAttribute的一个案例是在更改ARIA属性时，因为没有相应的属性。例如

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