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

问题描述

表达式如 Element.getAttribute（id）和 Element.id 返回相同的事情。 p>

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

这些是否有跨浏览器问题方法如 getAttribute（）和 setAttribute（）？

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

解决方案

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

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

但是，同步不能保证相同的值。一个典型的例子是锚点元素的 el.href 和 el.getAttribute（'href'）之间。 p>

例如：

 < a href =/id = 嘿 >< / A> 
< script> 
 var a = document.getElementById（'hey'）
 a.getAttribute（'href'）///
 a.href //除了保持'/ '
< / script> 
  

这种行为是因为根据 W3C ，href属性必须是一个格式良好的链接。大多数浏览器都遵守这个标准（猜测谁不是？）。

另外还有一种情况是输入 s 检查属性。 DOM属性返回 true 或 false ，而该属性返回字符串checked code>或一个空字符串。

然后，还有一些仅仅单向同步的属性。最好的例子是输入元素的值属性。通过DOM属性更改其值不会更改属性（编辑：检查第一个注释以获得更多精度）。

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

在现实中，只有两种情况需要使用属性：

1. 自定义HTML属性，因为它不同步到DOM属性。


2. 要访问与属性不同步的内置HTML属性，并且您确定需要该属性（例如，原始值一个输入元素）

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

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

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

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 retrieves the attribute of a DOM element, while el.id retrieves the property of this DOM element. They are not the same.

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

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

For example:

<a href="/" id="hey"></a>
<script>
var a = document.getElementById('hey')
a.getAttribute('href') // "/"
a.href // Full URL except for IE that keeps '/'
</script>

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?).

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.

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).

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. 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屋！