Metode getElementsByTagName() DOM HTML Document

Definisi dan penggunaan

getElementsByTagName() Metode mengembalikan kumpulan elemen dengan nama tag yang ditentukan.

getElementsByTagName() Metode mengembalikan HTMLCollection.

getElementsByTagName() Atribut ini hanya-baca.

Keterangan:getElementsByTagName("*") Mengembalikan semua elemen dalam dokumen.

HTMLCollection

HTMLCollection Adalah kumpulan seperti array dari elemen HTML (daftar).

Elemen dalam kumpulan dapat diakses melalui indeks (dari 0).

length Atribut mengembalikan jumlah elemen dalam kumpulan.

Lihat pula:

Metode getElementById()

Metode getElementsByClassName()

Metode querySelector()

Metode querySelectorAll()

Objek HTMLCollection

Contoh

Contoh 1

Ambil semua elemen dengan nama tag "li":

const collection = document.getElementsByTagName("li");

Coba sendiri

Contoh 2

Ambil semua elemen dalam dokumen:

const collection = document.getElementsByTagName("*");

Coba sendiri

Contoh 3

Ubah HTML internal elemen <p> pertama dalam dokumen:

document.getElementsByTagName("p")[0].innerHTML = "Hello World!";

Coba sendiri

Contoh 4

Jumlah elemen <li> dalam dokumen:

let numb = document.getElementsByTagName("li").length;

Coba sendiri

Contoh 5

Ubah warna latar belakang semua elemen <p>:

const collection = document.getElementsByTagName("P");
for (let i = 0; i < collection.length; i++) {
  collection[i].style.backgroundColor = "red";
}

Coba sendiri

Sintaks

document.getElementsByTagName(tagName)

Parameter

Parameter Deskripsi
tagName Diperlukan. Markas elemen.

Nilai kembalian

Tipe Deskripsi
Objek

Objek HTMLCollection.

Koleksi elemen yang memiliki nama tag yang ditentukan.

Diurutkan berdasarkan urutan elemen muncul di dalam dokumen.

Detil teknis

Metode ini akan kembalikan objek NodeList (dapat ditangani seperti array yang hanya baca), objek ini menyimpan semua elemen Element yang memiliki tag yang ditentukan di dalam dokumen, urutannya adalah urutan yang muncul di dokumen asal.

Objek NodeList adalah 'hidup', yaitu jika elemen yang memiliki tag yang sama ditambahkan atau dihapus di dalam dokumen, kontennya akan otomatis mengupdate yang diperlukan.

Dokumen HTML tidak membedakan huruf besar dan kecil, jadi dapat digunakan bentuk huruf apapun untuk menentukan tagNameyang akan cocok dengan semua tag yang sama di dalam dokumen, tanpa menghiraukan bentuk huruf yang digunakan di tag yang sama di dokumen asal. Tetapi dokumen XML membedakan huruf besar dan kecil,tagName Hanya cocok dengan tag yang memiliki nama yang sama dan bentuk huruf yang sama di dokumen asal.

Pemberitahuan:Interface Element mendefinisikan metode yang sama, yang hanya mencari subtree dokumen. Selain itu, interface HTMLDocument mendefinisikan Metode getElementByName()berdasarkan nilai atribut name (tidak berdasarkan nama tag).

Dukungan peramban

document.getElementsByTagName() Adalah fitur DOM Level 1 (1998).

Semua peramban mendukungnya：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Dukungan 9-11 Dukungan Dukungan Dukungan Dukungan

Halaman yang berhubungan

Panduan referensi JavaScript：element.getElementsByTagName()

Panduan JavaScript：Daftar Node HTML DOM JavaScript