95

表达式 likeElement.getAttribute("id")和Element.id返回相同的东西。

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

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

或者直接访问对象属性与使用这些属性方法对性能有什么影响？

4

7 回答 7

131

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。

如果你想要更详细的解释，我强烈建议你阅读这个页面。它只需要您几分钟，但您会对这些信息感到高兴（我在这里总结了这些信息）。

于 2012-04-23T12:25:02.493 回答
12

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

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

  • <a href="/foo"></a>
    • a.href 将包含完整的URL
  • <input type="checkbox" checked>
    • input.checked 将为真（布尔值）
  • <input type="checkbox" checked="bleh">
    • input.checked 将为真（布尔值）
  • <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 将是一个对象
于 2012-04-23T13:24:05.107 回答
3

除非您有特定的理由不使用，否则请始终使用这些属性。

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

有一些例外：

  • 访问<form>元素的属性
  • 访问自定义属性（尽管我完全不鼓励使用自定义属性）

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

于 2012-04-23T12:21:05.610 回答
3

.id节省函数调用开销。（这是非常小的，但你问。）

于 2012-04-23T12:12:02.270 回答
3

根据这个 jsPerf 测试 getAttribute比id属性更慢。

附言

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

于 2012-04-23T12:13:50.570 回答
0

试试下面的例子来完全理解这一点。对于以下 DIV

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

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

于 2017-03-20T06:20:14.463 回答
0

这会产生很大影响的一个领域是基于属性的 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 不会将值反映到属性中，也不会被我们div[custom]在 css 中的属性选择器 ( ) 选中。

但是，使用 设置自定义属性的 divsetAttribute可以使用 css 属性选择器进行选择，并进行相应的样式设置。

于 2017-04-27T00:52:34.547 回答