Metode getElementsByTagName dalam JavaScript

getElementsByTagName

Adalah satu metode yang digunakan untuk mengambil semua elemen-elemen dengan menggunakan parameter tag.

Syntax:

ElemenHTML.getElementsByTagName(‘namaTag’)

Contoh Kasus:

Saya mempunyai tampilan HTML seperti terlihat dibawah ini:

Kursus a2fahmi.com menyedikan materi kursus sebagai berikut: 

  • HTML
  • PHP
  • JavaScript
  • CSS
  • jQuery

Kode yang sudah dibuat

<p>Kursus a2fahmi.com menyedikan materi kursus sebagai berikut:</p>
<ul id=’kursus’> 

<li>HTML</li>
<li>PHP</li>
<li>JavaScript</li>
<li>CSS</li>
<li>jQuery</li>

</ul>

<button>Tekan</button>

Keinginan:

Jadi ketika saya klik tombol tekan maka semua tulisan dalam elemen <li> akan berwarna merah seperti terlihat dibawah ini:

Kursus a2fahmi.com menyedikan materi kursus sebagai berikut: 

  • HTML
  • PHP
  • JavaScript
  • CSS
  • jQuery

Pertanyaan:

Bagaimana cara membuatnya menggunakan metode getElementsByTagName … ?

Jawaban

Buatlah sebuah file HTML bernama daftarKursus.html lalu masukkan kode seperti dibawah ini:

<script type=”text/javascript”> 

function ambilTag(){

var idUl=document.getElementById(‘kursus’);
var list=idUl.getElementsByTagName(‘li’);

for(var i=0;i<=list.length;i++){

list[i].style.color=”red”;

}

}

</script>

<p>Kursus a2fahmi.com menyedikan materi kursus sebagai berikut:</p>
<ul id=’kursus’>

<li>HTML</li>
<li>PHP</li>
<li>JavaScript</li>
<li>CSS</li>
<li>jQuery</li>

</ul>
<button onClick=’ambilTag()’>Tekan</button>

Keterangan:

  • document.getElementById(‘kursus’), Kode ini digunakan untuk mengambil elemen yang mempunyai id=’kursus’.
  • idUl.getElementsByTagName(‘li’), Kode ini digunakan untuk mengambil semua elemen yang mempunyai tag=’li’.
  • list[i].style.color=”red”, Kode ini digunakan untuk memberikan warna merah ke setiap elemen dari array list.

Hasil:

Jalankan file HTMLmu dan lihatlah hasilnya apakah sudah sesuai.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *