JavaScript HTML DOM 元素

Bab ini mengajarkan bagaimana untuk mencari dan mengakses elemen HTML di halaman HTML.

Cari elemen HTML

Biasanya, melalui JavaScript, Anda perlu mengoperasikan elemen HTML.

Untuk mencapai tujuannya, Anda harus menemukan elemen-elemen ini terlebih dahulu. Ada beberapa cara untuk menyelesaikan tugas ini:

  • Cari elemen HTML melalui id
  • Cari elemen melalui nama tag
  • Cari elemen melalui nama kelas
  • Cari elemen HTML melalui pemilih CSS
  • Cari elemen melalui koleksi objek HTML

Cari elemen HTML melalui id

Yang paling mudah untuk mencari elemen HTML di DOM adalah, menggunakan id elemen.

Contoh ini mencari elemen id="intro":

实例

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

亲自试一试

Jika elemen ditemukan, metode ini akan mengembalikan elemen dalam bentuk objek (pada myElement).

Jika elemen tidak ditemukan, myElement akan mengandung null。

Cari elemen melalui nama tag

Contoh ini mencari semua <p> Elemen:

实例

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

亲自试一试

Contoh ini mencari elemen id="main" lalu mencari semua <p> Elemen:

实例

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

亲自试一试

Cari elemen melalui nama kelas

Jika Anda memerlukan untuk mencari semua elemen HTML yang memiliki nama kelas yang sama, gunakan getElementsByClassName()。

Contoh ini mengembalikan daftar semua elemen yang mengandung class="intro":

实例

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

亲自试一试

Cari elemen melalui nama kelas tidak disokong untuk Internet Explorer 8 dan versi yang lebih awal.

Cari elemen HTML melalui pemilih CSS

Jika Anda memerlukan untuk mencari semua elemen HTML yang cocok dengan pemilih CSS yang ditentukan (id, nama kelas, jenis, atribut, nilai atribut, dll.), gunakan querySelectorAll() metode.

Contoh ini mengembalikan semua yang mempunyai class="intro" <p> Daftar elemen:

实例

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

亲自试一试

querySelectorAll() Tidak disokong untuk Internet Explorer 8 dan versi yang lebih awal.

通过 HTML 对象选择器查找 HTML 对象

本例查找 id="frm1" 的 form 元素，在 forms 集合中，然后显示所有元素值：

实例

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;

亲自试一试

以下 HTML 对象（和对象集合）也是可访问的：