El modelo de objetos de documento (DOM)

DOM son las siglas de Document Object Model, una representación de un documento HTML en nodos y objetos. Los navegadores exponen una API que puede utilizar para interactuar con el DOM. Así es como funcionan los marcos de JavaScript modernos: utilizan la API DOM para indicarle al navegador qué mostrar en la página.

El DOM es la representación interna del navegador de una página web. Cuando el navegador recupera su HTML de su servidor, el analizador analiza la estructura de su código y crea un modelo del mismo. Según este modelo, el navegador muestra la página en la pantalla.

Los navegadores exponen una API que puede utilizar para interactuar con el DOM. Así es como funcionan los marcos de JavaScript modernos: utilizan la API DOM para indicarle al navegador qué mostrar en la página.

En las aplicaciones de una sola página, el DOM cambia continuamente para reflejar lo que aparece en la pantalla y, como desarrollador, puede inspeccionarlo usando elHerramientas para desarrolladores de navegadores.

El DOM es independiente del idioma, y el estándar de facto para acceder al DOM es mediante el uso deJavaScript, ya que es el único idioma que pueden ejecutar los navegadores.

El DOM está estandarizado por WHATWG en elEspecificaciones del estándar de vida DOM.

Con JavaScript puede interactuar con el DOM para:

  • inspeccionar la estructura de la página
  • acceder a los metadatos y encabezados de la página
  • editar el estilo CSS
  • adjuntar o eliminar detectores de eventos
  • editar cualquier nodo de la página
  • cambiar cualquier atributo de nodo

.. y mucho más.

Los 2 objetos principales proporcionados por la API DOM con los que interactuarás más sondocumentywindow.

El objeto Window

loswindowobjeto representa la ventana que contiene el documento DOM.

window.documentapunta aldocumentobjeto cargado en la ventana.

Las propiedades y métodos de este objeto se pueden llamar sin hacer referenciawindowexplícitamente, porque representa el objeto global. Entonces, la propiedad anteriorwindow.documentgeneralmente se llama simplementedocument.

Propiedades

Aquí hay una lista de propiedades útiles a las que probablemente hará referencia mucho:

  • consoleapunta a la consola de depuración del navegador. Útil para imprimir mensajes de error o registro, usandoconsole.log,console.errory otras herramientas (ver elHerramientas de desarrollo del navegadorartículo)
  • documentcomo ya se dijo, apunta aldocumentobjeto, clave para las interacciones DOM que realizará
  • historyda acceso a laAPI de historial
  • locationda acceso a laInterfaz de ubicación, a partir del cual puede determinar la URL, el protocolo, el hash y otra información útil.
  • localStoragees una referencia a laAPI de almacenamiento webobjeto localStorage
  • sessionStoragees una referencia al objeto sessionStorage de la API de almacenamiento web

Métodos

loswindowEl objeto también expone métodos útiles:

  • alert(): que puede utilizar para mostrar cuadros de diálogo de alerta
  • postMessage(): utilizado por elAPI de mensajería de canal
  • requestAnimationFrame(): utilizado para realizar animaciones de una manera que sea a la vez eficaz y fácil para la CPU
  • setInterval(): llamar a una función cada n milisegundos, hasta que el intervalo se borre conclearInterval()
  • clearInterval(): borra un intervalo creado consetInterval()
  • setTimeout(): ejecuta una función después de 'n' milisegundos
  • setImmediate(): ejecuta una función tan pronto como el navegador esté listo
  • addEventListener(): agrega un detector de eventos al documento
  • removeEventListener(): eliminar un detector de eventos del documento

Vea la referencia completa de todas las propiedades y métodos delwindowobjeto enhttps://developer.mozilla.org/en-US/docs/Web/API/Window

El objeto Documento

losdocumentobjeto representa el árbol DOM cargado en una ventana.

Aquí hay una representación de una parte del DOM que apunta a las etiquetas de cabeza y cuerpo:

DOM, the body and head tags

Aquí hay una representación de una parte del DOM que muestra la etiqueta principal, que contiene una etiqueta de título con su valor:

DOM, the head tag with the title

Aquí hay una representación de una parte del DOM que muestra la etiqueta del cuerpo, que contiene un enlace, con un valor y el atributo href con su valor:

DOM, the body tag with a link

Se puede acceder al objeto Documento desdewindow.document, y desdewindowes el objeto global, puedes usar el atajodocumentobjeto directamente desde la consola del navegador o en su código JavaScript.

Este objeto Document tiene un montón de propiedades y métodos. losAPI de selectoresLos métodos son los que probablemente usará más:

  • document.getElementById()
  • document.querySelector()
  • document.querySelectorAll()
  • document.getElementsByTagName()
  • document.getElementsByClassName()

Puede obtener el título del documento usandodocument.titley la URL que usadocument.URL. El referente está disponible endocument.referrer, el dominio endocument.domain.

Desde eldocumentobjeto puedes conseguir el cuerpo y la cabezaNodos de elementos:

  • document.documentElement: el nodo Documento
  • document.body: labodyNodo de elemento
  • document.head: laheadNodo de elemento

