Fehler beim Abrufen eines Elements in JavaScript
Manchmal machen Programmieranfänger den Fehler,
für den Abruf eines einzelnen DOM-Elements
die Methode querySelectorAll anstelle der Methode
querySelector zu verwenden.
Lassen Sie uns die charakteristischen Merkmale dieses Fehlers betrachten. Gegeben sei ein Absatz:
<p>text</p>
Ein gewisser Programmierer beschloss, den Text dieses Absatzes abzurufen und zu ändern. Dazu hat er einen Verweis auf dieses Element in einer Variable gespeichert, fälschlicherweise die falsche Methode verwendet:
let elem = document.querySelectorAll('p');
Anschließend versuchte der Programmierer, den Text des Absatzes zu ändern. Der Text des Absatzes änderte sich jedoch nicht:
elem.textContent = '!!!'; // hat nicht funktioniert
Dabei ist kein Fehler in der Konsole aufgetaucht. Der Grund dafür ist, dass eine zulässige Operation ausgeführt wurde, aber nicht an einem Element, sondern an einer Gruppe. Und den Text einer Gruppe von Elementen kann man nicht einfach so lesen oder ändern - nur indem man sie in einer Schleife durchläuft und auf jedes Element einzeln zugreift.
Wie man den Fehler erkennt
Lassen Sie uns betrachten, wie ein Programmierer vorgehen sollte, um diesen Fehler zu erkennen. Mit einiger Erfahrung ist er tatsächlich leicht an den charakteristischen Merkmalen zu erkennen.
Nehmen wir jedoch an, das ist nicht passiert. Dann
sollte die erste Handlung des Programmierers bei der Fehlersuche
die Ausgabe der Variablenwerte
in der Konsole sein. In seinem Fall gibt es nur
eine Variable - elem. Der Wert dieser Variable muss ausgegeben
werden, um zu sehen, was
sich darin befindet:
let elem = document.querySelectorAll('p');
console.log(elem); // gibt ein Array aus, nicht ein Element
In der Konsole ist sofort sichtbar, dass sich in der Variable nicht ein Element, sondern ein Array befindet. Das liefert sofort einen offensichtlichen Hinweis darauf, dass ein Fehler in der Methode zum Abrufen des Elements gemacht wurde.
