表达式 likeElement.getAttribute("id")和Element.idreturn 相同的东西。
当我们需要 HTMLElement 对象的属性时应该使用哪一个？
这些方法是否有任何跨浏览器问题，例如getAttribute()和setAttribute()？
或者直接访问对象属性与使用这些属性方法对性能有什么影响？
getAttribute() 与 Element 对象属性？
IT技术
javascript
html
dom
2021-01-28 21:56:20
6个回答
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属性，而不是属性，因为它们的行为因浏览器而异。
实际上，只有两种情况需要使用属性：
- 自定义 HTML 属性，因为它未同步到 DOM 属性。
- 要访问一个内置的HTML属性，这是不是从属性同步，并且你确定你所需要的属性（例如，原来
value的的input元素）。
如果您想要更详细的解释，我强烈建议您阅读此页面。您只需花几分钟时间，但您会对这些信息感到高兴（我在这里总结了这些信息）。
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 将是一个对象
除非有特殊原因，否则请始终使用这些属性。
getAttribute()并setAttribute()在较旧的 IE 中损坏（以及更高版本中的兼容模式）- 属性更方便（特别是那些对应于布尔属性的）
有一些例外：
- 访问
<form>元素的属性 - 访问自定义属性（尽管我完全不鼓励使用自定义属性）
我已经在 SO 上写过几次关于这个主题的文章：
.id节省函数调用开销。（这是非常小的，但你问了。）