Javascript

Elemen DOM JavaScript: Contoh Code dan Cara Membuatnya

Halaman ini menunjukan cara menemukan dan mengakses elemen HTML di halaman HTML.

Menemukan Elemen HTML

Seringkali, dengan JavaScript, kita ingin memanipulasi elemen HTML.

Untuk melakukannya, Anda harus menemukan elemennya terlebih dahulu. Ada beberapa cara untuk melakukannya:

  • Menemukan elemen HTML dengan id
  • Menemukan elemen HTML dengan nama tag
  • Menemukan elemen HTML dengan nama kelas
  • Menemukan elemen HTML oleh selector CSS
  • Menemukan elemen HTML dengan koleksi objek HTML

Menemukan Elemen HTML berdasarkan Id

Cara termudah untuk menemukan elemen HTML di DOM, adalah dengan menggunakan id elemen.

Contoh ini menemukan elemen dengan id = “intro”:

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2> Menemukan Elemen HTML dengan Id </h2>
<p id="intro">Hello World!</p>
<p>This example demonstrates the <b>getElementsById</b> method.</p>

<p id="demo"></p>

<script>
var myElement = document.getElementById("intro");
document.getElementById("demo").innerHTML = 
"Teks dari paragraf intro adalah " + myElement.innerHTML;
</script>

</body>
</html>

Jika elemen ditemukan, metode akan mengembalikan elemen tersebut sebagai objek (di myElement).

Jika elemen tidak ditemukan, myElement akan berisi null.

Menemukan Elemen HTML dengan Nama Tag

Contoh ini menemukan semua elemen <p>.

<!DOCTYPE html>
<html>
<body>

<h2> Menemukan Elemen HTML dengan Nama Tag </h2>
<p>Hello World!</p>
<p> Contoh ini menunjukkan metode <b>getElementsByTagName</b>. </p>
<p id="demo"></p>

<script>
var x = document.getElementsByTagName("p");
document.getElementById("demo").innerHTML = 
'The text in first paragraph (index 0) is: ' + x[0].innerHTML;
</script>

</body>
</html>

Contoh ini menemukan elemen dengan id = “main”, dan kemudian menemukan semua elemen <p> di dalam “main”:

<!DOCTYPE html>
<html>
<body>

<h2> Menemukan Elemen HTML dengan Nama Tag </h2>

<div id="main">
<p>The DOM is very useful.</p>
<p> Contoh ini menunjukkan metode <b>getElementsByTagName</b>. </p>
</div>

<p id="demo"></p>

<script>
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
document.getElementById("demo").innerHTML = 
'Paragraf pertama (indeks 0) di dalam "main" adalah: ' + y[0].innerHTML;
</script>

</body>
</html>

Menemukan Elemen HTML berdasarkan Nama Kelas

Jika Anda ingin menemukan semua elemen HTML dengan nama kelas yang sama, gunakan getElementsByClassName ().
Contoh ini mengembalikan daftar semua elemen dengan class = “intro”.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2> Menemukan Elemen HTML dengan Nama Kelas </h2>
<p>Hello World!</p>

<p class = "intro"> DOM sangat berguna. </p>
<p class = "intro"> Contoh ini menunjukkan metode <b>getElementsByClassName</b>. </p>
<p id="demo"></p>

<script>
var x = document.getElementsByClassName("intro");
document.getElementById("demo").innerHTML = 
'Paragraf pertama (indeks 0) dengan class = "intro": ' + x[0].innerHTML;
</script>

</body>
</html>

Menemukan elemen dengan nama kelas tidak berfungsi di Internet Explorer 8 dan versi sebelumnya.

Menemukan Elemen HTML dengan selector CSS

Jika ingin menemukan semua elemen HTML yang cocok dengan selector CSS yang ditentukan (id, nama kelas, jenis, atribut, nilai atribut, dll), gunakan metode querySelectorAll().

Contoh ini mengembalikan daftar semua elemen dengan class = “intro”.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2> Menemukan Elemen HTML dengan Query Selector </h2>
<p>Hello World!</p>

<p class = "intro"> DOM sangat berguna. </p>
<p class = "intro"> Contoh ini menunjukkan metode <b> querySelectorAll </b>. </p>
<p id="demo"></p>

<script>
var x = document.querySelectorAll("p.intro");
document.getElementById("demo").innerHTML = 
'The first paragraph (index 0) with class="intro": ' + x[0].innerHTML;
</script>

</body>
</html>

Metode querySelectorAll() tidak berfungsi di Internet Explorer 8 dan versi sebelumnya.

Menemukan Elemen HTML dengan Koleksi Objek HTML

Contoh ini menemukan elemen formulir dengan id = “frm1”, dalam kumpulan formulir, dan menampilkan semua nilai elemen.

Contoh:

<!DOCTYPE html>
<html>
<body>

<h2> Menemukan Elemen HTML Menggunakan document.forms </h2>
<form id="frm1" action="/action_page.php">
  First name: <input type="text" name="fname" value="Donald"><br>
  Last name: <input type="text" name="lname" value="Duck"><br><br>
  <input type="submit" value="Submit">
</form> 

<p> Klik "Cobalah" untuk menampilkan nilai setiap elemen dalam formulir. </p>
<button >length ;i++) {
    text += x.elements[i].value + "<br>";
  }
  document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>


Catur Kurnia Sari

Share
Tags: DOMjavascript