- 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
<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)
'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