miércoles, 31 de julio de 2019

JavaScript manejando el DOM por sus etiquetas

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 un artículo anterior ya hemos hablado de cómo manejar el DOM desde JavaScript utilizando el id de las etiquetas <div> entre otras, ahora continuamos profundizando en el manejo del DOM utilizando sus etiquetas: <h1>, <p>, <div>, <span><section>, ...

En muchos casos el HTML de las página web utiliza etiquetas que no llevan ningún id y simplemente tenemos que manejarlas haciendo referencia al tipo de etiqueta de que se trata y cuando son varias del mismo tipo, por ejemplo varios <div> podemos recogerlos todos y luego tratarlos por el número que ocupan dentro del HTMLCollection que hemos capturado. Este contenedor actua como un array donde los elementos son todos los <div> capturados.

Página en Firefox y consola con F12.

HTML

Tenemos un div inicial con etiqueta id="micaja". Con este hemos trabajado en el post citado. Ahora creamos tres div sin etiqueta. Cuando trabajemos con ellos nos referiremos a cada uno de ellos de forma individual por el índice que ocupan en una array que se puede formar con ellos.
También hemos añadido una sección con etiqueta id="miseccion".

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>modifica el DOM</title>  
  </head>  
  <body>  
   <h1>Manejamos de DOM</h1>  
   <p>Estamos manejando el DOM desde código JS.</p>  
   <div id="micaja">Texto inicial del cuerpo</div>  
   <div>Este es el div 1.</div>  
   <div>Este es el div 2.</div>  
   <div>Este es el div 3.</div>  
   <section id="miseccion">  
    <hr>  
    <h1>Listado de los textos de los DIVs</h1>  
   </section>  
   <!--scripts-->  
   <script src="dom3.js"></script>  
  </body>  
 </html>  

JavaScript

Tenemos dos zonas de código.

  • (línea 3)   Trabajar con elementos con un id concreto  (esto ya se vió en el post citado al inicio)
  • (línea 18) Trabajar con elementos por su etiqueta  (ésta es la parte nueva)
https://repl.it/@valoro/JS-DOM3

 'use strict'
//Seleccionar y modificar elementos del DOM

// TRABAJAR CON ELEMENTOS CON UN ID CONCRETO

//Veo el contenido del ID completo (como objeto)
var caja = document.getElementById("micaja");
//console.log(caja);

//Veo el texto del ID
caja = document.getElementById("micaja").innerHTML;
//console.log(caja);

//Puedo modificar el texto desde JS
caja = document.getElementById("micaja");

caja.innerHTML = "Nuevo texto escrito desde JS";
//console.log(caja.innerHTML);

//Cambio el style de la caja
caja.style.color = "red";
caja.style.backgroundColor = "yellow";
caja.style.border = "thick solid #0000FF";


//TRABAJAR CON ELEMENTOS POR SU ETIQUETA
//declaramos una variable que es un HTMLcollection (similar a un array)
// que captura todas las etiquetas
var todosLosDiv = document.getElementsByTagName("div");

console.log(todosLosDiv); //se muestra el HTMLcollection con todos los div

var contenidoEnTexto2 = todosLosDiv[2]; //podemos elegir un elemento concreto del HTMLcollection

console.log(contenidoEnTexto2.textContent);  //textContent captura el texto contenido

//textContent es similar a innerHTML aunque este último permite asignar contenido
contenidoEnTexto2.innerHTML = "Otro texto para el DIV 2";
console.log(contenidoEnTexto2);//muestra todo el div no solo el textContent
contenidoEnTexto2.style.backgroundColor = "cyan"; //puedo manejar los estilos

for (let valor in todosLosDiv) {
    //con el if evitamos tres undefined que se mustran al final y no son div
    if (typeof todosLosDiv[valor].textContent == "string") {
        var parrafo = document.createElement("p"); //creamos un elemento de parrafo
        //pillamos en la variable texto todos los textos de los div
        var texto = document.createTextNode(todosLosDiv[valor].textContent);
        parrafo.append(texto); //anexamos el texto al elemento parrafo creado
        //parrafo.appendChild(texto); //también funcionaría con appendChild
        //anexamos el párrafo a la sección "miseccion"
        document.querySelector("#miseccion").append(parrafo);
        //si en lugar de append ponemos prepend inserta el parrafo invirtiendo el orden de los div
    }
}
var hr = document.createElement("hr");//creamos un hr
miseccion.append(hr);//el hr lo añadimos al final
hr.style.borderColor = "red";//el hr será rojo. Esta línea no funciona en algunos navegadores

No hay comentarios:

Publicar un comentario