HTML DOM getElementsByTagName() Method

<Elemento de objeto

Ejemplo

Cambiar el contenido HTML de la primera <li> elemento (index 0) en una lista:

var list = document.getElementsByTagName("UL")[0];
list.getElementsByTagName("LI")[0].innerHTML = "Milk";

Antes de cambiar el texto:

Coffee
Tea

Después de cambiar el texto:

Milk
Tea

Inténtalo tú mismo "

Definición y Uso

El getElementsByTagName() método devuelve una colección de elementos secundarios de un elementos con el nombre de la etiqueta especificada, como un objeto NodeList.

El objeto NodeList representa una colección de nodos. Los nodos pueden ser accedidos por números de índice. El índice comienza en 0.

Consejo: Puede utilizar la longitud de la propiedad del objeto NodeList para determinar el número de nodos secundarios con el nombre de la etiqueta especificada, entonces se puede recorrer todos los nodos y extraer la información que desee.

Consejo: El ParameterValue "*" devuelve todos los elementos secundarios del elemento.

Soporte del navegador

Los números de la tabla especifica la primera versión del navegador que es totalmente compatible con el método.

Método
getElementsByTagName()	1.0	6.0	3.0	3.0	9.5

Sintaxis

element .getElementsByTagName( tagname )

Los valores de los parámetros

Parámetro	Tipo	Descripción
tagname	String	Necesario. El nombre de etiqueta de los elementos secundarios que desea obtener

Detalles técnicos

Versión DOM	Nivel básico 1 Elemento de objetos
Valor de retorno:	Un objeto NodeList, que representa una colección de elementos secundarios del elemento con el tagname especificado. Los elementos de la colección devuelta se clasifican como aparecen en el código fuente.

Más ejemplos

Ejemplo

Averiguar cuántos <p> elementos que hay dentro de un <div> elemento (usando la propiedad length del objeto NodeList):

var x = document.getElementById("myDIV").getElementsByTagName("P").length;

El resultado de x será:

Inténtalo tú mismo "

Ejemplo

Cambiar el color de fondo de la segunda <p> elemento (index 1) dentro de un <div> elemento:

var x = document.getElementById("myDIV");
x.getElementsByTagName("P")[1].style.backgroundColor = "red";

Inténtalo tú mismo "

Ejemplo

Cambiar el color de fondo de todos los <p> elementos dentro de un <div> elemento:

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

Inténtalo tú mismo "

Ejemplo

Cambiar el color de fondo del cuarto elemento (index 3) dentro de un <div> elemento:

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

Inténtalo tú mismo "

Ejemplo

Usando el "*" parámetro.

Cambiar el color de fondo de todos los elementos dentro de un <div> elemento:

var x = document.getElementById("myDIV");
var y = x.getElementsByTagName("*");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}

Inténtalo tú mismo "