Mengapa jQuery atau getElementById tidak dapat mencari elemen?

Question

Apakah sebab yang mungkin mengapa elemen tidak boleh ditemui oleh

document.getElementById、$("#id") atau mana-mana kaedah DOM/pemilih jQuery yang lain?

Contoh soalan termasuk:

• jQuery secara senyap gagal mengikat pengendali acara
• Kaedah "pengambil" jQuery (.val()、>.html()、.text()) 返回 undefined
• Kaedah DOM standard mengembalikan null mengakibatkan ralat berikut:

Uncaught TypeError: Tidak dapat menetapkan sifat nol '...'

Ralat Jenis Tidak Ditangkap: Tidak dapat menetapkan sifat pada null (menetapkan '...')

Ralat Jenis Tidak Ditangkap: Tidak dapat membaca sifat '...' nol

Ralat Jenis Tidak Ditangkap: Tidak dapat membaca sifat nol (baca '...')

Bentuk yang paling biasa ialah:

Uncaught TypeError: Tidak boleh menetapkan sifat 'onclick' kepada null

Ralat Jenis Tidak Ditangkap: Tidak dapat membaca sifat 'addEventList ener' null

Ralat Jenis Tidak Ditangkap: Tidak dapat membaca 'gaya' sifat nol

Answer 1

Ringkas: Sebab elemen yang anda cari belum wujud lagi dalam dokumen.

---

Untuk selebihnya jawapan ini saya akan menggunakan seperti getElementById ，但这同样适用于 getElementsByTagName, < code>querySelector, serta mana-mana kaedah DOM lain untuk memilih elemen.

Sebab yang mungkin

Tiga sebab mengapa unsur

mungkin tidak wujud:

1. Elemen dengan ID yang diluluskan tidak wujud dalam dokumen. Anda hendaklah menyemak semula sama ada ID yang anda hantar kepada getElementById sebenarnya sepadan dengan ID elemen sedia ada dalam HTML (dihasilkan) dan supaya anda tidak tersilap mengeja ID tersebut (ID adalah sensitif huruf besar/kecil!).

   Jika anda menggunakan getElementById，请确保您仅提供元素的 ID（例如 document.getElemntById("the-id “））。如果您使用的方法接受 CSS 选择器（例如 querySelector），请确保在 ID 之前包含 # 以表明您正在查找ID（例如，document.querySelector("#the-id")）。您不能不将#与getElementById一起使用，并且必须将其与querySelector一起使用和类似的。另请注意，如果 ID 中包含在 CSS 标识符（例如 .；包含 . 字符的 id 属性是不好的做法，但有效），您必须使用 querySelector (document.querySelector("#the\.id"))) 时转义这些内容，但使用 getElementById ( >document.getElementById("the.id"), pastikan anda

   hanya
berikan ID elemen (cth. document.getElemntById("the-id ")). Jika anda menggunakan kaedah yang menerima pemilih CSS (contohnya, querySelector), pastikan anda memasukkan # sebelum ID untuk menunjukkan bahawa anda sedang mencari ID ( contohnya, document.querySelector ("#the-id")). Anda tidak boleh
2. tidak

   menggunakan # dengan getElementById, dan

   mesti
menggunakannya dengan querySelector dan seumpamanya. Juga ambil perhatian bahawa jika ID mengandungi aksara yang tidak sah dalam (cth. .; atribut id yang mengandungi . aksara adalah amalan buruk, tetapi sah), anda mesti menggunakan querySelector < /code> (document.querySelector("#the\.id"))) , tetapi gunakan

( >document.getElementById("the.id") ). iframe 中（这是它自己的文档）。当您搜索包含 iframe

Elemen itu tidak wujud semasa anda memanggil

. iframe 或类似文件中），您需要查看 iframe 中的文档，而不是父文档，也许可以通过获取 iframe 元素并使用其 < code>contentDocument

🎜 Walaupun anda boleh melihat elemen pada halaman, ia tiada dalam dokumen yang anda tanya kerana ia terdapat dalam dokumen untuk elemen dalam 🎜 yang tidak dicari. 🎜 🎜 🎜 🎜Jika masalahnya ialah sebab 3 (pada atribut 🎜🎜 untuk mengakses dokumentasinya (asal yang sama sahaja)).

