Fel vid hämtning av element i JavaScript

Ibland gör nybörjarprogrammerare misstag genom att använda metoden querySelectorAll istället för metoden querySelector för att hämta ett DOM-element.

Låt oss titta på de karakteristiska egenskaperna för detta fel. Antag att vi har ett stycke:

<p>text</p>

En programmerare bestämde sig för att hämta och ändra texten i detta stycke. För att göra detta hämtade han en referens till detta element i en variabel, men använde felaktigt fel metod:

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

Sedan försökte programmeraren ändra texten i stycket. Men texten i stycket ändrades inte:

elem.textContent = '!!!'; // fungerade inte

Samtidigt dök inget fel upp i konsolen. Anledningen är att en giltig operation utfördes, men inte på ett element, utan på en grupp. Och att läsa eller ändra texten för en grupp element går inte direkt - bara genom att loopa igenom dem och komma åt varje element var för sig.

Hur man upptäcker felet

Låt oss se hur en programmerare bör agera för att upptäcka detta fel. Med viss erfarenhet är det faktiskt lätt att upptäcka genom de karakteristiska kännetecknen.

Antag att detta dock inte händer. Då bör programmerarens första åtgärd vid felsökning var att skriva ut variablernas värden i konsolen. I hans fall finns det bara en variabel - elem. Han behöver skriva ut värdet på denna variabel och se vad den innehåller:

let elem = document.querySelectorAll('p');
console.log(elem); // kommer att skriva ut en array, inte ett element

I konsolen ser man direkt att variabeln inte innehåller ett element, utan en array. Detta ger omedelbart en uppenbar ledtråd om att ett misstag har gjorts i metoden för att hämta elementet.