Metode HTML DOM Element getElementsByTagName()

Definisi dan penggunaan

getElementsByTagName() Metode ini kembalikan kumpulan elemen anak dengan nama tag yang ditentukan, dalam bentuk objek NodeList.

Pemberitahuan:Nilai parameter "*" Kembalikan semua elemen anak dari elemen.

Lihat pula:

Metode getElementsByClassName()

Metode querySelector()

Metode querySelectorAll()

NodeList

NodeList Adalah kumpulan node seperti array (daftar).

Anda dapat mengakses node dalam daftar melalui indeks (index). Indeks dimulai dari 0.

Atribut lengthKembalikan jumlah node dalam daftar.

Contoh

Contoh 1

Ubah konten HTML elemen <li> pertama di daftar:

const list = document.getElementsByTagName("UL")[0];
list.getElementsByTagName("li")[0].innerHTML = "Milk";

Coba Sendiri

Contoh 2

Jumlah elemen <p> di 'myDIV':

const element = document.getElementById("myDIV");
const nodes = element.getElementsByTagName("p");
let numb = nodes.length;

Coba Sendiri

Contoh 3

Ubah ukuran font elemen <p> kedua di 'myDIV':

const element = document.getElementById("myDIV");
element.getElementsByTagName("p")[1].style.fontSize = "24px";

Coba Sendiri

Contoh 4

Ubah warna latar belakang semua elemen <p> di 'myDIV':

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

Coba Sendiri

Contoh 5

Ubah warna latar belakang elemen keempat ('myDIV'):

const div = document.getElementById("myDIV");
div.getElementsByTagName("*")[3].style.backgroundColor = "red";

Coba Sendiri

Contoh 6

Ganti warna latar belakang semua elemen di "myDIV" menggunakan parameter "*":

const div = document.getElementById("myDIV");
const nodes = div.getElementsByTagName("*");
for (let i = 0; i < nodes.length; i++) {
  nodes[i].style.backgroundColor = "red";
}

Coba Sendiri

Sintaks

element.getElementsByTagName(tagname)

Parameter

Parameter Deskripsi
tagname Diperlukan. Tag bagi anak elemen.

Nilai Kembalian

Tipe Deskripsi
NodeList

Anak elemen yang memiliki tag yang diberikan.

Elemen diurutkan berdasarkan urutan munculnya di kode asal.

Detil Teknik

getElementsByTagName() Metode ini akan mengelilingi cikal bakal elemen yang ditentukan, kembalikan array yang mengandung node Element (yang sebenarnya NodeList objek), yang mewakili semua elemen dokumen dengan nama tag yang ditentukan. Urutan elemen dalam array yang kembali adalah urutan mereka muncul dalam kode asal dokumen.

Perhatian

Antarmuka Dokumentjuga mendefinisikan Metode getElementsByTagName(), yang mirip dengan metode ini, tetapi mengelilingi seluruh dokumen, bukannya mengelilingi cikal bakal dari elemen.

Jangan khianati metode ini Metode HTMLDocument.getElementsByName() Bercampur aduk, yang terakhir berdasarkan nilai atribut name elemen untuk mencari elemen, bukannya berdasarkan nama tag mereka.

Dukungan Peramban

Semua peramban mendukung element.getElementsByTagName():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Dukungan Dukungan Dukungan Dukungan Dukungan Dukungan