Cara menggunakan WOTDS di JavaScript

Question

Pada tutorial sebelumnya kita telah mempelajari tentang JavaScript DOM Part 3. Cara Menggunakan getElementsByTagName di JavaScript

Table of Contents Show

Pengantar metode JavaScript getElementsByName()
GetElementsByName() Contoh 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 onclick="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?

kode javascript