26 de octubre de 2017

JavaScript - DOM (Modelo de Objetos del Documento)

Cuando una página web es cargada, el navegador crea un Document Object Model (DOM) = Modelo de Objetos del Documento.
Se suele conocer también como árbol DOM, ya que todos los nodos se mapean descendiendo escalonadamente del nodo raíz (document)


DOM es un standard del W3C define una interfaz de programación independiente del lenguaje y plataforma que permite acceder y modificar cada uno de los nodos que lo forman (manejar el contenido, estructura y estilo de un documento) Se divide en múltiples interfaces, pero nos vamos a centrar en HTML DOM.

Mediante lenguajes como Java, XPath y ECMAScript (JavaScript), entre otros, se utiliza el HTML DOM para manipular los elementos HTML como objetos con sus métodos, propiedades y eventos.
NOTA: Ejemplos famosos de estos son el método getElementById(id), la propiedad innerHTML o el evento onclick

En DOM todo es un nodo (tipo Node):
  • El documento es un nodo document
  • Todos los elementos HTML son nodos element (tipo Element)
  • Todos los atributos HTML son nodos attribute (tipo Attr)
  • El texto dentro de elementos HTML son nodos text
  • Los comentarios son nodos comment
Podremos conocer el tipo de nodo que tenemos con la propiedad nodeType.

Node

Los nodos son los elementos sobre los que se contruyen las conexiones del árbol DOM. Pueden tener relación de padre, hijo o hermano:


Básicamente se puede crear un nodo, añadir un nodo a otro en una posición concreta entre el resto de nodos que contiene, eliminar un nodo o reemplazarlo por otro. Veamos un ejemplo:
  1. Creamos un nodo en el documento con document.createElement("div") para crear un nodo elemento con etiqueta div o con document.createTextNode("Mi Texto") para crear un nodo de texto. Estos métodos devuelven los nodos creados.
  2. Si almacenamos las referencias anteriores en las variable "capa" y "texto" respectivamente, podemos añadir un nodo a un elemento creado para que pase a ser su último hijo con capa.appendChild(texto). Si queremos colocarlo en otra posición usariamos capa.insertBefore(otroTexto, texto).
  3. De la misma forma que añadimos podemos eliminar un nodo hijo con el método capa.removeChild(texto), o reemplazarlo con otro de sus hijos capa.replaceChild(document.createTextNode("Nuevo texto"), texto).
El ejemplo completo sería
//Creamos un nodo en el documento
var capa = document.createElement("div");
var texto = document.createTextNode("Mi Texto");

//Añadimos un nodo a un elemento
capa.appendChild(texto); //pasa a ser su último hijo (lastChild)
//Si queremos colocarlo en otra posición
capa.insertBefore(texto, otroNodo); //colocado delante de otroNodo(nextSibling)

//De la misma forma que añadimos podemos eliminar un nodo hijo
capa.removeChild(texto);
//O reemplazarlo con otro de sus hijos
capa.replaceChild(document.createTextNode("Nuevo texto"), texto);
Con estas operaciones podemos modificar todo el contenido de un documento HTML, pero hay que tener cuidado con los métodos que se usan ya que hemos utilizado nodos de distintos tipos (document, element y text), pero tienen diferencias que hay que tener en cuenta (element puede tener hijos pero text o attribute no) y al no ser un lenguaje tipado debemos controlarlo nosotros.

Document

Un documento HTML que se carga en el navegador se convierte en un objeto document. Éste objeto es el nodo raíz y propietario de los otros nodos.
NOTA: En la entrada anterior facilitaba una guía de consulta rápida para hacernos una idea de los métodos y propiedades con los que cuenta cada tipo en JS. También nos puede servir el tema HTML DOM Document Object de w3school.

Los más importantes para acceder al resto de nodos son:
Una diferencia importante entre ellos es si queremos conseguir un único nodo o una lista de nodos (HTML Collection o NodeList)

Merece la pena mencionar una vez más el método write(mensaje), ya utilizado antes, que es una de las formas de producir salidas que podemos apreciar. Pero hay muchos más que nos permiten acceder a la URL, título, codificación, scripts, cookies, formularios, enlaces, imágenes, quién lo cargó (referrer), etc...

Como dijimos antes, hay que tener cuidado con no utilizar métodos que document hereda de Node y que no tiene sentido usar como los atributos o el nodo padre, porque document no tiene valores para ellos.

Element

Cada componente HTML forma un nodo element. Puede contener y ser hijo de otros elementos como vimos antes, pero además puede poseer atributos (Attr) y estilo que no posee document.
  • Para obtener un mapa con todos los atributos que posee un elemento se usa la propiedad element.attributes que devuelve un NamedNodeMap. Los valores se pueden obtener por el índice con item(indice) o por nombre de atributo con getNamedItem("nombre").
  • Para obtener el estilo se usará la propiedad element.style, que nos permitirá leer y establecer cada propiedad CSS. DOM Style es una propiedad de sólo lectura, permite cambiar cada atributo de ella (como backgroundColor por ejemplo) pero no asignar un atributo estilo. Si se quiere manipular el estilo completo, se recomienda hacerlo por su texto CSS usando la propiedad cssText.
  • Podemos acceder al id del elemento con element.id
  • Por útimo es habitual modificar el contenido de un elemento usando su propiedad element.innerHTML que contiene el valor de todo el contenido HTML del elemento. Sin embargo se recomienda modificar el contenido alterando los nodos DOM por rendimiento.
Hay muchos más métodos y propiedades para acceder al tamaño del elemento, posición, eventos, etc... Lo mejor es ir practicando con ellos para conocerlos todos.
Realiza estos ejercicios para practicar:


Práctica js-dom-1

Práctica js-dom-2

Práctica js-dom-3

Práctica js-dom-4

No hay comentarios:

Publicar un comentario

Compárteme

Entradas populares