如何访问 JavaScript DOM Node 元素上的属性值

Question

我正在尝试学习如何在不依赖jQuery的情况下使用本机JavaScript。我想获取元素上特定属性的值。如何在不使用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 的浏览器），即： .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（）。