Question

Element.getAttribute("id")和Element.id等表达式会返回相同的内容。

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

这些方法是否存在跨浏览器问题，例如getAttribute()和setAttribute()？

或者直接访问对象属性与使用这些属性方法之间的性能有何影响？

Answer 1

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属性还有另一种情况。当属性返回字符串true或空字符串时，DOM属性返回false或"checked"。

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

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

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

自定义HTML属性，因为它未同步到DOM属性。
要访问未与属性同步的内置HTML属性，并且您确定需要该属性（例如，value元素的原始input。< / LI>
如果您想要更详细的解释，我强烈建议您阅读this page。它只需要几分钟，但您会对这些信息感到高兴（我在此总结）。

Answer 2

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

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

<a href="/foo"></a>
- a.href将包含完整网址
<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将是一个对象

Answer 3

.id保存函数调用开销。（这很小，但是你问过。）

Answer 4

根据this jsPerf test getAttribute比id属性慢。

<强> PS

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

Answer 5

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

getAttribute()和setAttribute()在较旧的IE中被破坏（以及更高版本中的兼容模式）
属性更方便（特别是那些对应于布尔属性的属性）

有some exceptions：

访问<form>元素的属性
访问自定义属性（虽然我根本不鼓励使用自定义属性）

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

Answer 6

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

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

Element.getAttribute('class')将返回myclass，但您必须使用Element.className从DOM属性中检索它。

Answer 7

其中一个与众不同的领域是基于属性的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>

直接设置自定义属性的div不会反映属性的值，也不会被css中的属性选择器（div[custom]）选中。

然而，使用setAttribute设置自定义属性的div可以使用css属性选择器进行选择，并相应地设置样式。

getAttribute（）与Element对象属性？

7 个答案: