” untuk paragraf, “
” untuk judul tingkat pertama, dll. Pendekatan ini diperlukan saat pengguna perlu mengakses elemen HTML dengan nama tagnya langsung daripada mencari beberapa baris kode.
Panduan ini akan menjelaskan prosedur lengkap untuk mengambil nama tag elemen HTML menggunakan JavaScript.
Bagaimana Cara Mengambil Nama Tag dari Elemen HTML Menggunakan JavaScript?
JavaScript menawarkan 'hanya-baca' namatag ” yang menampilkan nama tag dari elemen HTML yang sesuai. Ini mengembalikan nilai string yaitu nama tag elemen dalam UPPERCASE.
Sintaksis
elemen. namatag
Dalam sintaks di atas, “ namatag ” sesuai dengan nama tag elemen yang perlu diambil.
Sekarang, mari beralih ke implementasi praktisnya untuk memeriksa bagaimana itu dapat digunakan untuk mengambil nama tag dari elemen HTML yang sesuai.
Contoh: Menerapkan Properti “tagName” untuk Mengambil Nama Tag dari Elemen HTML
Dalam contoh ini, semua nama tag elemen yang ditentukan dalam kode HTML dapat diambil melalui ' namatag ' Properti.
Kode HTML
Mari kita lihat kode HTML berikut:
< tubuh onclick = 'NamaElem()' >< h2 > Ambil tagName Elemen HTML Dalam JavaScript < / h2 >
< P > Klik salah satu elemen dalam dokumen ini untuk mendapatkan nama tagnya. < / P >
< tombol > Klik Itu < / tombol >
< P pengenal = 'demo' >< / P >
Pada baris kode di atas:
- “
” tag diasosiasikan dengan “ onclick ” acara mengarahkan ulang ke fungsi JavaScript “ NamaElem() ” yang akan dipicu dengan sekali klik. - “ ” tag mendefinisikan subjudul.
- “ ” tag membuat pernyataan paragraf.
- “
” tag menambahkan tombol bernama 'Klik Itu'. - Terakhir, “ ” tag mendefinisikan paragraf kosong yang memiliki id “ demo ” untuk menampilkan nama tag elemen HTML pada pemicu peristiwa 'onclick'.
Kode JavaScript
Selanjutnya, lanjutkan ke kode yang disediakan di bawah ini:
< naskah >fungsi elemName ( ) {
const elemen = peristiwa. target ;
dokumen. getElementById ( 'demo' ) . innerHTML = 'Nama tag Elemen HTML yang diklik adalah: ' + elemen. namatag ;
}
naskah >
Di blok kode ini:
- Tentukan fungsi bernama ' NamaElem() ”.
- Dalam definisinya, deklarasikan variabel “ elemen ” dari tipe data “ const ” yang menggunakan “ target ” untuk mengembalikan nama elemen saat peristiwa terkait dipicu.
- Terakhir, terapkan ' getElementById() ” metode untuk mengakses paragraf yang ditambahkan menggunakan id-nya.
- Ini akan menampilkan nama tag dari elemen HTML yang sesuai menggunakan ' namatag ” saat peristiwa 'onclick' diaktifkan.
- Ini sedemikian rupa sehingga setelah mengklik salah satu elemen dalam kode HTML, nama tag yang sesuai akan diambil.
Keluaran
Output menunjukkan nama tag elemen yang sesuai di mana peristiwa 'onclick' diaktifkan.
Kesimpulan
JavaScript menyediakan “ namatag ” properti untuk mendapatkan nama tag elemen HTML. Biasanya digunakan dengan event handler JavaScript seperti 'onclick', 'onmouseover', 'ondblclick' dll. Ketika event terkait dari elemen HTML diaktifkan, ia mengembalikan nama tagnya dalam UPPERCASE secara default. Panduan ini telah memberikan deskripsi singkat tentang cara mengambil nama tag elemen HTML menggunakan JavaScript.