getAttribute（）与Element对象的属性？

表达式喜欢Element.getAttribute("id")并且Element.id返回相同的东西。

当我们需要HTMLElement对象的属性时，应该使用哪一个？

这些方法和getAttribute()和有没有跨浏览器的问题setAttribute()？

还是直接访问对象属性与使用这些属性方法之间的性能影响？

getAttribute检索DOM元素的属性，同时el.id检索此DOM元素的属性。她们不一样。

大多数情况下，DOM属性与属性同步。

但是，同步不能保证相同的值。一个经典的例子是在el.href和之间el.getAttribute('href')对一个锚定元件。

例如：

<a href="/" id="hey"></a>
<script>
var a = document.getElementById('hey')
a.getAttribute('href') // "/"
a.href // Full URL except for IE that keeps '/'
</script>

发生这种现象是因为根据W3C，href属性必须是格式正确的链接。大多数浏览器都遵守此标准（猜测谁不这样做？）。

input的checked属性还有另一种情况。DOM属性返回true或false当属性返回字符串时"checked"或空字符串。

然后，有些属性仅单向同步。最好的例子是元素的value属性input。通过DOM属性更改其值不会更改属性（编辑：检查第一个注释以更精确）。

由于这些原因，我建议您继续使用DOM 属性，而不要使用属性，因为它们的行为在浏览器之间是不同的。

实际上，只有两种情况需要使用属性：

1. 自定义HTML属性，因为它没有同步到DOM属性。
2. 要访问一个内置的HTML属性，这是不是从属性同步，并且你确定你所需要的属性（例如，原来value的的input元素）。

如果您想要更详细的说明，强烈建议您阅读此页面。只需几分钟，但是您会对信息（我在这里总结）感到高兴。

getAttribute('attribute') 通常，将属性值作为字符串返回，与页面的HTML源代码中定义的完全相同。

但是，element.attribute可以返回该属性的归一化或计算值。例子：

• <a href="https://stackoverflow.com/foo"></a>
  • a.href将包含完整的 URL
• <input type="checkbox" checked>
  • input.checked将为true（布尔值）
• <input type="checkbox" checked="bleh">
  • input.checked将为true（布尔值）
• <img src='http://dummyimage.com/64x64/000/fff'>
  • 加载图像之前 img.width将为0（数字）
  • 加载图像（或其前几个字节）时，img.width将为64（数字）
• <img src='http://dummyimage.com/64x64/000/fff' width="50%">
  • img.width将是计算得出的 50％
• <img src='http://dummyimage.com/32x32/000/fff' style='width: 50px'>
  • img.width将为50（数字）
• <div style='background: lime;'></div>
  • div.style将是一个对象

.id节省了函数调用的开销。（很小，但是您问过。）

据此，jsPerf测试 getAttribute比id属性慢。

聚苯乙烯

奇怪的是，这两个语句在IE8上的表现都非常差（与其他浏览器相比）。

除非有特殊原因，否则始终使用属性。

• getAttribute() 和 setAttribute()在较旧的IE（以及更高版本的兼容模式）中损坏
• 属性更方便（尤其是与布尔属性相对应的属性）

有一些例外：

• 访问的属性 <form>元素的
• 访问自定义属性（尽管我不建议使用自定义属性）

我已经在SO上写过几次关于这个主题的文章：

• https://stackoverflow.com/a/7010268/96100
• https://stackoverflow.com/a/4456805/96100

请尝试以下示例以完全理解这一点。对于下面的DIV

<div class="myclass"></div>

该Element.getAttribute('class')会返回myclass，但你必须使用Element.className从DOM属性进行检索。

基于属性的CSS样式在这方面有很大的不同。

考虑以下：

const divs = document.querySelectorAll('div');

divs[1].custom = true;
divs[2].setAttribute('custom', true);

div {
  border: 1px solid;
  margin-bottom: 8px;
}

div[custom] {
  background: #36a;
  color: #fff;
}

<div>A normal div</div>
<div>A div with a custom property set directly.</div>
<div>A div with a custom attribute set with `setAttribute`</div>

直接设置了custom属性的div不会将值反映到该属性，并且也不是由div[custom]CSS中的属性选择器（）选择的。

setAttribute但是，可以使用css属性选择器选择使用设置了自定义属性的div，并相应地设置样式。