tutorial pengembangan web terbaru
 

JavaScript HTML DOM Elements

❮ Sebelumnya Berikutnya Bab ❯

Halaman ini mengajarkan Anda bagaimana untuk mencari dan elemen akses HTML dalam sebuah halaman HTML.

Temuan HTML Elements

Seringkali, dengan JavaScript, Anda ingin memanipulasi elemen HTML.

Untuk melakukannya, Anda harus menemukan unsur-unsur pertama. Ada beberapa cara untuk melakukan ini:

  • Menemukan elemen HTML dengan id
  • Menemukan elemen HTML dengan nama tag
  • Menemukan elemen HTML dengan class nama
  • Menemukan elemen HTML dengan CSS
  • Menemukan elemen HTML dengan koleksi objek HTML

Menemukan HTML Element oleh Id

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

Contoh ini menemukan elemen dengan id="intro" :

Contoh

var myElement = document.getElementById("intro");
Cobalah sendiri "

Jika unsur ini ditemukan, metode yang akan kembali elemen sebagai objek (di myElement ).

Jika unsur ini tidak ditemukan, myElement akan berisi null.

Menemukan Elemen HTML dengan Tag Nama

Contoh ini menemukan semua <p> elemen:

Contoh

var x = document.getElementsByTagName("p");
Cobalah sendiri "

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

Contoh

var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
Cobalah sendiri "

Menemukan Elemen HTML oleh Class Nama

Jika Anda ingin mencari semua elemen HTML dengan sama class nama, menggunakan getElementsByClassName() .

Contoh ini mengembalikan daftar semua elemen dengan class="intro" .

Contoh

var x = document.getElementsByClassName("intro");
Cobalah sendiri "

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

Menemukan Elemen HTML oleh Selectors CSS

Jika Anda ingin mencari semua elemen HTML yang cocok dengan pemilih CSS tertentu ( id , nama kelas, jenis, atribut, nilai atribut, dll), menggunakan querySelectorAll() metode.

Contoh ini mengembalikan daftar semua <p> elemen dengan class="intro" .

Contoh

var x = document.querySelectorAll("p.intro");
Cobalah sendiri "

The querySelectorAll() metode tidak bekerja di Internet Explorer 8 dan versi sebelumnya.

Menemukan Elemen HTML dengan HTML Koleksi Obyek

Contoh ini menemukan elemen form dengan id="frm1" , dalam koleksi bentuk, dan menampilkan semua nilai elemen:

Contoh

var x = document.forms["frm1"];
var text = "";
var i;
for (i = 0; i < x.length; i++) {
    text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;
Cobalah sendiri "

Objek HTML berikut (dan koleksi objek) juga dapat diakses:

Uji Diri dengan Latihan!

Latihan 1 » Latihan 2» Latihan 3 » Latihan 4» Latihan 5 »


❮ Sebelumnya Berikutnya Bab ❯