How to access attribute values on a JavaScript DOM Node Element?

Question

I'm trying to learn how to use native JavaScript without relying on jQuery. I would like to get the value of a specific attribute on an element. How can I do this without using jQuery? If there are inconsistencies between browsers, please mention them.

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">

possible duplicate of Cross-browser, javascript getAttribute() method? — Marko Gresak
– Marko Gresak, Commented Jan 20, 2015 at 23:27

Terry · Accepted Answer · 2015-01-20 23:43:01Z

2

Use .getAttribute() to assess the value.

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">

For the HTML5 data- attributes, you can still access with the conventional method, or even use .dataset (but only with HTML5-compliant browsers), i.e: .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">

edited Jan 20, 2015 at 23:43

answered Jan 20, 2015 at 23:25

Terry

66.7k16 gold badges107 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to access attribute values on a JavaScript DOM Node Element?

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related