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
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:- Padre (parent): todos los nodos tienen sólo un padre excepto el raíz que no tiene porque es el nodo superior. Ver propiedades parentNode y parentElement.
- Hijo (child): Un nodo puede tener un número indeterminado de hijos (hasChildNodes()). Ver propiedades childNodes, children, firstChild y lastChild.
- Hermano (sibling): Son nodos con el mismo padre. Ver propiedades nextSibling, previousSibling, nextElementSibling y previousElementSibling.
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:
- 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.
- 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).
- 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).
//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);
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:
- getElementById(id) devuelve el elemento con el citado "id" (sólo un elemento pues el id deber ser único)
- getElementsByClassName(nombreDeClase), getElementsByName(nombre) y getElementsByTagName(etiqueta) devuelven una lista de nodos que cumplen la condición correspondiente (class, name o tag)
- querySelector(selectorCSS) devuelve el primer elemento que coincida con el selector
- querySelectorAll(selectorCSS) devuelve todos los que coincidan
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.
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
Muy buena tu pagina :)
ResponderEliminarMe alegro de que te guste. Por cariño que le echo mientras la hago no será. Gracias por tu comentario!
Eliminar