HTML DOM Document getElementsByTagName()

Definition och användning

getElementsByTagName() Metoden returnerar en samling av alla element med det specificerade taggnamnet.

getElementsByTagName() Metoden returnerar HTMLCollection.

getElementsByTagName() Egenskapen är skrivskyddad.

Kommentar:getElementsByTagName("*") Returnerar alla element i dokumentet.

HTMLCollection

HTMLCollection är en samling av HTML-element som liknar en array (lista).

Element i sammansättningen kan nås via index (från 0).

length Egenskapen returnerar antalet element i sammansättningen.

Se också:

getElementById()

getElementsByClassName()

querySelector()

querySelectorAll()-metoden

HTMLCollection-objekt

Exempel

Exempel 1

Hämta alla element med taggnamnet "li":

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

Prova det själv

Exempel 2

Hämta alla element i dokumentet:

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

Prova det själv

Exempel 3

Ändra den inre HTML:n för det första <p>-elementet i dokumentet:

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

Prova det själv

Exempel 4

Antalet <li>-element i dokumentet:

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

Prova det själv

Exempel 5

Ändra bakgrundsfärgen för alla <p>-element:

const collection = document.getElementsByTagName("P");
för (låt i = 0; i < collection.length; i++) {
  collection[i].style.backgroundColor = "red";
}

Prova det själv

Syntax

document.getElementsByTagName(tagName)

Parametrar

Parametrar Beskrivning
tagName Obligatorisk. Elementets etikett namn.

Returvärde

Typ Beskrivning
Objekt

HTMLCollection-objekt.

En samling av element med ett specifikt etikettnamn.

Sorteras efter elementens ordning i dokumentet.

Tekniska detaljer

Denna metod returnerar NodeList-objekt (kan behandlas som en skrivskyddad array), som innehåller alla Element-noder med ett specifikt etikettnamn i dokumentet, i den ordning de uppstår i käll dokumentet.

NodeList-objektet är "levande", vilket innebär att om du lägger till eller tar bort element med ett specifikt etikettnamn i dokumentet, kommer dess innehåll att uppdateras automatiskt.

HTML-dokument skiljer sig inte i skiftläge, så du kan använda vilket skiftläge som helst för att specificera tagNamedet matchar alla etiketter med samma namn i dokumentet, oavsett hur dessa etiketter är skrivna i käll dokumentet. Men XML-dokument skiljer sig i skiftläge,tagName Matchar endast etiketter med namn och skiftläge som är helt identiska i käll dokumentet.

Tips:Element-gränssnittet definierar en metod med samma namn, som bara söker efter dokumentets underträd. Dessutom definierar HTMLDocument-gränssnittet getElementByName()-metodendet baseras på värdena för name-attributet (inte etikettens namn) för att söka efter element.

Webbläsarstöd

document.getElementsByTagName() Det är en DOM Level 1 (1998)-funktion.

Alla webbläsare stöder det:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Stöd 9-11 Stöd Stöd Stöd Stöd

Relaterade sidor

JavaScript-referenshandbok:element.getElementsByTagName()

JavaScript-tutorial:JavaScript HTML DOM nodlista