Método getElementsByTagName() del elemento HTML DOM

Definición y uso

getElementsByTagName() El método devuelve una colección de elementos hijos con un nombre de etiqueta específico, como un objeto NodeList.

Consejo:Valor de parámetro "*" Devuelve todos los elementos hijos del elemento.

Vea también:

Método getElementsByClassName()

Método querySelector()

Método querySelectorAll()

NodeList

NodeList Es una colección de nodos similar a un array (lista).

Puede acceder a los nodos de la lista mediante índices (subíndices). El índice comienza en 0.

Atributo lengthDevuelve el número de nodos en la lista.

Ejemplo

Ejemplo 1

Cambiar el contenido HTML del primer elemento <li> de la lista:

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

Pruebe usted mismo

Ejemplo 2

Número de elementos <p> dentro de "myDIV":

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

Pruebe usted mismo

Ejemplo 3

Cambiar el tamaño de la fuente del segundo elemento <p> dentro de "myDIV":

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

Pruebe usted mismo

Ejemplo 4

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

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

Pruebe usted mismo

Ejemplo 5

Cambiar el color de fondo del cuarto elemento (índice 3) de "myDIV":

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

Pruebe usted mismo

Ejemplo 6

Use el parámetro "*" para cambiar el color de fondo de todos los elementos en "myDIV":

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

Pruebe usted mismo

Sintaxis

element.getElementsByTagName(tagname)

Parámetro

Parámetro Descripción
tagname Obligatorio. El nombre de etiqueta del subelemento.

Valor de retorno

Tipo Descripción
NodeList

Elementos que tienen un nombre de etiqueta dado.

Los elementos se ordenan según la secuencia en la que aparecen en el código fuente.

Detalles técnicos

getElementsByTagName() El método recorrerá los nodos descendientes del elemento especificado, devolviendo un array (en realidad un objeto NodeList) que contiene nodos Element, que representan todos los elementos del documento que tienen el nombre de etiqueta especificado. La secuencia de los elementos en el array es la misma que la secuencia en la fuente del documento.

Atención

Interfaz DocumentTambién define Método getElementsByTagName(), que es similar a este, pero recorre todo el documento en lugar de recorrer los nodos descendientes de algún elemento.

No mezcle este método con Método getElementsByName() de HTMLDocument Se puede confundir, ya que el último se basa en el valor de la propiedad name del elemento para buscar elementos, en lugar de basarse en sus nombres de etiqueta.

Admisión de navegador

Todos los navegadores lo admiten element.getElementsByTagName():

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Soporte Soporte Soporte Soporte Soporte Soporte