ელემენტის მიღების შეცდომა JavaScript-ში

ზოგჯერ დამწყები პროგრამისტები უშვებენ შეცდომას, ერთი DOM ელემენტის მისაღებად იყენებენ მეთოდს querySelectorAll მეთოდის querySelector ნაცვლად.

მოდით შევხედოთ ამ შეცდომის დამახასიათებელ ნიშნებს. მოდით გვქონდეს აბზაცი:

<p>ტექსტი</p>

რაღაც პროგრამისტმა გადაწყვიტა მიეღო და შეეცვალა ამ აბზაცის ტექსტი. ამისთვის მან მიიღო მითითება ამ ელემენტზე ცვლადში, შეცდომით გამოიყენა არასწორი მეთოდი:

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

შემდეგ პროგრამისტმა სცადა შეეცვალა აბზაცის ტექსტი. თუმცა, აბზაცის ტექსტი არ შეცვლილა:

elem.textContent = '!!!'; // არ იმუშავა

ამ შემთხვევაში კონსოლში არანაირი შეცდომა არ გამოჩნდა. საქმე იმაშია, რომ შესრულდა დასაშვები ოპერაცია, მაგრამ არა ერთ ელემენტზე, არამედ ჯგუფზე. ხოლო ჯგუფის ელემენტების ტექსტის წაკითხვა ან შეცვლა პირდაპირ არ შეიძლება - მხოლოდ მათი ციკლით გადარჩევით და თითოეულზე ცალკე მიმართვით.

როგორ აღმოვაჩინოთ შეცდომა

მოდით შევხედოთ, როგორ უნდა იმოქმედოს პროგრამისტმა, რათა აღმოაჩინოს ეს შეცდომა. სინამდვილეში, გარკვეული გამოცდილების მქონე, მისი აღმოჩენა მარტივია დამახასიათებელი ნიშნებით.

მოდით დავუშვათ, რომ ეს არ მოხდა. მაშინ პროგრამისტის პირველი მოქმედება შეცდომების ძიებისას უნდა იყოს ცვლადების მნიშვნელობების გამოტანა კონსოლში. მის შემთხვევაში არის მხოლოდ ერთი ცვლადი - elem. საჭიროა გამოვიტანოთ მნიშვნელობა ამ ცვლადის და ვნახოთ, რა დევს მასში:

let elem = document.querySelectorAll('p');
console.log(elem); // გამოიტანს მასივს, და არა ერთ ელემენტს

კონსოლში მაშინვე ჩანს, რომ ცვლადში არა ერთი ელემენტია, არამედ მასივი. ეს მაშინვე აძლევს აშკარა მინიშნებას იმის შესახებ, რომ დაშვებულია შეცდომა ელემენტის მიღების მეთოდში.