关于javascript：getAttribute（）与Element对象属性？


getAttribute() versus Element object properties?

像Element.getAttribute("id")和Element.id这样的表达式返回相同的结果。

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

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

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

相关讨论

getAttribute检索一个dom元素的属性，而el.id检索这个dom元素的属性。它们不一样。

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

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

例如：

1
2
3
var a = document.getElementById('hey')
a.getAttribute('href') //"/"
a.href // Full URL except for IE that keeps '/'

发生这种行为是因为根据W3C，href属性必须是格式良好的链接。大多数浏览器都尊重这个标准(猜猜谁不尊重？).

还有一种情况是input的checked财产。dom属性返回true或false，而属性返回字符串"checked"或空字符串。

然后，有一些属性是单向同步的。最好的例子是input元素的value属性。通过dom属性更改其值不会更改属性(编辑：检查第一条注释以获得更高的精度)。

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

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

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

    • 如果你想要更详细的解释，我强烈建议你阅读这一页。这只需要几分钟，但你会对这些信息感到高兴(我在这里总结)。

    相关讨论

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

    但是，element.attribute可以返回属性的标准化值或计算值。实例：

      • a.href将包含完整的URL
      • input.checked将为true(布尔值)
      • input.checked将为true(布尔值)
      • 图像加载前，img.width将为0(数字)
      • 加载图像(或图像的前几个字节)时，img.width将为64(数字)。
      • img.宽度为计算值的50%
      • 图像宽度为50(数字)
      • Div.Style将是一个对象

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

    • getAttribute()和setAttribute()在旧的IE(以及在较新版本中的兼容模式)中被破坏。
    • 属性更方便(特别是与布尔属性相对应的属性)

    有一些例外：

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

    关于这个问题我已经写过几次了，所以：

    • https://stackoverflow.com/a/7010268/96100
    • https://stackoverflow.com/a/4456805/96100
    相关讨论

    根据这个JSperf测试，getAttribute比id的性能慢。

    聚苯乙烯

    奇怪的是，这两个语句在IE8上的性能都非常差(与其他浏览器相比)。

    相关讨论

    .id保存函数调用开销。(很小，但你问了。)

    相关讨论

    其中一个重要的区别是基于属性的CSS样式。

    考虑以下内容：

    1
    2
    3
    4
    const divs = document.querySelectorAll('div');

    divs[1].custom = true;
    divs[2].setAttribute('custom', true);
    1
    2
    3
    4
    5
    6
    7
    8
    9
    div {
      border: 1px solid;
      margin-bottom: 8px;
    }

    div[custom] {
      background: #36a;
      color: #fff;
    }
    1
    2
    3
    A normal div
    A div with a custom property set directly.
    A div with a custom attribute set with `setAttribute`

    直接设置了自定义属性的DIV不会反映属性的值，也不会由CSS中的属性选择器(div[custom]选择。

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

    尝试下面的例子来完全理解这一点。对于下面的分区

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