El DOM y JavaScript

EL DOM y JavaScript

El DOM permite que los lenguajes de guión (ej. JavaScript) accedan y manipulen los elementos de la página.

El navegador convierte el código HTML en el DOM.

El DOM representa los elementos como nodos y objetos con los cuales podemos trabajar en JavaScript.

JavaScript interactúa con el DOM para modificar la estructura, el contenido o el estilo de los elementos.

Podremos trabajar con sus propiedades, métodos y con distintos eventos (ej. pulsar un botón).

1. Nodos

▪ El documento en sí.

▪ Elementos HTML.

▪ Texto entre etiquetas.

▪ Comentarios.

2. Jerarquía del DOM

El DOM forma una jerarquía.

▪ El nodo raíz (root node) es el ubicado en la parte superior del árbol htmlX.

▪ El nodo padre (parent node) es aquel nodo que contiene a otro en la jerarquía del DOM head y body.

▪ El nodo hijo (child node) es el nodo que está contenido directamente dentro de otro nodo. title sería el hijo del nodo.

▪ Los nodos descendientes (descendant node) son aquellos contenidos dentro de otro nodo en la jerarquía (directa o indirectamente). h1 seria descendiente de body.

▪ Los nodos hermanos (sibling nodes) son los que están ubicados al mismo nivel. h1 y p.

3. Nodo vs Elemento

El concepto de nodo es más amplio que el concepto de elemento en el DOM.

Un nodo puede contener más tiempo de información que los elementos.

Un nodo puede ser un elemento HTML pero también puede ser texto o comentarios en el documento.

4. Herramientas Chrome

▪ Crea una página web con el código HTML de la página del DOM vista anteriormente.

▪ Sobre esa página: Botón derecho del ratón Inspeccionar (insertar foto)

▪ Si pinchamos en el texto lo podremos editar y modificar el DOM.

▪ Podemos pulsar el botón derecho sobre un elemento html (por ejemplo H1) y aparecerán múltiples opciones para manipular la página: “Editar como HTML”, “Editar texto” (permite editar el texto)

▪ Todos estos cambios son temporales hasta que se recarga la página.

▪ Si pinchamos en el icono de la flecha podemos ver características del elemento sobre el que pasamos. (insertar foto).

5. Métodos principales

Podemos seleccionar diferentes elementos del DOM desde JavaScript recurriendo a las clases, los IDs, las etiquetas, etc.

01. getElementById

Permite obtener un elemento por medio de su id, recordemos que ese id debería ser único por definición.

