domingo, 29 de septiembre de 2019

JavaScript manejando el DOM

Este artículo forma parte de una serie que trata sobre el DOM (Document Object Model) y su manejo desde JavaScript.
  1. JavaScript manejo del DOM
  2. Manejar el DOM en JavaScript
  3. Cambiar color usando el DOM en JavaScript
  4. JavaScript manejando el DOM por sus etiquetas
  5. JavaScript manejando el DOM con las clases
  6. JavaScript manejando el DOM
En https://www.w3schools.com podemos ver la página
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 elementos li.

 <!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 variable list 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 escrito

list.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 estructura for 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 bucle forEach.

 //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;  
  });  
 }

en
Etiquetas: ,

No hay comentarios:

Publicar un comentario

Suscribirse a: Enviar comentarios (Atom)