Sebab kedua - ia belum ada - sangat biasa. Pelayar menghuraikan dan memproses HTML dari atas ke bawah. Ini bermakna bahawa sebarang panggilan ke elemen DOM yang berlaku sebelum elemen DOM muncul dalam HTML akan gagal.

Pertimbangkan contoh berikut:

sssccc

div 出现在script之后。执行脚本时，该元素尚不存在，并且 getElementById 将返回 null.

jQuery

Ini juga terpakai kepada semua pemilih jQuery. Jika anda tersalah ejapemilih anda, atau anda cuba memilihnya sebelum ia benar-benar wujud, jQuery tidak akan menemuinya.

Masalah tambahan ialah apabila jQuery tidak ditemui kerana anda memuatkan skrip tanpa protokol dan menjalankannya daripada sistem fail:

sssccc

Sintaks ini digunakan untuk membenarkan skrip dimuatkan melalui HTTPS pada halaman dengan protokol https:// dan versi HTTP pada halaman dengan protokol http://

Ia mempunyai kesan sampingan yang malang apabila cuba memuatkan file://somecdn.somewhere.com...

tetapi gagal

---

Penyelesaian

Sebelum memanggil getElementById (atau mana-mana kaedah DOM dalam hal itu), pastikan elemen yang anda ingin akses wujud, iaitu DOM dimuatkan.

Cuma letak JavaScript selepas elemen DOM yang sepadan untuk memastikan ini

sssccc

Dalam kes ini, anda juga boleh meletakkan kod sebelum teg badan penutup () (semua elemen DOM akan tersedia semasa melaksanakan skrip).

Penyelesaian lain termasuk mendengar memuat load ^[MDN] 或 DOMContentLoaded[MDN] atau DOMContentLoaded acara

[MDN]

. Dalam kes ini, tidak kira di mana dalam dokumen anda meletakkan kod JavaScript, cuma ingat untuk meletakkan semua kod pengendalian DOM dalam pengendali acara. Contoh:

window.onload = function() {
    // process DOM elements here
};

// or

// does not work IE 8 and below
document.addEventListener('DOMContentLoaded', function() {
    // process DOM elements here
});

Lihat artikel ini di quirksmode.org untuk mendapatkan maklumat lanjut tentang pengendalian acara dan perbezaan penyemak imbas.

jQueryhttp: 或 https:

Mula-mula pastikan jQuery dimuatkan dengan betul.

Gunakan alat pembangun penyemak imbas anda load/DOMContentLoaded 事件正是 jQuery 使用 .ready() ketahui jika fail jQuery ditemui dan betulkan URL jika tidak (cth. tambahkan skema pada permulaan, laraskan laluan, dsb.) Mendengar

[Dokumentasi]🎜🎜🎜. Semua kod jQuery yang mempengaruhi elemen DOM harus berada di dalam pengendali acara ini. 🎜

Malah, tutorial jQuery dengan jelas menyatakan:

// do stuff when DOM is ready
});

Sebagai alternatif, anda boleh menggunakan sintaks trengkas:

$(function() {
    // do stuff when DOM is ready
});

Kedua-duanya setaraf.

Answer 2

Elemen yang anda cuba cari tiada dalam DOM< /a> apabila skrip anda dijalankan.

Lokasi skrip yang bergantung pada DOM boleh memberi kesan yang mendalam pada kelakuannya. Pelayar menghuraikan dokumen HTML dari atas ke bawah. Elemen ditambahkan pada DOM dan skrip (biasanya) dilaksanakan apabila ia ditemui. Ini bermakna pesanan penting. Selalunya, skrip tidak dapat mencari elemen yang muncul kemudian dalam penanda kerana ia belum ditambahkan pada DOM lagi.

Pertimbangkan penanda berikut; Skrip #1 tidak dapat ditemui

, manakala Skrip #2 berjaya:

sssccc
test div
sssccc