how to get query selector data attribute in javascript?

Question

I have a custom JS function that creates/inject a custom link into all elements in the page when it loads.

Before manipulation:

<div class="myimagediv">
       <img class="img-tag" src="#" data-src="alternative content I need" alt="">
    </div>

and now this custom function manipulates the element:

[].forEach.call(document.querySelectorAll('.myimagediv'), function(elem) {
            old_html = elem.innerHTML;

            new_html = '<a class="customlink" href="' + elem.querySelector('img').src + '">' + old_html + '</a>';
            elem.innerHTML = new_html;
        });

The newly manipulate element:

<div class="myimagediv">
      <a class="customlink" href="this should be the content of my data-src" title="">
          <img class="img-tag" src="#" data-src="alternative content I need" alt="">
      </a>    
    </div>

How can I get the data-src attribute from the IMG tag and inject it into my newly created custom link function?

I should use a var? and then call it, but I cannot grasp how to read the data-src and re-use it.

Any help would be very much appreciated.

var dataSrc = elem.querySelector('img').getAttribute('data-src'); — Jared Smith
– Jared Smith, Commented Sep 11, 2017 at 14:57
@Jared Smith please submit it as answer as that is exactly what I was looking for! Thanks! :-) — user2513846
– user2513846, Commented Sep 11, 2017 at 15:12
@user2513846 - Take a look for my example - especially how to read multi word data attributes like data-something-else. — user6748331
– user6748331, Commented Sep 11, 2017 at 15:28

Jared Smith · Accepted Answer · 2017-09-11 15:17:13Z

16

Just use the getAttribute method of the image element:

var dataSrc = elem.querySelector('img').getAttribute('data-src');

answered Sep 11, 2017 at 15:17

Jared Smith

22.3k5 gold badges50 silver badges98 bronze badges

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

Comments

user6748331 · Accepted Answer · 2017-09-11 15:27:32Z

5

Example - how to read data-* attrs in vanilla JS:

var elm = document.querySelector('any-tag')
var first = elm.dataset.whatever
var second = elm.dataset.somethingElse // camel case for multi-word

console.log(first, second)

<any-tag data-whatever="value1" data-something-else="value2" />

answered Sep 11, 2017 at 15:27

user6748331

Comments

OrcusZ · Accepted Answer · 2017-09-11 15:08:18Z

2

You just need to get it like any other attribute

<div id="test" data-myattr="toto">

</div>

alert(document.getElementById("test").getAttribute("data-myattr"));

JSFIDDLE

EDIT FROM @waldemarice:

HtmlElement contains the dataset property to get attribut prefixed by data-

    <div id="test" data-myattr="toto">

    </div>

  alert(document.getElementById("test").dataset.myattr);

JSFIDDLE

edited Sep 11, 2017 at 15:08

answered Sep 11, 2017 at 14:59

OrcusZ

3,6822 gold badges33 silver badges50 bronze badges

1 Comment

user6748331 Over a year ago

For data atrributes there is dataset. No need read it as any other attrs.

onin · Accepted Answer · 2021-07-23 20:44:18Z

0

document.querySelectorAll() example:

document.querySelectorAll('.className').forEach(elem => console.log(elem.getAttribute('interesting-attribute')));

answered Jul 23, 2021 at 20:44

onin

5,8004 gold badges43 silver badges58 bronze badges

Collectives™ on Stack Overflow

how to get query selector data attribute in javascript?

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related