- JavaScript manejo del DOM
- Manejar el DOM en JavaScript
- Cambiar color usando el DOM en JavaScript
- JavaScript manejando el DOM por sus etiquetas
- JavaScript manejando el DOM con las clases
- JavaScript manejando el DOM
y dentro de ella el ejemplo
Basándonos en esta idea vamos a plantear un nuevo caso práctico. Disponemos de una lista con tres elementos que deseamos cambiar.
La lista original es la siguiente.
Después de pulsar el botón obtenemos una nueva lista.
El código funcionando podemos verlo en el siguiente enlace.
HTML
Creamos una lista con tres elementosli. <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
</head>
<body>
<ul>
<li>uno</li>
<li>dos</li>
<li>tres</li>
</ul>
<p>Presiona el botón para cambiar el texto de los elementos de la lista.</p>
<button onclick="myFunction()">Pruébalo</button>
<script type="text/javascript" src="script.js"></script>
</body>
</html> JavaScript
Método 1
Creamos la variablelist que contiene un HTMLCollection que se forma con los elementos li del DOM.Construimos un bucle
for clásico donde gracias a item(i) podemos recorrer todos los elementos li y modificarlos. Podríamos haber escritolist.item(i).innerHTML=i+1;pero hemos preferido incluir algo de código HTML para que aparezcan en cursiva los números 1, 2 y 3.
//Método 1
function myFunction() {
var list = document.getElementsByTagName("LI");
for (var i=0;i<list.length;i++){
list.item(i).innerHTML='<i>'+parseInt(i+1)+'</i>';
}
}
Método 2
En este caso hemos contruido el bucle con la estructurafor of. //Método 2
function myFunction() {
var list = document.getElementsByTagName("LI");
var i=1;
for (var elemento of list){
elemento.innerHTML=i;
i++;
}
} Método 3
Hemos de convertir el objeto HTMLCollection que contiene los tres HTMLLIElement en un array para poder luego recorrer los elementos del array con un bucleforEach. //Método 3
function myFunction() {
var list = document.getElementsByTagName("LI");
console.log(list);
//convertimos un object HTMLLIElement en un array
list_arr=Array.from(list);
list_arr.forEach((value, key) => {
value.innerHTML=key+1;
});
}
