Virhe elementin hakemisessa JavaScriptissä

Joskus aloittelevat ohjelmoijat tekevät virheen käyttämällä yhden DOM-elementin hakemiseen menetelmää querySelectorAll menetelmän querySelector sijasta.

Katsotaanpa tämän virheen tunnusomaisia piirteitä. Olkoon annettu kappale:

<p>teksti</p>

Eräs ohjelmoija päätti hakea ja muuttaa tämän kappaleen tekstin. Hän tallensi viittauksen tähän elementtiin muuttujaan käyttämällä virheellisesti väärää menetelmää:

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

Sitten ohjelmoija yritti muuttaa kappaleen tekstin. Kappaleen teksti ei kuitenkaan muuttunut:

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

Samalla konsoliin ei ilmestynyt mitään virhettä. Asia on siinä, että suoritettiin sallittu operaatio, mutta ei yhden elementin, vaan ryhmän yli. Ryhmän elementtien tekstin lukeminen tai muuttaminen ei yksinkertaisesti onnistu - vain käymällä ne läpi silmukalla ja kääntymällä jokaiseen elementtiin erikseen.

Kuinka virhe löydetään

Katsotaan, kuinka ohjelmoijan tulisi toimia löytääkseen tämän virheen. Itse asiassa, joillakin kokemuksella, sen on helppo löytää tunnusomaisten merkkien perusteella.

Mutta olkoon niin, että näin ei tapahdu. Silloin ohjelmoijan ensimmäinen toimenpide virheiden etsinnässä tulisi olla muuttujien arvojen tulostaminen konsoliin. Hänen tapauksessaan on vain yksi muuttuja - elem. Tämän muuttujan arvo tulisi tulostaa ja katsoa, mitä siinä on:

let elem = document.querySelectorAll('p');
console.log(elem); // tulostaa taulukon, ei yhden elementin

Konsolissa näkee heti, että muuttujassa ei ole yksi elementti, vaan taulukko. Tämä antaa heti ilmeisen vihjeen siitä, että elementin hakumenetelmässä on tehty virhe.