getElementById dan getElementsByClassName
Gunakan kaedah pemilihan klasik.
getElementById dan getElementsByClassName ialah pelajaran Akademi JavaScript percuma di CoddyKit. Ini ialah pelajaran 2 daripada 4. Sebanyak 3 pelajaran dalam laluan pembelajaran ini boleh dibaca sepenuhnya secara percuma — selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan praktikal dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran Akademi JavaScript, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.
getElementById
getElementById mengembalikan satu-satunya elemen dengan id yang sepadan, atau nilai kosong. Pengenal mesti unik pada satu halaman, jadi kaedah ini mengembalikan satu elemen.
const header = document.getElementById("header");
console.log(header.tagName);Tiada Simbol Tanda Pagar
Tidak seperti pemilih CSS, anda perlu menghantar pengenal mentah tanpa #. Menghantar "#header" tidak akan menghasilkan padanan.
document.getElementById("menu"); // correct
document.getElementById("#menu"); // wrong, returns nullgetElementsByClassName
getElementsByClassName mengembalikan HTMLCollection dinamik bagi semua elemen yang mempunyai kelas yang diberikan.
const cards = document.getElementsByClassName("card");
console.log(cards.length);Koleksi HTML Bersifat Dinamik
Koleksi tersebut dikemas kini secara automatik apabila DOM berubah. Jika anda menambah .card baharu kemudian, cards.length bertambah tanpa perlu membuat carian semula.
const cards = document.getElementsByClassName("card");
// later, after appending a new .card element
// cards.length reflects the new total automaticallyMengindeks Koleksi
Akses item menggunakan indeks. HTMLCollection kelihatan seperti tatasusunan tetapi bukan tatasusunan sebenar.
const cards = document.getElementsByClassName("card");
console.log(cards[0].textContent);Tiada forEach Secara Langsung
Oleh sebab ia kelihatan seperti tatasusunan (tetapi bukan tatasusunan), HTMLCollection tidak mempunyai forEach. Tukarkannya dahulu atau gunakan gelung biasa.
const cards = document.getElementsByClassName("card");
for (let i = 0; i < cards.length; i++) {
console.log(cards[i].textContent);
}getElementsByTagName
getElementsByTagName mengembalikan HTMLCollection dinamik bagi setiap elemen dengan tag tertentu, seperti semua perenggan.
const paras = document.getElementsByTagName("p");
console.log(paras.length);Berbilang Kelas
Anda boleh menghantar beberapa nama kelas yang dipisahkan oleh ruang. Elemen mesti mempunyai semua kelas yang disenaraikan untuk disertakan.
const items = document.getElementsByClassName("btn primary");Dalam Skop Satu Elemen
Kaedah ini juga tersedia pada elemen, lalu mengehadkan carian kepada keturunan elemen tersebut.
const list = document.getElementById("todo-list");
const items = list.getElementsByClassName("done");Menukar kepada Tatasusunan
Untuk menggunakan kaedah tatasusunan seperti map atau filter, sebarkan koleksi itu ke dalam tatasusunan sebenar.
const cards = document.getElementsByClassName("card");
const titles = Array.from(cards).map((c) => c.textContent);Bila Hendak Menggunakan Setiap Satu
Gunakan getElementById untuk carian unik yang pantas. Utamakan querySelectorAll apabila anda mahukan gambaran statik atau pemilih yang kompleks; gunakan keluarga getElementsBy* apabila anda benar-benar memerlukan koleksi dinamik.
Semakan Ringkas
Pilih tingkah laku yang betul.
Ringkasan
Anda telah mempelajari getElementById (satu elemen berdasarkan pengenal mentah, tanpa #), getElementsByClassName dan getElementsByTagName (koleksi HTML dinamik). Koleksi dinamik perlu ditukar menggunakan Array.from untuk menggunakan kaedah tatasusunan, dan koleksi tersebut tidak mempunyai forEach sendiri.
Pelajari JavaScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 59
- Pelajaran
- 200
Soalan Lazim
Adakah pelajaran “getElementById dan getElementsByClassName” percuma?
Ya — sebanyak 3 pelajaran dalam laluan pembelajaran Akademi JavaScript, termasuk “getElementById dan getElementsByClassName”, boleh dibaca sepenuhnya secara percuma di web ini. Selepas itu, CoddyKit PRO membuka akses kepada semua pelajaran, serta latihan interaktif dengan penyunting kod terbina dalam dan tutor kecerdasan buatan yang tersedia 24/7. Kursus Akademi JavaScript merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “getElementById dan getElementsByClassName”?
Gunakan kaedah pemilihan klasik. Anda berlatih Akademi JavaScript menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan Akademi JavaScript?
Tiada pengalaman terdahulu diperlukan. Pembelajaran Akademi JavaScript di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 2 daripada 4.
Berapa lamakah pelajaran “getElementById dan getElementsByClassName” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran Akademi JavaScript ini?
Ya. Setiap pelajaran Akademi JavaScript menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Memilih Elemen dengan querySelector
- getElementById dan getElementsByClassName
- Menelusuri Induk, Anak dan Adik-beradik
- NodeList berbanding HTMLCollection