Prednosti in slabosti veriženja v JavaScript

Kljub temu, da verižice skrajšajo kodo, je v večini primerov vnos spremenljivke vseeno bolj priročen. Primerjajta dva primera - zdaj sem vnesel spremenljivko elem in lahko zapišem poljubno število atributov, pri temer se querySelector pokliče samo enkrat:

let elem = document.querySelector('#elem');
elem.value = 'www';
elem.type  = 'submit';

Zdaj ne vnašam nove spremenljivke in zato moram poklicati querySelector dvakrat:

document.querySelector('#elem').value = 'www';
document.querySelector('#elem').type  = 'submit';

Po mojem mnenju je ta koda postala bolj zapletena, čeprav zavzema eno vrstico manj. Poleg tega, če želim spremeniti vrednost id iz 'elem' na kakšno drugo, bom moral to storiti na več mestih, kar ni zelo priročno.

Obstaja še ena težava - obremenitev brskalnika. Iskanje elementov po strani, ki ga izvaja metoda querySelector, je precej počasna operacija (in na splošno je katero koli delo z elementi strani - počasna operacija - zapomnite si to).

V našem primeru, če vsakič uporabimo querySelector, bo brskalnik vsakič obdelal HTML stran in iskal element z danim id večkrat (ni pomembno, da so id enaki - brskalnik bo izvedel vsa dejanja večkrat), in izvajal neuporabne operacije, ki lahko upočasnijo delovanje brskalnika.

Če pa uporabimo spremenljivko elem - ne pride do nobenega iskanja po strani (element je že najden in sklic nanj leži v spremenljivki).

Podana je naslednja koda:

<img id="image" src="avatar.png" width="300" height="500">

console.log(document.querySelector('#image').src);
console.log(document.querySelector('#image').width);
console.log(document.querySelector('#image').height);

Opišite pomanjkljivosti te kode. Popravite jih.