Eroare la obținerea elementului în JavaScript

Uneori programatorii începători fac greșeala de a utiliza pentru obținerea unui singur element DOM metoda querySelectorAll în loc de metoda querySelector.

Să ne uităm la caracteristicile distinctive ale acestei erori. Să presupunem că avem un paragraf:

<p>text</p>

Un programator a decis să obțină și să modifice textul acestui paragraf. Pentru a face acest lucru, a obținut o referință la acest element într-o variabilă, utilizând din greșeală metoda greșită:

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

Apoi programatorul a încercat să modifice textul paragrafului. Cu toate acestea, textul paragrafului nu s-a schimbat:

elem.textContent = '!!!'; // nu a funcționat

În același timp, nici o eroare în consolă nu a apărut. Motivul este că a fost efectuată o operație permisă, dar nu asupra unui singur element, ci asupra unui grup. Și citirea sau modificarea textului unui grup de elemente pur și simplu nu este posibilă - doar prin iterarea lor cu un ciclu și accesând fiecare element individual.

Cum să detectezi eroarea

Să vedem cum ar trebui să acționeze programatorul pentru a detecta această eroare. De fapt, având ceva experiență, este ușor de detectat după caracteristicile distinctive.

Să presupunem că acest lucru, totuși, nu s-a întâmplat. Atunci prima acțiune a programatorului în căutarea erorilor ar trebui să fie afișarea valorilor variabilelor în consolă. În cazul său există doar o singură variabilă - elem. Trebuie să afișați valoarea acestei variabile și să vă uitați ce conține:

let elem = document.querySelectorAll('p');
console.log(elem); // va afișa un array, nu un singur element

În consolă se vede imediat că în variabilă nu se află un singur element, ci un array. Acest lucru oferă imediat un indiciu evident că a fost făcută o greșeală în metoda de obținere a elementului.