Pfthb

Background:

I'm new to JS (started learning this week) and I've been playing around with the Chrome Dev Tools and the Console on the following website: https://www.pokemon.com/us/pokedex/

I went into the dev tools element selector and located the with class="results" which is basically all of the pokemon listed.

I edited the tag to include an id (id="poke") so I could play around with it.

The following is my code that outputs an array with all of the links to the pokemon image assets:

function listPokemon()
 var pokeAssets = document.getElementById('poke').getElementsByTagName('img');
 var i;
 for (i = 0; i < pokeAssets.length; i++) 
 console.log (pokeAssets[i]);
 
 

Question:

Is there a way to download all of the image assets from that array without having to do so manually using vanilla javascript?

Quick answer would be no, javascript can't really download files onto your machine.
You don't really need JS to get the image urls, since each one is the same url preceeded with the pokemons pokedex number

https://assets.pokemon.com/assets/cms2/img/pokedex/detail/004.png
004 being the pokemon number

You could iterate this number in say a python script, which could download the images.

One could create an array with all absolute links. Then create a temporary anchor tag <a> which holds the image as a source. Then use the click event to download it. However your browser needs to be compatible

var links = [ "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/001.png", "https://assets.pokemon.com/assets/cms2/img/pokedex/detail/002.png"]
function download(uri, name) 
 var link = document.createElement("a");
 link.download = name;
 link.href = uri;
 link.click();

var counter = 0;
for (i = 0; i < links.length; i++) 
 
 download(links[i], "pokemon "+ counter);
 counter++;

First time i excuted this i was navigated to the website of pokemon.com. when i tried it in their developer console it worked (chrome version 70.xxx) I had to give consent though by pressing Allow: