Fout bij het ophalen van een element in JavaScript
Soms maken beginnende programmeurs de fout
om voor het ophalen van één DOM-element
de methode querySelectorAll te gebruiken in plaats van de methode
querySelector.
Laten we kijken naar de karakteristieke eigenschappen van deze fout. Stel er is een alinea:
<p>tekst</p>
Een programmeur besloot om de tekst van deze alinea op te halen en te wijzigen. Hiervoor haalde hij een verwijzing naar dit element op in een variabele, maar gebruikte per ongeluk de verkeerde methode:
let elem = document.querySelectorAll('p');
Vervolgens probeerde de programmeur de tekst van de alinea te wijzigen. Echter, de tekst van de alinea veranderde niet:
elem.textContent = '!!!'; // werkte niet
Er verscheen geen foutmelding in de console. Het punt is dat er een toegestane operatie werd uitgevoerd, maar niet op één element, maar op een groep. En de tekst van een groep elementen lezen of wijzigen kan niet zomaar - alleen door ze met een lus te doorlopen en elk element afzonderlijk te benaderen.
Hoe de fout te ontdekken
Laten we kijken hoe een programmeur zou moeten handelen om deze fout te ontdekken. Met enige ervaring is ze eigenlijk gemakkelijk te ontdekken aan de hand van karakteristieke kenmerken.
Stel dat dit echter niet gebeurt. Dan
moet de eerste actie van een programmeur bij het zoeken naar fouten
het uitvoeren van variabelewaarden
naar de console zijn. In zijn geval is er maar
één variabele - elem. De waarde van deze variabele moet worden uitgevoerd
en er moet worden gekeken wat
erin zit:
let elem = document.querySelectorAll('p');
console.log(elem); // geeft een array weer, en niet één element
In de console is meteen te zien dat er in de variabele niet één element zit, maar een array. Dit geeft meteen een duidelijke hint dat er een fout is gemaakt in de methode voor het ophalen van het element.
