Metoda getElementsByTagName() klasy HTML DOM Document

Definicja i użycie

getElementsByTagName() Metoda zwraca zbiór wszystkich elementów o określonym nazwie tagu.

getElementsByTagName() Metoda zwraca HTMLCollection.

getElementsByTagName() Właściwość jest jedynie do odczytu.

Komentarz:getElementsByTagName("*") Zwraca wszystkie elementy w dokumencie.

HTMLCollection

HTMLCollection To zbiorowisko podobne do tablicy, zawierające HTML elementy.

Elementy w zbiorze można uzyskać za pomocą indeksu (zaczynając od 0).

length Właściwość zwraca liczbę elementów w zbiorze.

Zobacz również:

Metoda getElementById()

Metoda getElementsByClassName()

Metoda querySelector()

Metoda querySelectorAll()

Obiekt HTMLCollection

Przykład

Przykład 1

Pobierz wszystkie elementy o nazwie tagu "li":

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

Spróbuj sam

Przykład 2

Pobierz wszystkie elementy w dokumencie:

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

Spróbuj sam

Przykład 3

Zmień wewnętrzny HTML pierwszego elementu <p> w dokumencie:

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

Spróbuj sam

Przykład 4

Liczba elementów <li> w dokumencie:

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

Spróbuj sam

Przykład 5

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

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

Spróbuj sam

Gramatyka

document.getElementsByTagName(tagName)

Parametry

Parametry Opis
tagName Wymagane. Nazwa znacznika elementu.

Zwrócona wartość

Typ Opis
Obiekt

Obiekt HTMLCollection.

Zbiór elementów o określonej nazwie etykiety.

Sortuje według kolejności występowania elementów w dokumencie.

Szczegóły techniczne

Ta metoda zwróci obiekt NodeList (można go traktować jak nieedytowalną tablicę), który zawiera wszystkie elementy Element o określonej nazwie etykiety w dokumencie, w kolejności ich występowania w dokumencie źródłowym.

Obiekt NodeList jest 'żywy', co oznacza, że jeśli w dokumencie dodasz lub usuniesz elementy o określonej nazwie etykiety, jego zawartość zostanie automatycznie zaktualizowana.

Dokumenty HTML nie różnią się w kwestii wielkości liter, więc można używać dowolnej formy pisowni do określenia tagName, pasuje do wszystkich etykiet o tej samej nazwie w dokumencie, niezależnie od formy pisowni użytej w dokumencie źródłowym. Ale dokumenty XML różnią się w kwestii wielkości liter,tagName Tylko i wyłącznie etykiety o nazwie i formie pisowni identycznej w dokumencie źródłowym.

Wskazówka:Interfejs Element definiuje metodę o tej samej nazwie, która przeszukuje jedynie drzewo dokumentu. Dodatkowo, interfejs HTMLDocument definiuje Metoda getElementByName(), wyszukuje elementy na podstawie wartości atrybutu name (zamiast nazwy etykiety).

Wsparcie przeglądarek

document.getElementsByTagName() Jest to cecha DOM Level 1 (1998).

Wszystkie przeglądarki wspierają to:

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

Strony związane

Podręcznik JavaScript:element.getElementsByTagName()

Kurs JavaScript:Lista węzłów HTML DOM w JavaScript