CODEWITHSUNDEEP
javascripthtml
Kicker
Kicker

Reputation: 606

Traversing DOM with javascript

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?

Upvotes: 1

Views: 125

Answers (4)

Shraddha
Shraddha

Reputation: 884

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"));
});

Upvotes: 0

maioman
maioman

Reputation: 18762

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() )

Upvotes: 1

Rodrigo Kiguti
Rodrigo Kiguti

Reputation: 542

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>

Upvotes: 1

Zakaria Acharki
Zakaria Acharki

Reputation: 67525

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.

Upvotes: 3

Related Questions