JavaScript-de element alyş ýalňyşlygy

Käwagt täze programmistler bir DOM elementi alyş üçin querySelector usuly ýerine querySelectorAll usulyny ulanmak ýaly ýalňyşlyk edýärler.

Geliň bu ýalňyşlygyň aýratynlyklaryna göz aýlalyň. Diňe bir abzas bolsun:

<p>text</p>

Bir programmist bu abzasyň tekstini alyp üýtgetmek isledi. Bunun üçin ol elemente salgy almak üçin bir üýtgeýjide saklady, ýalňyşlyk bilen dogry däl usuly ulanyp:

let elem = document.querySelectorAll('p');

Soňra programmist abzasyň tekstini üýtgetmek synady. Şeýle-de, abzasyň teksti üýtgenok:

elem.textContent = '!!!'; // işlemedi

Şol wagt konsolda hiç hili ýalňyş ýüze çykman. Sebäbi, rugsat berlen amal ýerine ýetirildi, ýöne bir element üçin däl-de, topar üçin. Topar elementleriň tekstini diňe okap ýa-da üýtgetmek mümkin däl - diňe olary aýlamak we her elemente aýratynlykda ýüzlenmek bilen.

Ýalňyşlygy nädip tapmaly

Geliň, programmist ýalňyşlygy nädip tapmalydygyna seredeliň. Aslynda, birnäçe tejribe bilen, ony aýratyn alamatlary boýunça aňsat tapyp bolar.

Şeýle bolmady diýeliň. Şonda programmist ýalňyşlyklary gözlemekde ilkinji hereketi üýtgeýjileriň bahalaryny konsola çykarmak bolmaly. Onuň ýagdaýynda diňe bir üýtgeýji bar - elem. Bu üýtgeýjiniň bahasyny çykarmaly we içinde näme ýatandygyna göz etmeli:

let elem = document.querySelectorAll('p');
console.log(elem); // massiw çykarar, bir element däl

Konsolda derrew görünýär, üýtgeýjide bir element däl, eýsem massiw. Bu derrew element alyş usulynda ýalňyşlyk edilendigine düşündiriş berýär.