HTML DOM Element getElementsByTagName() methode

Definitie en gebruik

getElementsByTagName() De methode retourneert een verzameling van elementen met een specifieke tagnaam als onderliggende elementen, als NodeList-object.

Tip:Parameterswaarde "*" Geef alle onderliggende elementen van het element terug.

Zie ook:

getElementsByClassName() methode

querySelector() methode

querySelectorAll() methode

NodeList

NodeList Is een lijst van soortgelijke array-knopen (lijst).

Je kunt de knopen in de lijst bereiken via index (index). De index begint bij 0.

length-eigenschapGeef het aantal knopen in de lijst terug.

Voorbeeld

Voorbeeld 1

Wijzig de HTML-inhoud van het eerste <li>-element in de lijst:

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

Probeer het zelf

Voorbeeld 2

Aantal <p>-elementen in "myDIV":

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

Probeer het zelf

Voorbeeld 3

Wijzig de lettergrootte van het tweede <p>-element in "myDIV":

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

Probeer het zelf

Voorbeeld 4

Wijzig de achtergrondkleur van alle <p>-elementen in "myDIV":

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

Probeer het zelf

Voorbeeld 5

Wijzig de achtergrondkleur van het vierde element (index 3) in "myDIV":

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

Probeer het zelf

Voorbeeld 6

Gebruik het parameter "*" om de achtergrondkleur van alle elementen in "myDIV" te wijzigen:

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

Probeer het zelf

Syntax

element.getElementsByTagName(tagname)

Parameter

Parameter Beschrijving
tagname Verplicht. De tagnaam van de onderliggende elementen.

Retourwaarde

Type Beschrijving
NodeList

Onderliggende elementen van het element met de gegeven merknaam.

Elementen worden gesorteerd op basis van hun volgorde van verschijning in de broncode.

Technische details

getElementsByTagName() Deze methode zal de nakomelingen van het opgegeven element doorzoeken en een array van Element-knooppunten retourneren (het is een NodeList-object), die alle documentelementen met de opgegeven tagnaam vertegenwoordigt. De volgorde van de elementen in de retournerende array is dezelfde als hun volgorde in de broncode van het document.

Let op

Document interfaceDefinieert ook getElementsByTagName() methode, dat vergelijkbaar is met deze methode, maar het doorzoekt het hele document in plaats van de nakomelingen van een element.

Meng dit niet door met HTMLDocument.getElementsByName() methode Wordt verward, terwijl het laatste op basis van de waarde van het name-eigenschap van het element zoekopdrachten uitvoert, in plaats van op basis van hun tagnaam.

Browserondersteuning

Ondersteund door alle browsers element.getElementsByTagName():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Ondersteuning Ondersteuning Ondersteuning Ondersteuning Ondersteuning Ondersteuning