Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Mendapatkan ID Elemen HTML Menggunakan getElementById DOM

Dipublikasikan Oleh: elfanmauludi 5 komentar
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.


Sebelum memahami lebih dalam materi tentang Mendapatkan ID Elemen HTML Menggunakan getElementById DOM, terlebih dahulu pelajari materi tentang: Tampilan Layar Penuh HTML fullscreenEnabled DOM, Membuat Fullscreen HTML Menggunakan fullscreenElement DOM, dan Membuat Daftar Form HTML Menggunakan Forms Collection DOM.

Sintak: document.getElementById( element_ID )

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

Baca Juga:

Return Values: 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!


Artikel ini didedikasikan kepada: Antoinette Kirsten Jocelin Sugiarto, Arviant Dwi Andhika Gunawan, Atharaditya Yumna Yafi, Aulia Listyaningrum, dan Aulina Fatimatul Putri Nur Carmelita.
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Mendapatkan ID Elemen HTML Menggunakan getElementById DOM"

  1. AnonimMinggu, 19 Desember 2021 pukul 08.05.00 WIB

    Apa fungsi method getElementById() DOM pada html?

    BalasHapus
    Balasan
    1. AnonimMinggu, 19 Desember 2021 pukul 08.05.00 WIB

      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. AnonimMinggu, 19 Desember 2021 pukul 08.09.00 WIB

      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. AnonimMinggu, 19 Desember 2021 pukul 08.06.00 WIB

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

    BalasHapus
    Balasan
    1. AnonimMinggu, 19 Desember 2021 pukul 08.07.00 WIB

      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

Hubungi admin melalui Wa : +62-896-2414-6106

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

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -