getAttribute()与Element对象属性？

Question

表达式喜欢Element.getAttribute("id")并Element.id返回相同的东西.

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

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

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

Answer 1

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 属性,而不是属性,因为它们的行为在浏览器之间是不同的.

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

1. 自定义HTML属性,因为它未同步到DOM属性.
2. 要访问一个内置的HTML属性,这是不是从属性同步,并且你确定你所需要的属性(例如,原来value的的input元素).

如果您想要更详细的解释,我强烈建议您阅读本页.它只需要几分钟,但您会对这些信息感到满意(我在此总结).

Answer 2

getAttribute('attribute') 通常将属性值作为字符串返回,完全按照页面的HTML源中的定义.

但是,element.attribute可以返回属性的规范化或计算值.例子:

• <a href="/foo"></a>
  • a.href将包含完整的 URL
• <input type="checkbox" checked>
  • input.checked将为true(布尔值)
• <input type="checkbox" checked="bleh">
  • input.checked将为true(布尔值)
• <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将是一个对象