javascriptimage

How to get all the image sources on a particular Page using Javascript


I am using a simple script to find an image on a page and get its source.

function img_find() {
    var img_find2 = document.getElementsByTagName("img")[0].src;
    return img_find;
}

However when I go to write this function on my page it only finds the first image and then stops. What is the best way to have it print all of the image src's on the current page? Thanks!


Solution

  • You indeed told the code to do so. Don't do that. Just tell it to loop over all images and push the src of each in an array and return the array with all srcs instead.

    function img_find() {
        return Array.from(document.getElementsByTagName("img")).map(i => i.src);
    }
    

    Or when you're not on ES6 yet

    function img_find() {
        var imgs = document.getElementsByTagName("img");
        var imgSrcs = [];
        
        for (var i = 0; i < imgs.length; i++) {
            imgSrcs.push(imgs[i].src);
        }
    
        return imgSrcs;
    }