2 Contoh Penggunaan Method getElementById() pada DOM HTML

Method getElementById() pada DOM HTML berfungsi untuk mengembalikan elemen yang memberikan ID yang dilewatkan untuk sebuah fungsi. Fungsi ini secara luas digunakan HTML DOM pada rancangan web untuk mengubah elemen apapun atau untuk mendapatkan elemen tertentu. Jika ID yang dilewatkan ke fungsi tidak tersedia, maka akan mengembalikan nilai null. Elemen dipersyaraktkan untuk memiliki sebuah id unik, supaya dapat mendapatkan akses menuju ke elemen spesifik secara cepat, dan juga id tertentu seharusnya hanya digunakan sekali saja pada seluruh dokumen.

Sintak:
document.getElementById( element_ID )

Parameter: fungsi ini menerima element_ID dari parameter tunggal yang digunakan untuk menampung ID dari sebuah elemen.

Return Value: method ini akan mengembalikan object yang diberikan dari sebuah ID. Jika tidak terdapat elemen apapun dengan jenis ID yang diberikan, maka method tersebut akan mengembalikan nilai null.

Contoh: deskripsi method getElementById(), dimana element_id digunakan untuk mengubah warna dari teks ketika melakukan klik tombol.

<!DOCTYPE html>

<html>

 

<head>

<title>

Method getElementById() DOM

</title>

 

<script>

// Fungsi untuk mengubah 

// warna dari elemen

function bons() 

{

var demo = document.getElementById("bons");

demo.style.color = "green";

}

</script>

</head>

 

<body style="text-align:center">

 

<h1 id="bons">

Blog Elfan

</h1>

 

<h2>

Method getElementById() DOM

</h2>

<!-- Klik tombol untuk 

mengubah warna -->

<input 

type="button"

onclick="bons()"

value="Klik untuk mengubah warna" />

 

</body>

 

</html>

Output:

Blog Elfan

Method getElementById() DOM


Contoh: deskripsi method getElementById(), dimana element_id digunakan untuk mengubah konten ketika dilaukan klik tombol.

<!DOCTYPE html>

<html>

 

<head>

<title>

Method getElementById() DOM

</title>

 

<script>

// Fungsi untuk mengubah 

// konten dari elemen

function bons() 

{

var demo = document.getElementById("bons");

demo.innerHTML = "Selamat Datang!";

}

</script>

</head>

 

<body style="text-align:center">

 

<h1>

Blog Elfan

</h1>

 

<h2>

Method getElementById() DOM

</h2>

 

<h3 id="bons">

Selamat Siang!

</h3>

 

<!-- Klik untuk mengubah 

konten -->

<input 

type="button"

onclick="bons()"

value="Klik untuk mengubah konten" />

 

</body>

 

</html>

Output:

Blog Elfan

Method getElementById() DOM

Selamat Siang!

Komentar

  1. Apa fungsi method getElementById() DOM pada html?

    BalasHapus
    Balasan
    1. Method getElementById() berfungsi untuk mengembalikan elemen yang memiliki itribut ID dengan nilai yang telah ditentukan. Method ini adalah salah satu method yang paling umum digunakan pada DOM HTML setiap kali user ingin melakukan manipulasi pada elemen, atau untuk mendapatkan infor dari elemen saat ini.

      Hapus
    2. Method getElementById digunakan untuk mewakili Id elemen yang ingin dipilih. Method getElementById() digunakan untuk mengembalikan object elemen yang menjelaskan object elemen DOM dengan ID yang telah ditentukan, sebaliknya akan mengembalikan nilai null jika tidak ada elemen dengan jenis id tersebut.

      Hapus
  2. Jenis browser apa saja yang dapat digunakan untuk mengaktifkan method getElementById() pada dom html?

    BalasHapus
    Balasan
    1. Berikut adalah jenis browser yang dapat digunakan untuk mengaktifkan method getElementById() pada DOM HTML:
      1. Google Chrome 1.0
      2. Internet Explorer 5.5
      3. Microsoft Edge 12.0
      4. Firefox 1.0
      5. Opera 7.0
      6. Safari 1.0

      Hapus

Posting Komentar

*Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung. :D

*Jika terdapat typo, link bermasalah, dan lain sebagainya, pengunjung dapat melaporkan permasalahan tersebut melalui WA: +62-896-2514-6106




~ Ikatlah Ilmu dengan Memostingkannya ~

Referensi Tambahan:

Enkapsulasi pada Java

2 Jenis Utama Kegiatan Penelitian Berdasarkan Waktunya, Crosssectional Salah Satunya

6 Contoh Program Method Overloading pada Java

3 Jenis Utama Looping pada Java

Perbedaan stdio.h dan stdlib.h pada Bahasa C