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

Question

有没有开发使用setAttribute而不是dot(.)属性表示法的最佳实践？

例如:

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

要么

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

Answer 1

从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 2

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

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

1. element.attributes

元素有一个属性的属性,它返回一个活的NamedNodeMap的的Attr对象.浏览器中此集合的索引可能不同.因此,订单无法保证.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不需要访问attributes及其方法但执行相同的功能.

再次注意,字符串名称不区分大小写.

用法示例:

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并且在所有作为元素的DOM节点上id定义Element并存在(即,不是文本或注释节点).但是value更狭隘.它是HTMLInputElement在其他元素上定义的,也可能不存在.

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

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

Answer 3

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

当您希望按原样处理DOM时使用getAttribute/ setAttribute(例如,仅限文字文本).不同的浏览器混淆了两者.请参阅Quirks模式:属性(in)兼容性.

Answer 4

这些答案并没有真正解决properties和attributes之间的巨大混淆。此外，根据 Javascript 原型，有时您可以使用元素的属性来访问属性，有时则不能。

首先，您必须记住 anHTMLElement是一个 Javascript 对象。像所有对象一样，它们具有属性。当然，您可以在内部创建一个几乎任何您想要的名称的属性HTMLElement，但它不必对 DOM（页面上的内容）做任何事情。点符号 ( .) 用于属性。现在，有一些特殊的属性映射到属性，并在当时或写，只有4所保证的（稍后更多）。

所有HTMLElements 都包含一个名为 的属性attributes。HTMLElement.attributes是一个与 DOM 中的元素相关的活动 NamedNodeMap对象。“活”意味着当节点在 DOM 中发生变化时，它们在 JavaScript 端发生变化，反之亦然。在这种情况下，DOM 属性是有问题的节点。ANode具有.nodeValue您可以更改的属性。NamedNodeMap对象有一个函数setNamedItem，您可以在其中更改整个节点。也可以通过key直接访问节点。例如，您可以说.attributes["dir"]which 与.attributes.getNamedItem('dir');(Side note, NamedNodeMapis case-insensitive, so you can pass 'DIR');

直接有一个类似的函数HTMLElement，您可以直接在其中调用setAttribute它，如果它不存在，它将自动创建一个节点并设置nodeValue. 还有一些属性可以HTMLElement通过特殊属性作为属性直接访问，例如dir. 这是它的外观的粗略映射：

HTMLElement {
  attributes: {
    setNamedItem: function(attr, newAttr) { 
      this[attr] = newAttr;
    },    
    getNamedItem: function(attr) {
      return this[attr];
    },
    myAttribute1: {
      nodeName: 'myAttribute1',
      nodeValue: 'myNodeValue1'
    },
    myAttribute2: {
      nodeName: 'myAttribute2',
      nodeValue: 'myNodeValue2'
    },
  }
  setAttribute: function(attr, value) { 
    let item = this.attributes.getNamedItem(attr);
    if (!item) {
      item = document.createAttribute(attr);
      this.attributes.setNamedItem(attr, item);
    }
    item.nodeValue = value;
  },
  getAttribute: function(attr) { 
    return this.attributes[attr] && this.attributes[attr].nodeValue;
  },
  dir: // Special map to attributes.dir.nodeValue || ''
  id:  // Special map to attributes.id.nodeValue || ''
  className: // Special map to attributes.class.nodeValue || '' 
  lang: // Special map to attributes.lang.nodeValue || ''

}

因此，您可以通过dir6 种方式更改属性：

  // 1. Replace the node with setNamedItem
  const newAttribute = document.createAttribute('dir');
  newAttribute.nodeValue = 'rtl';
  element.attributes.setNamedItem(newAttribute);

  // 2. Replace the node by property name;
  const newAttribute2 = document.createAttribute('dir');
  newAttribute2.nodeValue = 'rtl';
  element.attributes['dir'] = newAttribute2;
  // OR
  element.attributes.dir = newAttribute2;

  // 3. Access node with getNamedItem and update nodeValue
  // Attribute must already exist!!!
  element.attributes.getNamedItem('dir').nodeValue = 'rtl';

  // 4. Access node by property update nodeValue
  // Attribute must already exist!!!
  element.attributes['dir'].nodeValue = 'rtl';
  // OR
  element.attributes.dir.nodeValue = 'rtl';

  // 5. use setAttribute()  
  element.setAttribute('dir', 'rtl');
  
  // 6. use the UNIQUELY SPECIAL dir property
  element["dir"] = 'rtl';
  element.dir = 'rtl';

您可以更新方法＃1-5的所有属性，但只dir，id，lang，并className与方法＃6。

HTMLElement 的扩展

HTMLElement有这 4 个特殊属性。一些元素是HTMLElement具有更多映射属性的扩展类。例如，HTMLAnchorElement有HTMLAnchorElement.href，HTMLAnchorElement.rel和HTMLAnchorElement.target。但是，请注意，如果您在没有这些特殊属性的元素上设置这些属性（例如在 a 上HTMLTableElement），则属性不会更改，它们只是普通的自定义属性。为了更好地理解，这里有一个继承的例子：

HTMLAnchorElement extends HTMLElement {
  // inherits all of HTMLElement
  href:    // Special map to attributes.href.nodeValue || ''
  target:  // Special map to attributes.target.nodeValue || ''
  rel:     // Special map to attributes.ref.nodeValue || '' 
}

自定义属性

现在最大的警告是：像所有 Javascript 对象一样，您可以添加自定义属性。但是，这些不会改变 DOM 上的任何内容。你可以做：

  const newElement = document.createElement('div');
  // THIS WILL NOT CHANGE THE ATTRIBUTE
  newElement.display = 'block';

但这与

  newElement.myCustomDisplayAttribute = 'block';

这意味着添加自定义属性不会链接到.attributes[attr].nodeValue.

表现

我已经构建了一个 jsperf 测试用例来显示差异：https://jsperf.com/set-attribute-comparison。基本上，按顺序：

1. 自定义属性，因为它们不影响 DOM 并且不是 attributes。
2. 浏览器提供的特殊映射 ( dir, id, className)。
3. 如果属性已经存在，element.attributes.ATTRIBUTENAME.nodeValue =
4. 设置属性（）；
5. 如果属性已经存在，element.attributes.getNamedItem(ATTRIBUTENAME).nodeValue = newValue
6. element.attributes.ATTRIBUTENAME = newNode
7. element.attributes.setNamedItem(ATTRIBUTENAME) = newNode

结论 (TL; DR)

• 从使用特殊的属性映射HTMLElement：element.dir，element.id， element.className，或element.lang。

• 如果您 100% 确定该元素是HTMLElement具有特殊属性的扩展，请使用该特殊映射。（您可以使用 进行检查if (element instanceof HTMLAnchorElement)）。

• 如果您 100% 确定该属性已存在，请使用element.attributes.ATTRIBUTENAME.nodeValue = newValue.

• 如果没有，请使用setAttribute().

Answer 5

我找到的一个案例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"