lunes, 2 de diciembre de 2019

Tema 6 -- Utilizacion del DOM

Utilizacion del DOM

Obteniendo el texto de nodos

Existe principalmente 4 formas distintas de obtener texto de nodos HTML: nodeValue , innerHTML, textContent e innerText. Nosotros nos centraremos en el uso de:
  • innerHTML: Obtiene el texto en formato “text/html” por lo que si el texto tuviese alguna etiqueta html la tendría en cuenta. Es un poco menos eficiente.
  • textContent : Obtiene el texto en formato “text/plain”. Solo devuelve el texto tal cual por lo que su uso es un poco más eficiente que innerHTML.

Veamos un ejemplo:
<p id="primero"> Primer párrafo </p>
   <script>
       let primero=document.getElementById('primero');
       alert(primero.textContent);
       alert(primero.innerHTML);
   </script>



Relación entre nodos

Con estas propiedades de DOM podemos localizar, movernos por los distintos elementos del árbol de nodos generado.

parentNode

La propiedad “parentNode” permite acceder al padre del nodo o devuelve null si no existe (por ejemplo, si el nodo no se ha añadido al documento).
<body>
   <div id="contenedor">
 <p id="primero">Primer parrafo</p>
   </div>   
<script>
var primero = document.getElementById('primero');
console.log(primero.parentNode.nodeName);                                  //DIV
console.log("Padre del padre: " + primero.parentNode.parentNode.nodeName); //BODY
</script>
</body>


firstElementChild y lastElementChild
Las propiedades firstElementChild y lastElementChild permiten acceder al primer y al último hijo de un nodo, como se puede comprobar en el ejemplo siguiente:
<div id="contenedor">
      <p id="primero">Primer párrafo</p>
 <p id="segundo">Segundo párrafo</p>
 <p id="tercero">Tercer párrafo</p></div>
<script>
 var contenedor = document.getElementById('contenedor');
 alert(contenedor.firstElementChild.textContent);  //Primer párrafo
 alert(contenedor.lastElementChild.textContent);   //Tercer párrafo
</script>


previousElementSibling y nextElementSibling
Por otra parte, previousElementSibling y nextElementSibling permiten acceder a los nodos hermanos, anterior y posterior respectivamente, de un mismo nodo. Sibling, en inglés, significa hermano/a. Ejemplo:
<div id="contenedor">
   <p id="primero">Primer párrafo</p>
   <p id="segundo">Segundo párrafo</p>
   <p id="tercero">Tercer párrafo</p></div>
<script>
   var contenedor = document.getElementById('segundo'); //Segundo párrafo
   alert(contenedor.textContent);
   alert(contenedor.previousElementSibling.textContent);   //Primer párrafo
   alert(contenedor.nextElementSibling.textContent);       //Tercer párrafo
</script>


Obtención de nodos descendientes: 'children' y 'hasChildNodes()'
La propiedad children nos permite acceder a la lista de nodos contenidos que se puede tratar como un array y conocer la cantidad de nodos a través de la propiedad length . Por otro lado, si sólo se quiere saber si contiene otros nodos o no, se puede invocar el método hasChildNodes() , que devolverá “true” si contiene o “false” en caso contrario.
<div id="contenedor">
 <p id="primero">Primer párrafo</p>
 <p id="segundo">Segundo párrafo</p>
 <p id="tercero">Tercer párrafo</p></div>
<script>
 var contenedor = document.getElementById('contenedor');
 console.log('El contenedor contiene nodos: ' + contenedor.hasChildNodes());
 console.log("Contiene " + contenedor.children.length + ' nodos');
 let hijo = contenedor.firstElementChild;
 while ( hijo != null)
 {
        console.log("El contenido del hijo es: "  + hijo.textContent );
        hijo = hijo.nextElementSibling;
 }
</script>

También podríamos iterar por los elementos como lo hemos visto en clase:
for( var i=0; i < contenedor.children.length; i++)
{
 console.log("-- El contenido del hijo es: " + contenedor.children[i].textContent );
}


Creación, sustitución y borrado de elementos

Creación de elementos

