HTML DOM Document getElementsByTagName() methode

Definitie en gebruik

getElementsByTagName() De methode retourneert een verzameling van alle elementen met de opgegeven tagnaam.

getElementsByTagName() De methode retourneert HTMLCollection.

getElementsByTagName() De eigenschap is alleen lezen.

Opmerking:getElementsByTagName("*") Retourneert alle elementen in het document.

HTMLCollection

HTMLCollection Is een lijst van HTML-elementen die vergelijkbaar is met een array.

Elementen in de verzameling kunnen worden bereikt via index (beginnend bij 0).

length De eigenschap retourneert het aantal elementen in de verzameling.

Zie ook:

getElementById() methode

getElementsByClassName() methode

querySelector() methode

querySelectorAll() methode

HTMLCollection object

Voorbeeld

Voorbeeld 1

Haal alle elementen met de tagnaam "li" op:

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

Try it yourself

Voorbeeld 2

Haal alle elementen in het document op:

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

Try it yourself

Voorbeeld 3

Wijzig de interne HTML van het eerste <p> element in het document:

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

Try it yourself

Voorbeeld 4

Aantal <li> elementen in het document:

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

Try it yourself

Voorbeeld 5

Wijzig de achtergrondkleur van alle <p> elementen:

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

Try it yourself

Syntax

document.getElementsByTagName(tagName)

Parameter

Parameter Description
tagName Required. The tag name of the element.

Return value

Type Description
Object

HTMLCollection object.

A collection of elements with the specified tag name.

Sorted according to the order of elements in the document.

Technical details

This method will return a NodeList object (which can be treated as a read-only array), which stores all Element nodes with the specified tag name in the document, in the order they appear in the source document.

The NodeList object is 'live', meaning that if elements with the specified tag name are added or removed from the document, its content will automatically update as necessary.

HTML documents are not case-sensitive, so you can specify any case of the name. tagName, it matches all tags with the same name in the document, regardless of the case used in the source document. But XML documents are case-sensitive,tagName Only matches tags with the same name and case as the source document.

Tip:The Element interface defines a method with the same name, which only retrieves the subtree of the document. In addition, the HTMLDocument interface defines getElementByName() method, it retrieves elements based on the value of the name attribute (not the tag name).

Browser support

document.getElementsByTagName() It is a DOM Level 1 (1998) feature.

All browsers support it:

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

Related pages

JavaScript Reference Manual:element.getElementsByTagName()

JavaScript Tutorial:JavaScript HTML DOM Node List