如何訪問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（）。