The goal is a slider-show, however 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 do not know how to go through the images of this div, get and save the value of the src attribute in an array.
You can use querySelectorAll to select all images, then map to mount 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>Using pure javscript, you can get all images with querySelectorAll
and then scanning the array and passing the 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>