¿Qué es el modelo de objetos de documento y por qué debería saber cómo usarlo?

Programación

Entonces, estudió HTML, creó sus primeras etiquetas, aprendió sobre CSS, creó formularios hermosos, botones increíbles, páginas receptivas y comenzó a mostrar a todos lo increíble que fue todo eso.

Pero luego decides que quieres dar otro paso en tu aprendizaje y te has preguntado: “¿Cómo puedo agregar animación a mi página? ¡Ojalá ese botón hiciera algo de animación en mi página cuando hice clic en él! "

Bueno, ahí es donde viene el DOM para resolver tu problema. Probablemente haya escuchado mucho sobre él, pero es posible que aún no sepa 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, "Wow, me gustaría poder hacer algo así"? Todas esas animaciones se realizan manipulando el DOM. Ahora te explicaré cómo empezar a manipularlo y hacer que tus sitios web se vean más geniales.

El DOM (Document Object Model) es una interfaz que representa cómo el navegador lee sus documentos HTML y XML. Permite a un lenguaje (JavaScript) manipular, estructurar y diseñar su sitio web. Una vez que el navegador lee su documento HTML, crea un árbol de representación llamado Modelo de objetos de documento y define cómo se puede acceder a ese árbol.

Ventajas

Al manipular el DOM, tienes infinitas posibilidades. Puede crear aplicaciones que actualicen los datos de la página sin necesidad de actualizar. Además, puede crear aplicaciones que el usuario puede personalizar y luego cambiar el diseño de la página sin una actualización. Puede 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á mucho:

  1. Documento : trata todos los documentos HTML .
  2. Elementos : todas las etiquetas que están dentro de su HTML o XML se convierten en un elemento DOM.
  3. Texto : todo el contenido de las etiquetas.
  4. 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 llegamos a la mejor parte: empezar a manipular el DOM. Primero, crearemos un elemento HTML como ejemplo para ver algunos métodos y cómo funcionan los eventos.

      Entendendo o DOM (Document Object Model) 
00:00:00
 Start Stop Reset

Muy simple, ¿verdad? Ahora vamos a aprender más sobre los métodos DOM: cómo obtener nuestros elementos y comenzar a manipular.

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. Les mostraré algunos de los métodos más importantes y cómo se utilizan. Hay muchos más métodos que no les voy a mostrar aquí, pero pueden 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 : el nombre de nuestra variable que se parece a nuestra identificación pasada.

inicio : id pasado. Y en caso de que no tengamos ninguna identificación con ese nombre específico, devuelve nulo .

getElementsByClassName ()

Este método devuelve una colección HTMLC de todos los elementos que contienen la clase de nombre específica pasada.

var myContainer = document.getElementsByClassName('container');

myContainer : Nuestro nombre de variable que se parece a nuestra clase pasada.

.contenedor : nuestra clase pasó. En caso de que no tengamos ninguna clase con ese nombre específico, devuelve nulo .

getElementsByTagName ()

Esto funciona de la misma manera que los métodos anteriores: también devuelve una HTMLCollection, pero esta vez con una única diferencia: devuelve todos esos elementos con el nombre de etiqueta pasado.

var buttons = document.getElementsByTagName('button');

botones : 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 al que se le ha pasado el selector de CSS específico . Solo recuerde que el selector debe seguir la sintaxis CSS . En caso de que no tenga ningún selector , devuelve nulo .

var resetButton = document.querySelector('#reset');

resetButton : Nuestro nombre de variable que se parece a nuestro selector pasado.

#reset : selector pasado, y si no tiene ningún selector que coincida, devuelve null .

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 que no tenga ningún selector , devuelve nulo .

var myButtons = document.querySelector('#buttons');

myButtons : El nombre de nuestra variable que se parece a nuestros selectores pasados.

#buttons : 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 puede utilizar, como createElement (), que crea un nuevo elemento en su página HTML, y setAttribute () que le permite establecer nuevos atributos para elementos HTML. Puedes explorarlos por tu cuenta.

Nuevamente, puede 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 necesites uno pronto.

Ahora, vamos a aprender sobre 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 hay algo que quizás no sepa: los eventos también son métodos .

hacer clic

Uno de los eventos más utilizados es el evento de clic. Cuando el usuario haga clic en un elemento específico, realizará alguna acción.

myStart.addEventListener('click', function(event) {
// Do something here.
}, false);

Los parámetros addEventListener () son:

  1. El tipo de evento que desea (en este caso, ' clic ').
  2. Una función de devolución de llamada
  3. El useCapture por defecto es falso. Indica si desea "capturar" el evento o no.

Seleccione

Este evento es para cuando desea enviar algo cuando se selecciona un elemento específico. En ese caso vamos a enviar un simple alerta .

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 puede 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, puede realizar otra acción.

Ahora, veremos cómo podemos atravesar el DOM y usar algunas propiedades.

Atravesando el DOM

Puede atravesar el DOM y usar algunas propiedades que veremos ahora. Con estas propiedades, puede devolver elementos, comentarios, texto, etc.

.childNodes

Esta propiedad devuelve una lista de nodos de los nodos secundarios del elemento dado. Devuelve texto, comentarios, etc. Por lo tanto, cuando quiera usarlo, debe tener cuidado.

var container = document.querySelector('.container');
var getContainerChilds = container.childNodes;

.primer hijo

Esta propiedad devuelve el primer hijo del elemento dado.

var container = document.querySelector('.container');
var getFirstChild = container.firstChild;

.nombre del nodo

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 nodeType del elemento dado. En este caso, es un _ELEMENT_NODE_ y devuelve nulo. Si fuera un atributo, se nos devolvería como " 2 " y el valor del atributo.

Puede leer más sobre nodeTypes aquí.

Elementos

Estas propiedades, en lugar de las anteriores, nos devuelven solo elementos . Se utilizan 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 hijo del elemento dado.

var container = document.querySelector('.container')
var getValue = container.firstElementChild;

.lastElementChild

Devuelve el último elemento hijo del elemento dado.

var container = document.querySelector('.container')
var getValue = container.lastElementChild;

Estas son algunas de las muchas propiedades que tiene DOM. Es muy importante que conozca los conceptos básicos sobre DOM, cómo funciona y sus métodos y propiedades, porque algún día puede que lo necesite.

Conclusión

El DOM nos proporciona varias API importantes para crear aplicaciones fantásticas e innovadoras. Si comprende lo básico, puede crear cosas increíbles. Si desea leer más sobre DOM, puede hacer clic aquí y leer todos los documentos de MDN.

? ¡ Sígueme en Twitter!

⭐ F iga mí en GitHub!

Estoy buscando una oportunidad remota, así que si tengo alguna, me encantaría escucharla, ¡así que contácteme!