Fordeler og ulemper med kjeder i JavaScript

Selv om kjeder reduserer koden, er innføring av en variabel likevel mer praktisk i de fleste tilfeller. Sammenlign de to eksemplene - nå har jeg introdusert variabelen elem og kan skrive inn et hvilket som helst antall attributter, samtidig som querySelector kun kalles én gang:

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

Nå introduserer jeg ikke en ny variabel, og derfor må jeg kalle querySelector to ganger:

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

Etter min mening ble denne koden mer kompleks, selv om den tar én linje mindre. I tillegg, hvis jeg vil endre verdien av id fra 'elem' til noe annet, må jeg gjøre det på mange steder, noe som ikke er særlig praktisk.

Det er også et annet problem - belastningen på nettleseren. Søk etter elementer på siden, som metoden querySelector gjør, er en ganske treg operasjon (og generelt er ethvert arbeid med sideelementer en treg operasjon - husk dette).

I vårt tilfelle, hvis vi hver gang bruker querySelector, vil nettleseren hver gang behandle HTML-siden og søke etter elementet med den gitte id flere ganger (uansett om id er like - nettleseren vil utføre alle handlinger flere ganger), og utføre unødvendige operasjoner som kan bremse nettleserens ytelse.

Hvis vi derimot bruker variabelen elem - skjer det ingen søk på siden (elementet er allerede funnet og referansen til det ligger i variabelen).

Følgende kode er gitt:

<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);

Angi ulempene med denne koden. Korriger dem.