The DOM nodes

También puede obtener una lista de todos los nodos de elementos de un tipo particular, como unColección HTMLCde todos los enlaces que utilizandocument.links, todas las imágenes usandodocument.images, todas las formas usandodocument.forms.

El documentogalletasson accesibles endocument.cookie. La última fecha de modificación endocument.lastModified.

Puedes hacer mucho más, incluso conseguirvieja escuelay llena tus scripts condocument.write(), un método que se utilizó mucho en los primeros días de JavaScript para interactuar con las páginas.

Vea la referencia completa de todas las propiedades y métodos deldocumentobjeto enhttps://developer.mozilla.org/en-US/docs/Web/API/Document

Tipos de nodos

Hay diferentes tipos de nodos, algunos de los cuales ya ha visto en las imágenes de ejemplo anteriores. Los principales que encontrarás son:

  • Documento: el documento Nodo, el inicio del árbol
  • Elemento: una etiqueta HTML
  • Attr: un atributo de una etiqueta
  • Texto: el contenido de texto de un elemento o nodo de atributo
  • Comentario: un comentario HTML
  • Tipo de Documento: laDoctypedeclaración

Atravesando el DOM

El DOM es un árbol de elementos, con el nodo Documento en la raíz, que apunta alhtmlNodo de elemento, que a su vez apunta a sus nodos de elemento hijoheadybody, etcétera.

Desde cada uno de esos elementos, puede navegar por la estructura DOM y moverse a diferentes nodos.

Conseguir al padre

Cada elemento tienesolo unopadre.

Para conseguirlo, puedes usarNode.parentNodeoNode.parentElement(donde Nodo significa un nodo en el DOM).

Son casi iguales, excepto cuando se ejecutan en elhtmlelemento:parentNodedevuelve el padre del nodo especificado en el árbol DOM, mientras queparentElementdevuelve el elemento padre del nodo DOM, o nulo si el nodo no tiene padre o su padre no es un elemento DOM.

La gente suele usarparentNode.

Conseguir a los niños

Para comprobar si un nodo tiene nodos secundarios, utiliceNode.hasChildNodes()que devuelve un valor booleano.

Para acceder a todos los nodos de elementos secundarios de un nodo, utiliceNode.childNodes.

El DOM también expone unNode.childrenmétodo. Sin embargo, no solo incluye nodos de elementos, sino también el espacio en blanco entre elementos como nodos de texto. Esto no es algo que generalmente desee.

Get the children of a node

Para obtener el primer nodo de elemento secundario, useNode.firstElementChild. Para obtener el último nodo elemento secundario, useNode.lastElementChild:

To get the first or last child Element Node

El DOM también exponeNode.firstChildyNode.lastChild, con la diferencia de que no "filtran" el árbol solo para los nodos de Elemento. También mostrarán nodos de texto vacíos que indican espacios en blanco.

En resumen, para navegar por los niños, use Element Nodes

  • Node.childNodes
  • Node.firstElementChild
  • Node.lastElementChild

Conseguir a los hermanos

Además de obtener el padre y los hijos, dado que el DOM es un árbol, también puede obtener los hermanos de cualquier nodo de elemento.

Puedes hacerlo usando

  • Node.previousElementSibling
  • Node.nextElementSibling

El DOM también exponepreviousSiblingynextSibling, pero como sus contrapartes descritas anteriormente, incluyen espacios en blanco como nodos de texto, por lo que generalmente los evita.

Editando el DOM

El DOM ofrece varios métodos para editar los nodos de la página y alterar el árbol del documento.

Con

  • document.createElement(): crea un nuevo nodo de elemento
  • document.createTextNode(): crea un nuevo nodo de texto

puede crear nuevos elementos y agregarlos a los elementos DOM que desee como hijos, utilizandodocument.appendChild():

const div = document.createElement('div')
div.appendChild(document.createTextNode('Hello world!'))
  • first.removeChild(second)elimina el nodo hijo "segundo" del nodo "primero".
  • document.insertBefore(newNode, existingNode)inserta "newNode" como hermano de "existingNode", colocándolo antes que en la estructura del árbol DOM.
  • element.appendChild(newChild)altera el árbol debajo de "elemento", agregando un nuevo nodo hijo "newChild", después de todos los demás hijos.
  • element.prepend(newChild)altera el árbol bajo "elemento", agregando un nuevo nodo secundario "newChild", antes de otros elementos secundarios. Puede pasar uno o más nodos secundarios, o incluso una cadena que se interpretará como un nodo de texto.
  • element.replaceChild(newChild, existingChild)altera el árbol debajo de "elemento", reemplazando "existingChild" con un nuevo Nodo "newChild".
  • element.insertAdjacentElement(position, newElement)inserta "newElement" en el DOM, posicionado relativamente a "element" dependiendo del valor del parámetro "position".Ver los posibles valores.
  • element.textContent = 'something'cambia el contenido de un nodo de texto a "algo".

Más tutoriales de navegador:


Tech Wiki en línea!