const contenedor = document.getElementById('contenedor’);

//Si dos elementos tienen el mismo ID se retorna solo el primero, si el ID no existiera devolverá NULL.

contenedor.innerHTML;

//Obtendríamos el código HTML del elemento contenedor (si se tratara de un campo de formulario sería contenedor.value)

titulo.innerText;

//Obtendríamos el texto ‘plano’ que se encuentre en ese elemento.

titulo.tagName;

//Obtendríamos la etiqueta HTML de un elemento de id ‘titulo’.

02. getElementByClassName

Cuando seleccionamos por clases podemos seleccionar varios elementos que tengan esa clase.

const pais = document.getElementsByClassName('pais');

Los elemento de esa clase se presentan como si fueran arrays y por lo tanto tienen un índice con el que podré acceder a él con (pais[0]) y podre calcular su longitud con pais.length.

Del mismo modo también podré hacer cosas como: país[1].id si quiero acceder al id de ese elemento.

03. getElementByTagName

Cuando seleccionamos por etiqueta, seleccionamos todos los elementos que compartan esa etiqueta (ej. a).

const enlaces = document.getElementsByTagName('a’);
//La etiqueta debe de ir escrita entre comillas

Esto devuelve un array por lo que podemos acceder a sus elementos como así lo fuera.

– Con getAttribute accedemos a los atributos de ese elemento, con removeAttribute podemos borrarlos y con setAttribute modificarlos.

console.log(enlaces[0].getAttribute('href’));

enlaces[0].removeAttribute('href’);

enlaces[0].setAttribute('href', 'https://www.wikipedia.org');

04. querySelector()

El método document.querySelector() permite seleccionar el primer elemento del DOM que coincida con un selector CSS. Por ejemplo:

document.querySelector(«selector»);

Selector: puede ser cualquier selector válido de CSS (por ejemplo: clase, id, etiqueta, combinaciones, etc.).

let titulo = document.querySelector("#miTitulo");
let elemento = document.querySelector(".miClase");
const consulta = document.querySelector('.pais.fondo-naranja’)

Si usamosel selector querySelectorAll(“classe o clases”) seleccionaríamos todos los elementos de esa clase o clases.

05. Modificar clases

En primer lugar debemos seleccionar la clase que tenemos que modificar:

const primerPais = document.querySelector('.pais’);

A partir de ahí, con la propiedad style podemos acceder a cada uno de los estilos CSS de ese elemento.

Hay que tener en cuenta que las propiedades que en CSS utilizan un guión, como “background-color”, en JS es backgroundColor (convención “camel case”).

Ejemplos:

primerPais.style.backgroundColor = 'blue’;

primerPais.style.color = 'green';

06. Añadir clases

Una vez que accedemos a un elemento podemos consultar las clases que le afectan:

primerPais.style.backgroundColor = 'blue’;

primerPais.style.color = 'green';

– Añadir una clase:
primerPais.classList.add(‘mi-clase’);

– Borrar una clase:
primerPais.classList.remove(‘mi-clase’);

07. Crear elementos en el DOM

Para crear nuevos elementos podemos usar “createElement”:

Ejemplo (el elemento “lista-países” es una lista ordenada):

const listaDePaises = document.getElementById('lista-paises’);

Con createElement(‘elemento’) creamos un nuevo elemento (un ‘li’ a esa lista):

const paisNuevo = document.createElement('li’);

Por médio de append lo añadimos a la lista:

listaDePaises.append(paisNuevo);

Y le podemos asignar clases al nuevo elemento:

paisNuevo.classList.add('pais', 'fondo-marron');

08. Recorrer el DOM

Código de ejemplo:

<div id="contenedor">
    <h1 id="titulo">(imagen) <br>Paises para visitar</h1>
    <ul id="lista-paises">
        <li class="pais fondo-marron" id="italia">Italia</li>
        <li class="pais fondo-naranja">Australia</li>
        <li class="pais fondo-marron" id="india">India</li>
        <li class="pais fondo-naranja">Japón</li>
    </ul>
    <a href="http://www.google.es">Más paises en Google</a>
</div>

const listaDePaises = document.getElementById('lista-paises’);

//Acceder al padre, elemento HTML
listaDePaises.parentElement;

//Accedemos al padre del padre (abuelo):
listaDePaises.parentElement.parentElement;

//Podemos acceder a los hijos a través del padre:
listaDePaises.children;

//Podemos acceder a los hijos a través del padre como array:
listaDePaises.children[0];

//Acceder al país mediante su ID:
const listaDePaises = document.getElementById('lista-paises’);

//Acceder al padre, elemento HTML:
listaDePaises.parentElement;

//Accedemos al padre del padre (abuelo):
listaDePaises.parentElement.parentElement;

//Podemos acceder a los hijos a través del padre:
listaDePaises.children;

//Podemos acceder a los hijos a través del padre como array:
listaDePaises.children[0];

//Podemos acceder al primer hijo del elemento:
listaDePaises.firstElementChild;

//Acceder al último hijo del padre:
listaDePaises.lastElementChild;

//Acceder al hermano anterior del elemento:
listaDePaises.previousElementSibling;

//Acceder al hermano siguiente al elemento:
listaDePaises.nextElementSibling;