Pada tutorial sebelumnya kita telah mempelajari tentang JavaScript DOM Part 3. Cara Menggunakan getElementsByTagName di JavaScript
Dalam tutorial ini, kita akan belajar cara menggunakan metode JavaScript getElementsByName() untuk mendapatkan elemen dengan nama tertentu dalam dokumen
Pengantar metode JavaScript getElementsByName()
Setiap elemen dalam dokumen HTML mungkin memiliki atribut nama
<input type="radio" name="bahasa" value="JavaScript">
Berbeda dengan atribut id, beberapa elemen HTML dapat berbagi nilai atribut nama yang sama seperti ini
<input type="radio" name="bahasa" value="JavaScript"> <input type="radio" name="bahasa" value="TypeScript">_
Untuk mendapatkan semua elemen dengan nama tertentu, Anda menggunakan metode getElementsByName() dari objek dokumen
let element = document.getElementsByName(name);
getElementsByName() menerima nama yang merupakan nilai dari atribut nama elemen dan mengembalikan elemen NodeList langsung
Pengelompokan ulang elemen sangatlah mudah. Ini berarti elemen yang dikembalikan diperbarui secara otomatis ketika elemen dengan nama yang sama dimasukkan dan/atau dihapus dari dokumen
GetElementsByName() Contoh JavaScript
Contoh berikut menampilkan grup radio yang terdiri dari tombol radio yang memiliki nama (level) yang sama.
Saat Anda memilih tombol radio dan mengklik tombol kirim, halaman akan menampilkan nilai yang dipilih seperti Sangat Buruk, Buruk, Baik, Baik, atau Sangat Baik
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Demo JavaScript getElementsByName</title> </head> <body> <p>Silakan menilai layanan ini:</p> <p> <label for="sangat-buruk"> <input type="radio" name="nilai" value="Sangat buruk" id="sangat buruk">Sangat buruk </label> <label for = "buruk"> <input type="radio" name="nilai" value="Buruk" id="buruk">Buruk </label> <label for = "oke"> <input type="radio" name="nilai" value="Oke" id="oke">Oke </label> <label for = "baik"> <input type="radio" name="nilai" value="Baik">Baik </label> <label for ="sangat-baik"> <input type="radio" name="nilai" value="Sangat Baik" id="Sangat baik">Sangat Baik </label> </p> <p> <button id="tmblNilai">Kirim</button> </p> <p id="hasil"></p> <script> let btn = document.getElementById('tmblNilai'); let output = document.getElementById('hasil'); btn.addEventListener('click', () => { let penilaian = document.getElementsByName('nilai'); penilaian.forEach((nilai) => { if (nilai.checked) { output.innerText = `Anda memilih: ${nilai.value}`; } }); }); </script> </body> </html>
CodePen Embed FallbackCodePen Embed Fallback
Bagaimana kode ini bekerja
- Pertama, pilih tombol submit dengan id tmblValue menggunakan metode getElementById()
- Kedua, dengarkan acara klik melalui tombol kirim
- Ketiga, dapatkan semua nilai tombol radio menggunakan getElementsByName() dan tampilkan nilai yang dipilih di elemen keluaran
- Anda akan belajar tentang peristiwa klik pada materi tutorial berikutnya. Untuk saat ini, harap fokus pada metode getElementsByName()
Kesimpulan
- getElementsByName() mengembalikan elemen NodeList langsung dengan nama yang ditentukan
- NodeList adalah objek seperti array, bukan objek array
Itulah tutorial belajar JavaScript DOM, cara menggunakan metode getElementsByName di JavaScript untuk mendapatkan elemen dengan nama tertentu
Seperti yang kita ketahui JavaScript adalah bahasa pemrograman yang digunakan untuk membuat halaman web interaktif. Javascript berjalan di sisi klien atau lebih tepatnya javascript berjalan di browser Anda masing-masing dan tidak perlu dijalankan di sisi server. Di dalam javascript sendiri ada beberapa method yang bisa kita gunakan namun pada pembahasan kali ini saya akan membahas bagaimana cara menggunakan Back Method di Javascript
Metode back() dapat memuat URL sebelumnya yang terdaftar di riwayat browser teman. Dalam hal ini saya hanya akan memberikan cara menggunakan Back Method di Javascript. Ok langsung saja kita mulai langkah-langkahnya Menggunakan Metode Back()
1. Pertama
Buka text editornya sob, dan buat dua file html baru yang diletakan dalam satu folder
indeks. html
<!DOCTYPE html> <html> <head> <title>Back()</title> </head> <body> <a href="index.html">Index</a> <a href="test.html">Test</a> <p>Dumetschool</p> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </body> </html>_Tes. html
<!DOCTYPE html> <html> <head> <title>Back()</title> </head> <body> <a href="index.html">Index</a> <a href="test.html">Test</a> <p>Ini test</p> <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical Latin literature from 5 BC, making it over 2000 years old. Richard McClintock, a Latin professor at Hampden-Sydney College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and going through the cites of the word in classical literature, discovered the undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes from a line in section 1.10.32.</p> </body> </html>2. Kedua
Kami meletakkan tombol dan metode punggungnya di file indeks. html dan uji. html yang telah kita buat tadi
<button title="goBack()">Kembali</button> <script> function.goBack(){ window.history.back();} </script>_3. Ketiga
Teman-teman, coba buka file index. html di browser sobat
Lalu klik link test, maka dia akan masuk ke file html bernama test. html
Setelah itu sobat klik tombol back, maka dia akan kembali ke file index. html
Metode back() di javascript hanya bisa mundur satu langkah setelah history di browser. Bagaimana kalian membuatnya mudah untuk menggunakan metode back() di javascript?