如何访问JavaScript DOM节点元素上的属性值？

Question

我想了解如何使用原生JavaScript而不依赖于jQuery。我想获得元素上特定属性的值。我怎样才能做到这一点，而不使用jQuery？如果浏览器之间存在不一致，请提及它们。

myImage = document.getElementById("logo"); 
 
console.log('myImage src attribute value'); 
 
console.log('myImage data-foo attribute value');

<img id="logo" src="logo.png" data-foo="bar">

Answer 1

使用.getAttribute()评估价值。

myImage = document.getElementById("logo"); 
 
console.log(myImage.getAttribute('src')); 
 
console.log(myImage.getAttribute('data-foo'));

<img id="logo" src="http://placehold.it/500x500" data-foo="bar">

---

对于HTML5 data-属性，也可以用传统的方法来访问，甚至.dataset（但只有HTML5-compliant browsers）使用，即：.dataset.foo：

myImage = document.getElementById("logo"); 
 
console.log(myImage.getAttribute('src')); 
 
console.log(myImage.dataset.foo);

<img id="logo" src="http://placehold.it/500x500" data-foo="bar">

Answer 2

查看W3C DOM规范：http://www.w3.org/TR/2004/REC-DOM-Level-3-Core-20040407/idl-definitions.html，特别是Element.getAttribute（）。