Metoda getElementsByTagName() klasy HTML DOM Element

Definicja i użycie

getElementsByTagName() Metoda zwraca kolekcję podelementów o określonym nazwie tagu, jako obiekt NodeList.

Wskazówka:Wartość parametru "*" Zwraca wszystkie podelementy elementu.

Zobacz również:

Metoda getElementsByClassName()

Metoda querySelector()

Metoda querySelectorAll()

NodeList

NodeList To zbiorowisko węzłów podobne do tablicy (lista).

Możesz uzyskać dostęp do węzłów w liście za pomocą indeksu (indeksu). Indeksy zaczynają się od 0.

Atrybut lengthZwraca liczbę węzłów w liście.

Przykład

Przykład 1

Zmień zawartość HTML pierwszego elementu <li> w liście:

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

Spróbuj sam

Przykład 2

Liczba elementów <p> w "myDIV":

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

Spróbuj sam

Przykład 3

Zmień rozmiar czcionki drugiego elementu <p> w "myDIV":

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

Spróbuj sam

Przykład 4

Zmień kolor tła wszystkich elementów <p> w "myDIV":

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

Spróbuj sam

Przykład 5

Zmień kolor tła czwartego elementu (indeks 3) w "myDIV":

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

Spróbuj sam

Przykład 6

Używając parametru "*", zmień kolor tła wszystkich elementów w "myDIV":

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

Spróbuj sam

Gramatyka

element.getElementsByTagName(tagname)

Parametr

Parametr Opis
tagname Wymagane. Nazwa znacznika podobieństwa dla podobieństwa podelementu.

Wartość zwracana

Typ Opis
NodeList

Potomkowie elementu o danym znaczniku.

Elementy są sortowane według kolejności ich występowania w kodzie źródłowym.

Szczegółowe informacje techniczne

getElementsByTagName() Metoda przechodzi przez potomków określonego elementu, zwracając tablicę Elementów (w rzeczywistości obiekt NodeList), które reprezentują wszystkie dokumentowe elementy o określonej nazwie znacznika. Porządek elementów w zwracanej tablicy odpowiada ich kolejności występowania w kodzie źródłowym dokumentu.

Uwaga

Interfejs Documentrównież definiuje Metoda getElementsByTagName(), która jest podobna do niej, ale przechodzi przez cały dokument, zamiast przez potomków danego elementu.

Nie myl tej metody z Metoda HTMLDocument.getElementsByName() Może być mylone z tym, że ostatnie opiera się na wartości atrybutu name elementu, zamiast na nazwie znacznika elementu.

Obsługa przeglądarek

Wszystkie przeglądarki obsługują element.getElementsByTagName():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie