JavaScript-de zynjyrlaryň oňat we ýaramaz taraplary

Zynjyrlar kody gysgaltsa-da, köplenç ýagdaýlarda üýtgeýjini girizmek has amatlydyr. Iki mysaly deňeşdiriň - men indi elem üýtgeýjini girizdim we islegimçä köplenç atribut ýazyp bilerin, munuň bilen querySelector diňe bir gezek çaýrylýar:

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

Indi bolsa men täze üýtgeýji girizmeýärin, şonuň üçin men querySelector iki gezek çaýyrmaly:

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

Meniň pikirimçe, bu kody kynlaşdy, eger-de bir setir az ýer eýelesem. Mundan başga-da, eger men id bahasyny 'elem'-den başga bir zada üýtgetmek islesem, men muny köp ýerlerde etmeli, bu örän amatly däl.

Başga bir mesel hem bar - brauzere ýüklenme. Sahypadaky elementleri gözlemek, ony usul querySelector edýär, bu örän haýal amal (we umuman, sahypa elementleri bilen işlemek - bu haýal amaldyr - muny ýadyňyzdan çykarmaň).

Bizim ýagdaýymyzda, eger her gezek ulanýan bolsak querySelector, onda brauzer her gezek HTML sahypasyny işläp we gözläp başlar berlen id bilen elementi birnäçe gezek (id birmeňzeş bolsa-da - brauzer hemme hereketleri birnäçe gezek eder), peýdasyz amallary ýerine ýetirip, bu brauzeriň işini haýallandyryp biler.

Eger-de biz elem üýtgeýjini ulanýan bolsak - sahypada gözleme bolmaýar (element eýýäm tapyldy we ona salgysy ýatda saklanýar üýtgeýjide).

Aşakdaky kod berlen:

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

Bu kodyň ýetmezçiliklerini görkeziň. Olary düzediň.