Mengapa kaedah jQuery atau DOM seperti getElementById tidak dapat mengesan elemen?

Question

Apakah sebab yang mungkin mengapa document.getElementById, $("#id") atau mana-mana kaedah DOM/pemilih jQuery lain tidak dapat mencari elemen? Contoh isu termasuk: jQuery secara senyap gagal untuk mengikat pengendali acara jQuery kaedah "getter" (.val(), .html(), .text()) mengembalikan kaedah DOM Standard yang tidak ditentukan yang mengembalikan null mengakibatkan ralat berikut: Ralat jenis tidak ditangkap: Tidak boleh menetapkan sifat nol '...' tidak ditangkap

P粉938936304 · Answer

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:

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

document.getElemntById("the-id ")

querySelector

#

document.querySelector ("#the-id")

tidak
menggunakan # dengan getElementById, dan
mesti

querySelector

(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 muat 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.

P粉122932466 · Answer

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

Mengapa kaedah jQuery atau DOM seperti getElementById tidak dapat mengesan elemen?

membalas semua(2)saya akan balas