Kesalahan Mendapatkan Elemen dalam JavaScript

Kadang-kadang programmer pemula melakukan kesalahan, dengan menggunakan metode querySelectorAll alih-alih metode querySelector untuk mendapatkan satu elemen DOM.

Mari kita lihat ciri khas dari kesalahan ini. Misalkan diberikan sebuah paragraf:

<p>teks</p>

Seorang programmer memutuskan untuk mendapatkan dan mengubah teks paragraf ini. Untuk melakukannya, dia mendapatkan referensi ke elemen ini ke dalam variabel, tetapi keliru menggunakan metode yang salah:

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

Kemudian programmer mencoba mengubah teks paragraf. Namun, teks paragraf tidak berubah:

elem.textContent = '!!!'; // tidak bekerja

Padahal, tidak ada kesalahan yang muncul di konsol. Masalahnya adalah operasi yang valid dilakukan, tapi bukan pada satu elemen, melainkan pada sekelompok elemen. Membaca atau mengubah teks sekelompok elemen tidak bisa dilakukan begitu saja - hanya dengan mengulanginya menggunakan perulangan dan mengakses setiap elemen secara individual.

Bagaimana Mendeteksi Kesalahan

Mari kita lihat bagaimana seorang programmer seharusnya bertindak untuk mendeteksi kesalahan ini. Sebenarnya, dengan memiliki beberapa pengalaman, kesalahan ini mudah dideteksi dari ciri-ciri khasnya.

Misalkan hal itu tidak terjadi. Maka tindakan pertama programmer saat mencari kesalahan haruslah menampilkan nilai variabel ke konsol. Dalam kasusnya, hanya ada satu variabel - elem. Nilai variabel ini perlu ditampilkan dan dilihat apa isinya:

let elem = document.querySelectorAll('p');
console.log(elem); // akan menampilkan array, bukan satu elemen

Di konsol, langsung terlihat bahwa di dalam variabel bukanlah satu elemen, melainkan sebuah array. Ini langsung memberikan petunjuk yang jelas bahwa telah terjadi kesalahan dalam metode untuk mendapatkan elemen.