getAttribute() 与 Element 对象属性? [英] getAttribute() versus Element object properties?

问题描述

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

Expressions like Element.getAttribute("id") and Element.id return the same thing.

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

Which one should be used when we need attributes of an HTMLElement object?

getAttribute() 和 setAttribute() 等方法是否存在跨浏览器问题?

Is there any cross browser issue with these methods like getAttribute() and setAttribute()?

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

Or any impact on performance between directly accessing object properties vs using these attribute methods?

推荐答案

getAttribute 检索 DOM 元素的 attribute，而 el.id> 检索此 DOM 元素的属性.它们不一样.

getAttribute retrieves the attribute of a DOM element, while el.id retrieves the property of this DOM element. They are not the same.

大多数时候，DOM 属性与属性同步.

Most of the time, DOM properties are synchronized with attributes.

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

However, the synchronization does not guarantee the same value. A classic example is between el.href and el.getAttribute('href') for an anchor element.

例如:

<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 属性必须是格式良好的链接.大多数浏览器都遵守这个标准(猜猜谁不遵守?).

This behavior happens because according to the W3C, the href property must be a well-formed link. Most browsers respect this standard (guess who doesn't?).

input 的 checked 属性还有另一种情况.DOM 属性返回 true 或 false，而属性返回字符串 "checked" 或空字符串.

There is another case for the input's checked property. The DOM property returns true or false while the attribute returns the string "checked" or an empty string.

然后，有一些属性仅单向同步.最好的例子是 input 元素的 value 属性.通过 DOM 属性更改其值不会更改该属性(检查第一条注释以获得更准确的信息).

And then, there are some properties that are synchronized one-way only. The best example is the value property of an input element. Changing its value through the DOM property will not change the attribute (edit: check the first comment for more precision).

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

Because of these reasons, I'd suggest you keep using the DOM properties, and not the attributes, as their behavior differs between the browsers.

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

In reality, there are only two cases where you need to use the attributes:

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

1. A custom HTML attribute, because it is not synced to a DOM property.
2. To access a built-in HTML attribute, which is not synced from the property, and you are sure you need the attribute (for example, the original value of an input element).

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

If you want a more detailed explaination, I strongly suggest you read this page. It will take you a few minutes only, but you will be delighted by the information (which I summed up here).

这篇关于getAttribute() 与 Element 对象属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！