getAttribute()与Element对象的属性?

Element.getAttribute("id")Element.id这样的expression式返回相同的东西。

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

这些方法如getAttribute()setAttribute()是否存在跨浏览器问题?

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

getAttribute检索一个DOM元素的属性 ,而el.id检索这个DOM元素的属性 。 他们不一样。

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

但是,同步不保证相同的值 。 一个典型的例子是el.hrefel.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属性还有另一种情况。 当属性返回string"checked"或一个空string时,DOM属性返回truefalse

然后,有一些属性只能单向同步。 最好的例子是input元素的value属性。 通过DOM属性更改其值不会更改属性(编辑:检查更精确的第一个注释)。

由于这些原因,我build议你继续使用DOM 属性 ,而不是属性,因为它们在浏览器中的行为不同。

实际上,只有两种情况需要使用属性:

  1. 自定义HTML属性,因为它不同步到DOM属性。
  2. 要访问未从属性同步的内置HTML属性,并且您确定需要该属性(例如, input元素的原始value )。

如果你想要更详细的解释,我强烈build议你阅读这个页面 。 它只会花你几分钟,但你会很高兴的信息(我在这里总结)。

getAttribute('attribute')通常以string的forms返回属性值,完全按照页面的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将是一个对象

.id保存了函数调用开销。 (这是非常小的,但你问。)

根据这个jsPerftesting, getAttributeid属性更慢。

PS

奇怪的是,这两个语句在IE8上的performance都很差(与其他浏览器相比)。

除非你有特定的理由不要使用这些属性。

  • 在较旧的IE浏览器中, getAttribute()setAttribute()被打破了(在后来的版本中兼容模式)
  • 属性更方便(特别是对应于布尔属性的属性)

有一些例外 :

  • 访问<form>元素的属性
  • 访问自定义属性(尽pipe我不鼓励使用自定义属性)

我已经在SO上写了几个关于这个主题的文章:

尝试下面的例子来完全理解这一点。 对于下面的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>