Original article: What’s the Document Object Model, and why you should know how to use it.
Si has estudiado HTML, creaste tus primeras etiquetas, aprendiste sobre CSS, creaste hermosos formularios, botones increíbles, páginas receptivas y comenzaste a mostrarles a todos lo increíble que era todo eso.
Y ahora decides que quieres dar un paso más en tu aprendizaje y empiezas a preguntarte: “¿Cómo puedo agregar animación a mi página? ¡Ojalá ese botón hiciera alguna animación en mi página cuando haces clic en él!”
Bueno, ahí es donde viene el DOM para resolver tu problema. Probablemente, hayas escuchado mucho al respecto, pero es posible que aún no sepas qué es y qué problemas resuelve. Así que profundicemos.
Entonces, ¿qué es el DOM?
¿Conoces todas esas animaciones geniales que ves a tu alrededor, que te hacen pensar: "Vaya, me gustaría poder hacer algo así"? Todas esas animaciones se realizan manipulando el DOM. Ahora te explicaré cómo comenzar a manipularlo y hacer que tus sitios web se vean geniales.
El DOM (Modelo de Objetos del Documento, por sus siglas en inglés: Document Object Model) es una interfaz que representa cómo el navegador lee tus documentos HTML y XML. Permite que un lenguaje (JavaScript) manipule, estructure y estilice tu sitio web. Una vez que el navegador lee tu documento HTML, crea un árbol de representación llamado Modelo de Objetos del Documento y define cómo se puede acceder a ese árbol.
Ventajas
Manipulando el DOM, tienes infinitas posibilidades. Puedes crear aplicaciones que actualicen los datos de la página sin necesidad de actualizar. Además, puedes crear aplicaciones personalizables por el usuario y luego cambiar el diseño de la página sin actualizar. Puedes arrastrar, mover y eliminar elementos.
Como dije, tienes infinitas posibilidades, solo necesitas usar tu creatividad.
Representación por el navegador
En la imagen de arriba, podemos ver el árbol de representación y cómo lo crea el navegador. En este ejemplo, tenemos cuatro elementos importantes que verás mucho:
- Documento: Trata todos los documentos HTML.
- Elementos: Todas las etiquetas que están dentro de tu HTML o XML se convierten en un elemento DOM.
- Texto: Todo el contenido de las etiquetas.
- Atributos: Todos los atributos de un elemento HTML específico. En la imagen, el atributo class=”hero” es un atributo del elemento < p>.
Manipulando el DOM
Ahora estamos llegando a la mejor parte: Comenzar a manipular el DOM. Primero, vamos a crear un elemento HTML como ejemplo para ver algunos métodos y cómo funcionan los eventos.
<!DOCTYPE html> <html lang="pt-br"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Entendiendo el DOM (Document Object Model)</title> </head> <body> <div class="container"> <h1><time>00:00:00</time></h1> <button id="start">Start</button> <button id="stop">Stop</button> <button id="reset">Reset</button> </div> </body> </html>Muy sencillo, ¿verdad? Ahora vamos a aprender más sobre los métodos DOM: cómo obtener nuestros elementos y comenzar a manipularlos.
Métodos
El DOM tiene muchos métodos. Son la conexión entre nuestros nodos (elementos) y eventos, algo de lo que aprenderemos más adelante. Te mostraré algunos de los métodos más importantes y cómo se usan. Hay muchos más métodos que no voy a mostrarte aquí, pero puedes verlos todos aquí.
getElementById()
Este método devuelve el elemento que contiene el ID de nombre pasado. Como sabemos, las identificaciones deben ser únicas, por lo que es un método muy útil para obtener solo el elemento que desea.
var myStart = document.getElementsById('start');myStart : Nuestro nombre de variable que se parece a nuestra identificación pasada.
start : id pasado. Y en caso de que no tengamos ningún id con ese nombre en concreto, devuelve nulo.
getElementsByClassName()
Este método devuelve una colección HTML de todos los elementos que contienen la clase de nombre específico pasado.
var myContainer = document.getElementsByClassName('container');myContainer: Nuestro nombre de variable que se parece a nuestra clase pasada.
.container: Nuestra clase pasada. En caso de que no tengamos ninguna clase con ese nombre en concreto, devuelve nulo.
getElementsByTagName()
Esto funciona de la misma manera que los métodos anteriores: También devuelve una colección HTML, pero esta vez con una sola diferencia: Devuelve todos esos elementos con el nombre de la etiqueta pasado.
var buttons = document.getElementsByTagName('button');buttons: Nuestro nombre de variable que se parece a nuestro nombre de etiqueta pasado.
button: nombre de la etiqueta que queremos obtener.
querySelector()
Devuelve el primer elemento que tiene el selector CSS específico pasado. Solo recuerda que el selector debe seguir la sintaxis CSS. En caso de no tener ningún selector , devuelve nulo.
var resetButton = document.querySelector('#reset');resetButton: Nuestro nombre de variable que se parece a nuestro selector pasado.
#reset: el selector pasado, y si no tiene ningún selector que coincida, devuelve nulo.
querySelectorAll()
Muy similar al método querySelector(), pero con una única diferencia: devuelve todos los elementos que coinciden con el selector CSS pasado. El selector también debe seguir la sintaxis CSS. En caso de no tener ningún selector, devuelve nulo.
var myButtons = document.querySelector('#buttons');myButtons: Nuestro nombre de variable que se parece a nuestro selector pasados.
#botones: selector pasado, si no tiene ningún selector que coincida, devuelve nulo.
Estos son algunos de los métodos DOM más utilizados. Hay varios métodos más que puedes usar, como createElement(), que crea un nuevo elemento en tu página HTML, y setAttribute() que te permite establecer nuevos atributos para elementos HTML. Puedes explorarlos por tu cuenta.
Nuevamente, puedes encontrar todos los métodos aquí, en el lado izquierdo, en Métodos . Realmente te recomiendo que eches un vistazo a algunos de los otros porque es posible que pronto necesites alguno de ellos.
Ahora, vamos a aprender acerca de los eventos; después de todo, sin ellos no podemos hacer animaciones en nuestras páginas.
Eventos
Los elementos DOM tienen métodos, como acabamos de comentar, pero también tienen eventos. Estos eventos son los encargados de hacer posible la interactividad en nuestra página. Pero aquí hay una cosa que quizás no sepas: los eventos también son métodos.
myStart.addEventListener('click', function(event) {Click
Uno de los eventos más utilizados es el evento click. Cuando el usuario hace clic en un elemento específico, realizará alguna acción.
// Haz algo aquí.}, false);Los parámetros de addEventListener() son:
- El tipo de evento que quieras (en este caso ' click ').
- Una función callback (de devolución de llamada)
- El useCapture por defecto es falso. Indica si quieres o no “capturar” el evento.
select
Este evento es para cuando quieres enviar (dispatch) algo cuando se selecciona un elemento específico. En ese caso , enviaremos una alerta simple .
myStart.addEventListener('select', function(event) {alert('Element selected!');}, false);Estos son algunos de los eventos más utilizados. Por supuesto, tenemos muchos otros eventos que puedes usar, como eventos de arrastrar y soltar: cuando un usuario comienza a arrastrar algún elemento, puede realizar alguna acción, y cuando suelta ese elemento, puedes realizar otra acción.
Ahora, veremos cómo podemos recorrer el DOM y usar algunas propiedades.
Recorriendo el DOM
Puedes recorrer el DOM y usar algunas propiedades que veremos ahora. Con estas propiedades, puedes devolver elementos, comentarios, texto, etc.
.childNodes
Esta propiedad devuelve una lista de nodos secundarios del elemento dado. Devuelve texto, comentarios, etc. Cuando quieras usarlo, debes tener cuidado.
var container = document.querySelector('.container');var getContainerChilds = container.childNodes;.firstChild
Esta propiedad devuelve el primer hijo del elemento dado.
var container = document.querySelector('.container');var getFirstChild = container.firstChild;.nodeName
Esta propiedad devuelve el nombre del elemento dado. En este caso, pasamos un div , por lo que devolverá " div ".
var container = document.querySelector('.container');var getName = container.nodeName;.nodeValue
Esta propiedad es específica para textos y comentarios , ya que devuelve o establece el valor del nodo actual . En este caso, dado que pasamos un div, devolverá nulo .
var container = document.querySelector('.container')var getValue = container.nodeValue;.nodeType
Esta propiedad devuelve el tipo del elemento dado. En este caso, devuelve “ 1 ”.
var container = document.querySelector('.container')var getValue = container.nodeType;Pero, ¿qué significa " 1 " de todos modos? Es básicamente el tipo de nodo del elemento dado. En este caso, es un _ELEMENT_NODE_ y devuelve nulo. Si esto fuera un atributo, nos sería devuelto como " 2 " y el valor del atributo.
Puede leer más sobre los tipos de nodos aquí.
Elements
Estas propiedades, en lugar de las anteriores, nos devuelven solo elementos. Se usan y recomiendan con más frecuencia porque pueden causar menos confusión y son más fáciles de entender.
.parentNode
Esta propiedad devuelve el padre del nodo dado.
var container = document.querySelector('.container')var getParent = container.parentNode;.firstElementChild
Devuelve el primer elemento secundario del elemento dado.
var container = document.querySelector('.container')var getValue = container.firstElementChild;.lastElementChild
Devuelve el último elemento secundario del elemento dado.
var container = document.querySelector('.container')var getValue = container.lastElementChild;Estas son algunas de las muchas propiedades que tiene el DOM. Es muy importante que conozcas los conceptos básicos sobre el DOM, cómo funciona, sus métodos y propiedades, porque algún día puedes necesitarlo.
Conclusión
El DOM nos proporciona varias API importantes para crear aplicaciones fantásticas e innovadoras. Si entiendes los conceptos básicos, puedes crear cosas increíbles. Si deseas leer más sobre el DOM, puedes hacer clic aquí y leer todos los documentos de MDN.
¡Sígueme en Twitter!
⭐ ¡ Sígueme en GitHub!
Estoy buscando una oportunidad remota, si puedes darme alguna, me encantaría saber sobre ella, ¡así que contáctame!