HTML DOM Element getElementsByTagName() metoden

Definition och användning

getElementsByTagName() Metoden returnerar en samling av element under en specifik etikett, representerad som NodeList-objekt.

Tips:Parametervärde "*" Returnerar alla underelement för elementet.

Se också:

getElementsByClassName() metoden

querySelector() metoden

querySelectorAll() metoden

NodeList

NodeList Det är en nodkollektion (lista) som liknar en array.

Du kan komma åt noder i listan via index (index). Index börjar från 0.

length-attributetReturnera antalet noder i listan.

Exempel

Exempel 1

Ändra HTML-innehållet för den första <li>-elementen i listan:

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

Prova själv

Exempel 2

Antalet <p>-element i "myDIV":

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

Prova själv

Exempel 3

Ändra storleken på tecknen för det andra <p>-elementet i "myDIV":

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

Prova själv

Exempel 4

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

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

Prova själv

Exempel 5

Ändra bakgrundsfärgen för den fjärde elementen (index 3) i "myDIV":

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

Prova själv

Exempel 6

Använd "*"-parametern för att ändra bakgrundsfärgen för alla element i "myDIV":

const div = document.getElementById("myDIV");
const nodes = div.getElementsByTagName("*");
för (låt i = 0; i < nodes.length; i++) {
  nodes[i].style.backgroundColor = "red";
}

Prova själv

Syntax

element.getElementsByTagName(tagname)

Parameter

Parameter Beskrivning
tagname Obligatorisk. Subkomponentens taggnamn.

Returvärde

Typ Beskrivning
NodeList

Underkomponenter för element med det givna taggnamnet.

Element sorteras i samma ordning som de uppstår i källkoden.

Tekniska detaljer

getElementsByTagName() Metoden kommer att traversera undernoderna till det specifika elementet, och returnera en array (efterliknande NodeList-objekt) som innehåller Element-noder, som representerar alla dokumentelement med det specifika taggnamnet. Elementen i den returnerade arrayen är i samma ordning som de uppstår i dokumentets källkod.

Observera

Document-gränssnittetäven definierar getElementsByTagName() metodden liknar denna metod, men traverserar hela dokumentet, inte endast undernoderna till ett element.

Inte blanda ihop denna metod med HTMLDocument.getElementsByName() metod Förvirra, den senare baseras på elementets name-attributvärde för att söka efter element, inte baserat på deras taggnamn.

Webbläsarstöd

Alla webbläsare stöder element.getElementsByTagName():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Stöd Stöd Stöd Stöd Stöd Stöd