Ralat Mendapatkan Elemen dalam JavaScript
Kadang-kadang pengaturcara pemula melakukan kesilapan,
dengan menggunakan kaedah querySelectorAll untuk mendapatkan satu elemen DOM
berbanding kaedah querySelector.
Mari kita lihat ciri-ciri khas ralat ini. Katakan diberikan satu perenggan:
<p>teks</p>
Seorang pengaturcara ingin mendapatkan dan mengubah teks perenggan ini. Untuk itu, dia mendapatkan rujukan kepada elemen ini dalam pembolehubah, dengan tersilap menggunakan kaedah yang salah:
let elem = document.querySelectorAll('p');
Kemudian pengaturcara cuba mengubah teks perenggan. Namun, teks perenggan tidak berubah:
elem.textContent = '!!!'; // tidak berfungsi
Tiada sebarang ralat muncul dalam konsol. Masalahnya ialah operasi yang sah telah dilaksanakan, bukan pada satu elemen, tetapi pada sekumpulan elemen. Membaca atau mengubah teks sekumpulan elemen tidak boleh dilakukan begitu sahaja - hanya dengan mengulanginya menggunakan gelung dan mengakses setiap elemen secara berasingan.
Bagaimana Mengesan Ralat
Mari kita lihat bagaimana pengaturcara perlu bertindak untuk mengesan ralat ini. Sebenarnya, dengan sedikit pengalaman, ia mudah dikesan melalui ciri-ciri khas.
Katakan itu, bagaimanapun, tidak berlaku. Maka
tindakan pertama pengaturcara ketika mencari ralat
perlah menjalankan nilai pembolehubah
ke konsol. Dalam kesnya, hanya ada
satu pembolehubah - elem. Nilai pembolehubah ini perlu dikeluarkan
dan lihat apa yang terkandung di dalamnya:
let elem = document.querySelectorAll('p');
console.log(elem); // akan mengeluarkan array, bukan satu elemen
Dalam konsol, jelas kelihatan bahawa dalam pembolehubah bukan satu elemen, tetapi array. Ini serta-merta memberikan petunjuk yang jelas bahawa kesilapan telah dilakukan dalam kaedah untuk mendapatkan elemen.
