Método getElementsByTagName() del objeto HTML DOM Document

Definición y uso

getElementsByTagName() El método devuelve una colección de elementos con el nombre de etiqueta especificado.

getElementsByTagName() El método devuelve HTMLCollection.

getElementsByTagName() La propiedad es de solo lectura.

Nota:getElementsByTagName("*") Devuelve todos los elementos del documento.

HTMLCollection

HTMLCollection Es una colección de elementos HTML similar a un array (lista).

Se puede acceder a los elementos de la colección mediante índice (comienza en 0).

length La propiedad devuelve el número de elementos en la colección.

Vea también:

Método getElementById()

Método getElementsByClassName()

Método querySelector()

Método querySelectorAll()

Objeto HTMLCollection

Ejemplo

Ejemplo 1

Obtener todos los elementos con el nombre de etiqueta "li":

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

prueba personalmente

Ejemplo 2

Obtener todos los elementos del documento:

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

prueba personalmente

Ejemplo 3

Cambiar el HTML interno del primer elemento <p> del documento:

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

prueba personalmente

Ejemplo 4

Número de elementos <li> en el documento:

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

prueba personalmente

Ejemplo 5

Cambiar el color de fondo de todos los elementos <p>:

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

prueba personalmente

sintaxis

document.getElementsByTagName(tagName)

parámetros

parámetros descripción
tagName obligatorio. El nombre de la etiqueta del elemento.

valor de retorno

tipo descripción
objeto

objeto HTMLCollection.

conjunto de elementos con el nombre de etiqueta especificado.

se ordenan según el orden en que aparecen los elementos en el documento.

Detalles técnicos

Este método devuelve un objeto NodeList (que se puede tratar como un array de solo lectura), que contiene todos los nodos Element con el nombre de etiqueta especificado en el documento, en el orden en que aparecen en el documento de origen.

El objeto NodeList es "vivo", es decir, si se agregan o eliminan elementos con el nombre de etiqueta especificado en el documento, su contenido se actualizará automáticamente.

Los documentos HTML no distinguen entre mayúsculas y minúsculas, por lo que se puede especificar cualquier forma de escritura en mayúsculas o minúsculas. tagNameque coincide con todas las etiquetas del mismo nombre en el documento, sin importar la forma de escritura en mayúsculas o minúsculas que hayan utilizado en el documento de origen. Pero los documentos XML distinguen entre mayúsculas y minúsculas,tagName solo coincide con las etiquetas que tienen el mismo nombre y forma de escritura en minúsculas que las del documento de origen.

Consejo:La interfaz Element define un método con el mismo nombre, que solo busca en el subárbol del documento. Además, la interfaz HTMLDocument define Método getElementByName()busca elementos basándose en el valor de la propiedad name (no en el nombre de la etiqueta).

Compatibilidad del navegador

document.getElementsByTagName() Es una característica de DOM Level 1 (1998).

Todos los navegadores lo soportan:

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

Páginas relacionadas

Manual de referencia de JavaScript:element.getElementsByTagName()

Tutoriales de JavaScript:Lista de nodos HTML DOM de JavaScript