Elemendi hankimise viga JavaScriptis

Mõnikord teevad algajad programmeerijad vea, kasutades ühe DOM elemendi hankimiseks meetodit querySelectorAll meetodi querySelector asemel.

Vaatame selle vea iseloomulikke omadusi. Olgu antud lõik:

<p>text</p>

Mingi programmeerija otsustas selle lõigu teksti hankida ja muuta. Selleks sai ta viite sellele elemendile muutujasse, kasutades ekslikult vale meetodit:

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

Seejärel proovis programmeerija muuta lõigu teksti. Kuid lõigu tekst ei muutunud:

elem.textContent = '!!!'; // ei toimunud

Samal ajal ei ilmunud konsooli ühtegi viga. Asi on selles, et tehti kehtiv operatsioon, kuid mitte ühe elemendi, vaid rühma peal. Aga rühma elementide teksti lugeda või muuta lihtsalt nii ei saa - ainult läbi nende tsüklise käimise ja iga elemendi eraldi külastamise.

Kuidas tuvastada viga

Vaatame, kuidas programmeerija peaks toimima, et see viga tuvastada. Tegelikult on seda mõne kogemusega lihtne tuvastada iseloomulike tunnuste järgi.

Kuid olgu, et seda ei juhtunud. Siis peaks programmeerija esimeseks tegevuseks vigade otsimisel olema muutujate väärtuste väljastamine konsooli. Tema puhul on ainult üks muutuja - elem. On vaja väljastada selle muutuja väärtus ja vaadata, mis selles on:

let elem = document.querySelectorAll('p');
console.log(elem); // väljastab massiivi, mitte ühte elementi

Konsoolis on kohe näha, et muutujas pole üks element, vaid massiiv. See annab kohe ilmselge vihje, et on tehtud viga elemendi hankimise meetodis.