getAttribute（）与Element对象的属性？

像Element.getAttribute("id")和Element.id这样的表达式会返回相同的结果。getAttribute（）与Element对象的属性？

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

这些方法有没有任何跨浏览器问题，如getAttribute()和setAttribute()？

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

2012-04-23 P K

相似的问题：[属性和HTML]（http://stackoverflow.com/questions/6003819/properties-and-attributes-in-html） – sleske 2013-10-12 18:14:20

101

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"或空字符串。

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

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

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

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

如果您想要更详细的解释，我强烈建议您阅读this page。它只会花你几分钟，但你会很高兴的信息（我在这里总结）。

来源

2012-04-23 12:25:02

+1通常很好的建议。尽管如此，同步的东西并没有什么意义：输入的'value'属性从属性获得它的初始值，但是根本不与它绑定。 'value'属性完全同步，而不是'defaultValue'属性。同样'checked'和'defaultChecked'。除了在旧的IE（<= 7和以后的兼容模式）之外，它破坏了'getAttribute（）'和'setAttribute（）'。 – 2012-04-23 12:29:40

添加您的评论作为“进一步解释”:-) – 2012-04-23 12:33:20

感谢蒂姆和弗洛里安:) – 2012-04-23 12:35:17

.id保存了函数调用开销。（这是非常小的，但你问。）

来源

2012-04-23 12:12:02 gdoron

嗨gdoron，只是为了好奇：我试图找到对此的“官方”解释（超出经验测试，这足够清楚了）），但没有成功。你有任何关于它的链接？ – mamoo 2012-04-23 12:19:05

根据this jsPerf testgetAttribute是比id属性更慢。

奇怪的是这两个语句在IE8表现非常糟糕（相对于其他浏览器）。

来源

2012-04-23 12:13:50 mamoo

基准函数开销是所有邪恶的根源... – gdoron 2012-04-23 12:19:50

除非有特殊原因，否则请务必使用这些属性。

getAttribute()和setAttribute()老年IE（和更高版本兼容模式）
性质是更方便的（特别是那些对应于布尔属性）被破坏

有some exceptions：

访问<form>元素的属性
访问自定义属性（虽然我不鼓励使用自定义属性的话）

我写有关此主题的几次上SO：

来源

2012-04-23 12:21:05

在IE 8之前，属性和属性[被同等对待]（http://msdn.microsoft.com/en-us/library/dd347148（v = VS.85 ）的.aspx）。正如你之前提到的，房地产是要走的路。 – 2012-04-23 17:21:44

@MattMcDonald：是的，这就是我所指的破碎。我没有在这个答案中扩展它，因为我觉得我已经做了足够的其他答案，我链接到:) – 2012-04-23 17:32:52

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。宽度将是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将是一个对象

来源

2012-04-23 13:24:05

尝试例如低于完全理解这一点。对于下面的DIV

<div class="myclass"></div>

的Element.getAttribute('class')将返回myclass但你必须使用Element.className从DOM属性进行检索。

来源

2017-03-20 06:20:14 Hrushikesh

一个区域，这是一个很大的区别是基于属性的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>

直接设置并不能反映价值的属性自定义属性的DIV，而不是由我们的属性选择器选择（div[custom]）在CSS中。

但是，使用setAttribute设置自定义属性的div可以使用css属性选择器进行选择并进行相应设置。

来源

2017-04-27 00:52:34 Jsilvermist

getAttribute（）与Element对象的属性？

回答

相关问题