Método HTML DOM getElementsByTagName()
❮ El Objeto ElementoEjemplo
Cambie el contenido HTML del primer elemento <li> (índice 0) en una lista:
var list = document.getElementsByTagName("UL")[0];
list.getElementsByTagName("LI")[0].innerHTML = "Milk";
Definición y uso
El método getElementsByTagName() devuelve una colección de elementos secundarios de un elemento con el nombre de etiqueta especificado, como un objeto NodeList.
El objeto NodeList representa una colección de nodos. Se puede acceder a los nodos por números de índice. El índice comienza en 0.
Sugerencia: puede usar la propiedad de longitud del objeto NodeList para determinar la cantidad de nodos secundarios con el nombre de etiqueta especificado, luego puede recorrer todos los nodos y extraer la información que desea.
Sugerencia: el valor del parámetro "*" devuelve todos los elementos secundarios del elemento.
Compatibilidad con navegador
Los números de la tabla especifican la primera versión del navegador que es totalmente compatible con el método.
| Method | |||||
|---|---|---|---|---|---|
| getElementsByTagName() | 1.0 | 6.0 | 3.0 | 3.0 | 9.5 |
Sintaxis
element.getElementsByTagName(tagname)
Valores paramétricos
| Parameter | Type | Description |
|---|---|---|
| tagname | String | Required. The tagname of the child elements you want to get |
Detalles técnicos
| Versión DOM | Objeto de elemento de nivel básico 1 |
|---|---|
| Valor de retorno: | Un objeto NodeList, que representa una colección de elementos secundarios del elemento con el nombre de etiqueta especificado. Los elementos de la colección devuelta se ordenan tal como aparecen en el código fuente. |
Más ejemplos
Ejemplo
Averigüe cuántos elementos <p> hay dentro de un elemento <div> (utilizando la propiedad de longitud del objeto NodeList):
var x =
document.getElementById("myDIV").getElementsByTagName("P").length;
Ejemplo
Cambia el color de fondo del segundo elemento <p> (índice 1) dentro de un elemento <div>:
var x =
document.getElementById("myDIV");
x.getElementsByTagName("P")[1].style.backgroundColor = "red";
Ejemplo
Cambia el color de fondo de todos los elementos <p> dentro de un elemento <div>:
var x = document.getElementById("myDIV");
var y = x.getElementsByTagName("P");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}
Ejemplo
Cambia el color de fondo del cuarto elemento (índice 3) dentro de un elemento <div>:
var x = document.getElementById("myDIV");
x.getElementsByTagName("*")[3].style.backgroundColor = "red";
Ejemplo
Utilizando el parámetro "*".
Cambia el color de fondo de todos los elementos dentro de un elemento <div>:
var x = document.getElementById("myDIV");
var y = x.getElementsByTagName("*");
var i;
for (i = 0; i < y.length; i++) {
y[i].style.backgroundColor = "red";
}
páginas relacionadas
Referencia de JavaScript: document.getElementsByTagName()
Tutorial de JavaScript: lista de nodos DOM HTML de JavaScript
❮ El Objeto Elemento