Para crear un nuevo elemento utilizaremos una serie de pasos con los que trabajaremos con una serie de métodos:
  1. createElement: El método document.createElement ( <tipo_elemento>) creará un nuevo elemento HTML del tipo que deseemos.
  2. createTextNode:   Para añadir contenido a dicho elemento recién creado debemos de utilizar el método document.createTextNode ( <contenido>) el cual nos va a crear un “nodo” con el contenido deseado.
  3. appendChild: Para añadir el nodo con el contenido al elemento HTML creado debemos de utilizar el método elementoHTML.appendChild ( <contenido>). Este método es usado con propósito general para añadir elementos a nuestro árbol DOM. (También si quisieramos insertar el nodo por el principio se puede usar el método “insertBefore()”).
  4. Y por último también podríamos añadirle atributos a dicho elemento recién creado mediante el método elementoHTML.setAttribute( <tipo_atributo>, <valor_atributo>). (Este método se usa tanto para añadir como para modificar atributos que ya existen). Si quisiéramos eliminar atributos podríamos utilizar el método elementoHTML.removeAttribute( <tipo_atributo> ). 
Veamos un ejemplo de un método que crea un párrafo:
function crearParrafo() {
        //Crear elemento
        var parrafo = document.createElement("p");
        //Crear contenido
        var nodoTexto = document.createTextNode("Hola, soy un nuevo párrafo");
        parrafo.appendChild(nodoTexto);
        //Añadir atributos:
        parrafo.setAttribute("class", "miClase");  //parrafo.className="miClase";

    }


Vamos a ver un nuevo ejemplo de cómo podríamos crear una imagen:
function crearImagen() {
 //Crear elemento
 var imagen = document.createElement("img");
 //Añadir atributos:
      //Le pedimos al usuario la ruta de la imagen
 var ruta = prompt("Introduce la ruta de la imagen");
imagen.src = ruta;
      //Añadimos un nuevo atributo:
 imagen.setAttribute("alt", prompt("Introduce texto alternativo"));

      //var cont = document.getElementById("div1");   //Terminaríamos seleccionado el
 //cont.appendChild(imagen);                     // elemento donde queremos               
                                                      // añadir la imagen.
}

Borrado de elementos
Para borrar elementos necesitamos tener acceso a 2 elementos: el padre del elemento que queremos borrar y el elemento a borrar. Para esta operación utilizaremos el método padre.removeChild(hijo). Veámoslo con un ejemplo:
function borrarUltimoHijo() {
 var padre = document.getElementById("div1");
 var hijo = padre.lastChild; //Seleccionar el último hijo
 //Elimina un elemento hijo:
 padre.removeChild(hijo);
}


Sustitución de elementos
Para sustituir o reemplazar elementos necesitamos también 3 elementos: el nodo padre, el nodo hijo que queremos reemplazar, y el nuevo elemento por el que se va a reemplazar. Para este cometido utilizamos el método padre.replaceChild ( <nuevoElemento>, <elementoReemplazado>). Veámoslo con un ejemplo:
function sustituirPrimero() {
 //Accedemos al padre:
 var padre = document.getElementById("div1");
 //Creamos el nuevo elemento: un párrafo con el texto Vacío
 var parrafo = document.createElement("p");
 var contenidoParrafo = document.createTextNode("Vacio");
 parrafo.appendChild(contenidoParrafo);
 //Sustituir un elemento:
 padre.replaceChild(parrafo, padre.firstChild);   //Nuevo, viejo
}






/*-------------------------------- FORMAS DE ACCEDER A UN ELEMENTO HTML -------------------------------------------*/


//Seleccionar un único elemento según su ID
document.getElementById("parrafo1").innerHTML = "Cambiamos el texto html del parrafo1";

//Seleccionar todos los elementos segun su etiqueta
document.getElementsByTagName("p")[1]; //Nos devuelve un array por lo que debemos de indicar que posicion queremos.

//Seleccionar todos los elementos según su clase
document.getElementsByClassName("miClase")[0]; //Devuelve un array (igual que el de arriba);

//Seleccionar un elemento dentro de otro
var principal = document.getElementById("main");
var parrafo1 = principal.getElementById("parrafo1");

//Seleccionar el primer elemento con un selector css
document.querySelector("p.miClase");

//Seleccionar cualquier otro elemento con un selector css
document.querySelector("p.miClase")[0];



//Para modificar el css --> document.getElementById(id).style.property = new style
document.getElementById("p2").style.color = "blue";



//Para modificar el atributos ---------------------------------------------

//get
document.getElementById("p2").getAttribute("style");
//set
document.getElementById("p2").setAttribute("style", "background-color: red;");
//remove
document.getElementById("p2").removeAttribute("style");
//has
document.getElementById("p2").hasAttribute("style");



//Clases -----------------------------------------------------------------

//Add
document.getElementById("p1").className = "miClase"; //si se pone = se añade, sino devuelve las clases
//Remove
document.getElementById("p1").classList.remove("miClase"); //classList devuelve todas las clases y tiene los metodos 
                                                        //add, remove, toggle, contains

Etiquetas: , ,