Traversing DOM with javascript

Question

I have a piece of HTML like this:

<div id="contentblock">
    <div id="producttile_137" class="producttile">
        <a href="#" class="tile">
        <img src="images/Bony A-Booster.jpg" alt="Bony A-Booster - 50 ml">
            Bony A-Booster
            <span class="price">€10.95</span>
        </a>
    </div>
    <div id="producttile_138" class="producttile">
        <a href="#" class="tile">
        <img src="images/Bony B-Booster.jpg" blt="Bony B-Booster - 50 ml">
            Bony B-Booster
            <span class="price">€20.95</span>
        </a>
    </div>
    <div>Aditional info</div>
</div>

I need to get all <img /> sources but with pure Javascript. I can get element by class name document.getElementsByClassName('producttile') but is it possible to traversing in pure JS to <img /> ang get src="" value?

Whats your problem with document.getElementsByClassName or document.getElementsByTagName? This methods are build in — Philipp
– Philipp, Commented Mar 1, 2016 at 16:20

Zakaria Acharki · Accepted Answer · 2016-03-01 16:24:38Z

3

You could use :

document.getElementsByClassName('class_name');
//OR
document.getElementsByTagName('img');
//OR
document.querySelectorAll('img');

All the previous methods are pure javascript and return nodes list so you could loop through them to get the src of every node.

Hope this helps.

answered Mar 1, 2016 at 16:24

Zakaria Acharki

67.5k15 gold badges79 silver badges106 bronze badges

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

1 Comment

Sebastien Daniel Over a year ago

As a note, the mentionned methods return HTML collections (array-like structures). Not being true arrays they won't have Array methods such as forEach, reduce, map, .... To make use of those - very useful - methods, use the above methods, but call them with slice, such as: Array.prototype.slice.call(method); then you'll have a true Array of the HTML elements.

Rodrigo Kiguti · Accepted Answer · 2016-03-01 16:30:40Z

You can use the function getElementsByTagName.

function listImages() {
  var img = document.getElementsByTagName('img');
  for (var i in img) {
    if (img[i].src) {
      console.log(img[i].src);
    }
  }
}

<div id="contentblock">
    <div id="producttile_137" class="producttile">
        <a href="#" class="tile">
        <img src="images/Bony A-Booster.jpg" alt="Bony A-Booster - 50 ml">
            Bony A-Booster
            <span class="price">€10.95</span>
        </a>
    </div>
    <div id="producttile_138" class="producttile">
        <a href="#" class="tile">
        <img src="images/Bony B-Booster.jpg" blt="Bony B-Booster - 50 ml">
            Bony B-Booster
            <span class="price">€20.95</span>
        </a>
    </div>
    <div>Aditional info</div>
</div>

<a href="#" onclick="javascript:listImages()">Show Images</a>

maioman · Accepted Answer · 2016-03-01 16:41:08Z

one possible solution to get img and the src value:

var imgs = document.querySelectorAll('img')

var res = [].slice.call(imgs).map(x=>x.getAttribute("src"))
//or in es5
//.map(function(x){return x.getAttribute("src")})
//[].slice.call is necessary to transform nodeList in array
//otherwise you can use an regular for loop

console.log(res)

<div id="contentblock">
    <div id="producttile_137" class="producttile">
        <a href="#" class="tile">
        <img src="images/Bony A-Booster.jpg" alt="Bony A-Booster - 50 ml">
            Bony A-Booster
            <span class="price">€10.95</span>
        </a>
    </div>
    <div id="producttile_138" class="producttile">
        <a href="#" class="tile">
        <img src="images/Bony B-Booster.jpg" blt="Bony B-Booster - 50 ml">
            Bony B-Booster
            <span class="price">€20.95</span>
        </a>
    </div>
    <div>Aditional info</div>
</div>

wanting to directly select an element based on it's src value you could also do this :

document.querySelector('[src="images/Bony A-Booster.jpg"]')

(assuming there is one element you can use querySlector() instead of querySelectorAll() )

Shraddha · Accepted Answer · 2020-06-02 01:01:57Z

0

You can use document.getElementsByTagName() to fetch all the img tags as a HTMLCollection. And then, you can iterate over the HTMLCollection and get the src attribute value by using getAttribute() method as below:

const imgElements = document.getElementsByTagName("img");

Array.from(imgElements).forEach(function(element){
  console.log(element.getAttribute("src"));
});

answered Jun 2, 2020 at 1:01

Shraddha

9048 silver badges14 bronze badges

Collectives™ on Stack Overflow

Traversing DOM with javascript

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related