Mendapatkan Elemen mengikut ID, Nama Tag atau Kelas ke Kod dengan JavaScript

Video: Belajar HTML & CSS untuk PEMULA - Full Lengkap 2025

Dalam JavaScript, kaedah getElementBy menyediakan akses mudah kepada mana-mana elemen atau kumpulan elemen dalam dokumen tanpa bergantung kepada hubungan ibu bapa / anak nod. Tiga cara yang paling biasa digunakan untuk mengakses unsur adalah

getElementById
getElementsByTagName
getElementsByClassName

getElementById

Setakat ini kaedah yang paling banyak digunakan untuk memilih elemen, getElementById adalah penting untuk pembangunan web moden. Dengan alat kecil yang berguna ini, anda boleh mencari dan bekerja dengan mana-mana unsur hanya dengan merujuk atribut id yang unik. Tidak kira apa lagi yang berlaku dalam dokumen HTML, getElementById akan sentiasa berada di sana untuk anda dan pasti akan memilih unsur yang tepat yang anda mahukan.

Contoh ini menunjukkan kuasa hebat getElementById untuk membolehkan anda mengekalkan semua JavaScript anda bersama dalam dokumen anda atau untuk memodulasi kod anda. Dengan menggunakan getElementById, anda boleh bekerja dengan mana-mana elemen, di mana sahaja dalam dokumen anda selagi anda tahu idnya.

Menggunakan fungsi getElementById mengiraMPG (batu, galon) {dokumen. getElementById ("displayMiles"). innerHTML = parseInt (miles); dokumen. getElementById ("displayGallons"). innerHTML = parseInt (galon); dokumen. getElementById ("displayMPG"). innerHTML = miles / gallons;}
Anda memandu ___ 
batu.







Anda menggunakan ___ 
gelen gas.
MPG anda adalah ___. var milesDriven = prompt ("Masukkan batu didorong"); var gallonsGas = prompt ("Masukkan gelen gas yang digunakan"); calculateMPG (milesDriven, gallonsGas);

getElementsByTagName

Kaedah getElementsByTagName mengembalikan senarai nod semua elemen dengan nama tag yang ditentukan. Sebagai contoh, getElementsByTagName digunakan untuk memilih semua elemen h1 dan menukar sifat-sifat dalaman batin mereka ke nombor berurutan.

Menggunakan nombor fungsi getElementsByTagNameElements (tagName) {var getTags = 
dokumen. getElementsByTagName (tagName); untuk (i = 0; i 
teks ini akan hilang

ini akan ditimpa

JavaScript akan memadamkan nombor
nomborElements ("h1") ini;

getElementsByClassName

Kaedah getElementsByClassName berfungsi dengan cara yang sama seperti GetElementsByTagName, tetapi ia menggunakan nilai atribut kelas untuk memilih elemen. Fungsi ini memilih unsur-unsur dengan kelas "ralat" dan akan mengubah nilai harta dalaman mereka.

Menggunakan fungsi getElementsByClassName checkMath (hasil) {var userMath = 
dokumen. getElementById ("answer1"). nilai; var errors = 
dokumen. getElementsByClassName ("ralat"); jika (parseInt (userMath)! = parseInt (hasil)) {errors [0]. innerHTML = "Itu salah. Anda memasukkan "+ userMath +". Jawapannya adalah "+ hasil;} else {errors [0]. innerHTML = "Betul! ";}} 4 + 1 = Semak matematik anda!(bersambung)

Hasil menjalankan kod ini dalam pelayar web dan memasukkan jawapan yang salah dipaparkan di sini.