How to take the src attribute from a list of images and create an array using javascript only?

Asked

Viewed 530 times

0

The goal is a slider-show, but I want to create a dynamic array just by listing some images inside a div using pure javascript, for example:

<div class= "slider">
    <img src="caminho-da-imagem-1"/>
    <img src="caminho-da-imagem-2"/>
    <img src="caminho-da-imagem-3"/>
</div>

However, I don’t know how to go through the images of this div, pick up and save the value of the src attribute in an array.

javascript html5 slideshow

2 answers

3


you can use a querySelectorAll to select all images, then a map to mount the array.

//selecionar todos os elementos <img />  dentro de uma <div /> com à classe ".slider"
var elements = document.querySelectorAll("div.slider > img");

//realizando um mapeamento dos elementos <img />, criando um array com os valores da propriedade "src" destes elementos.
var imgs = [].map.call(elements, function (element, indice) {
  return element.src;
});

console.log(imgs);
<div class="slider">
    <img src="caminho-da-imagem-1"/>
    <img src="caminho-da-imagem-2"/>
    <img src="caminho-da-imagem-2"/>
</div>

2

Using only pure javscript, you can pick up all the images with querySelectorAll

and then scanning the array and passing src to another vector

//pegando todas as imagens dentro da div com classe .slider
var slider = document.querySelectorAll(".slider img");

var imagens_slider = [];

//varrendo array e pegando imagens do src para um novo array
for(cont=0; cont < slider.length; cont++){
   
  imagens_slider.push(slider[cont].src);
  
}

console.log(imagens_slider)
<div class= "slider">
    <img src="caminho-da-imagem-1"/>
    <img src="caminho-da-imagem-2"/>
    <img src="caminho-da-imagem-2"/>
</div>

Browser other questions tagged javascript html5 slideshow

You are not signed in. Login or sign up in order to post.