¿Que es el DOM?

Question

Tengo entendido que es una forma de ver el código mas "profesional", mas jerárquico. ¿Esto quiere decir que debo escribir los documentos de html en un orden especifico, ya que todo influye? Por ejemplo, tuve un problema para mover un nodo tipo elemento(con javascript) debido a que había espacios entre los elementos dentro del documento. Estos espacios antes no me habían influido en mi aprendizaje ya que creía que los espacios no tenían importancia a no ser que se especificaran con alguna etiqueta como por ejemplo los saltos de línea (br).

Si bien tu duda es bastante interesante, me parece que no cumple con los estándares del sitio. Con un vistazo a [Document Object Model](https://en.wikipedia.org/wiki/Document_Object_Model) y a [Whitespace in the DOM](https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Whitespace_in_the_DOM) puedes hacerte una idea de lo que está pasando. — César, Aug 07 '17 at 16:19
En la imagen de [esta respuesta](https://es.stackoverflow.com/a/51961/29967) se representa gráficamente el DOM y además todos los componentes de la ventana (window), de la cual el DOM es sólo una parte, aunque muy importante por supuesto. [Mozilla Developer Network cuenta también con bastante información en castellano](https://developer.mozilla.org/es/docs/Referencia_DOM_de_Gecko/Introducción) sobre el DOM. — A. Cedano, Aug 07 '17 at 16:35
@César Quizás alguien que sepa inglés pueda hacerse a la idea de lo que está pasando con un vistazo a tus dos enlaces. Pero este es un sitio en español. Sin duda las respuestas que pueda recibir esta pregunta serán más útiles para quien no sepa inglés. — Anonymous Coward, Aug 07 '17 at 16:50
@JoseAntonioDuraOlmos quizás, sin embargo eso no quita el hecho de que está pregunta no es apta para el sitio mas allá de mi error en compartir enlaces en inglés o en cualquier idioma. — César, Aug 07 '17 at 16:59

score 3 · Answer 1 · answered Aug 07 '17 at 16:10

El DOM (document object model) es la estructura jerárquica que el navegador genera internamente a partir de tu documento HTML. Su estructura es así:

Documento
    HTML
        Cabecera
            Título; tags meta; etcétera
        Cuerpo
            Contenedores; párrafos; imágenes; etcétera

Los elementos del DOM pueden anidarse indefinidamente: una imagen IMG puede estar dentro de un párrafo P, dentro de un contenedor DIV, dentro de un contenedor ARTICLE, dentro del cuerpo, dentro del HTML, dentro del documento.

Más aún, dentro del DOM puede haber otros DOMs: cuando insertás un iFrame, por ejemplo, se genera un sub-DOM con el contenido de la otra página. Y un elemento VIDEO es en realidad un DOM virtual (shadow DOM) que contiene elementos como los botones de play y pause, o el poster.

Francute · Accepted Answer · 2017-08-07T20:27:37.880

DOM son las siglas en inglés para Document Object Model (en español: Modelo de Objetos del Documento).

Este es un modelo generado por el navegador (Chrome, Firefox, Opera, etc.) a partir de un archivo de texto. Básicamente es la interpretación que le dio el navegador a ese archivo (Normalmente se les agrega la extensión .html, aunque no es necesario).

Un elemento del DOM puede ser una etiqueta <html></html>, o una etiqueta <head></head>, o un <div></div>, o cualquier otra etiqueta. Además, cada etiqueta puede encerrar un contenido. Ese contenido puede ser simplemente un texto <span>texto</span> o incluso otras etiquetas.

<html>
  <head>
    <title>Esto es un título</title>
  </head>
  <body>
    <p>Texto!!</p>
  </body>
</html>

Recordar que este árbol de etiquetas es solamente un archivo de texto, pero cuando el navegador interpreta todo el contenido, puede decidir qué hacer con él. Esa interpretación del archivo (vulgarmente; parseado), es finalmente lo que forma el DOM.

El navegador deja de darle importancia al archivo de texto, y empieza a trabajar directamente sobre el DOM generado. Y decide si agregar o no algún comportamiento o estilo en particular a cada etiqueta. Por ejemplo, estilizar todos los contenidos de las etiquetas p (<p>contenido</p>) con ciertos márgenes. O quizá para el objeto interpretado desde la etiqueta <video> brindar todas las herramientas necesarias para que se pueda reproducir un video dentro de la página en el navegador.

Entonces:

El DOM nace desde la interpretación en memoria que da el navegador al contenido de un archivo de texto. Luego, todas las modificaciones que se hagan sobre el contenido de una página (con JS o CSS), se realizan directamente sobre el DOM y no sobre el archivo.

Esta es la forma en la que se puede interactuar con el navegador. Permitiendo así a JavaScript y CSS que puedan conocer cómo se encuentra formado actualmente el contenido de una página, y el estado en el que se encuentra. (se cargaron ya todas las imágenes, se está enfocando en un campo en específico, etc.).

Además de darles la habilidad para controlar ese contenido. (para cambiar los estilos de ciertos elementos, agregar una clase a un elemento, insertar un nuevo elemento, etc.).

En el siguiente caso, puede parecer que hay algunos elementos que no se encuentran entre ninguna etiqueta particular

<p>texto</p>
Otro texto
<p>     </p>
<p>Mas texto</p>
Y aún más

Sin embargo, hay que recordar que todo ese contenido se encuentra formando parte de otra etiqueta superior; de la etiqueta <body></body>. Al estar dentro del body, los navegadores entienden que ese texto suelto forma parte del contenido de la página e interpretan eso como si fueran cualquier otro elemento.

Ahora; y respondiendo a la otra duda en tu pregunta:

La interpretación sobre estos archivos de texto, ¿es a criterio de cada navegador?

Existen algunas pautas generales. Por ejemplo, para tratar el siguiente archivo:

<html>
  <head></head>
  <body>
    <p>Texto!!</p>
  </body>
</html>

Se especifica que absolutamente todo el contenido, sea tratado como múltiples objetos Nodos.
Cada nodo tiene un conjunto de propiedades (nodeName, onclick, etc.) y relaciones con otros nodos (Padre, hijos, hermanos, ...). Además, existen diferentes tipos.

Primero, se encuentra el nodo #document (DOCUMENT_NODE - Tipo 9). Este nodo es un objeto que representa el contenido de tu archivo (Puede ser html, xhtml, xml, svg, ...). Puedes acceder a él desde JavaScript con la variable document.
Otro tipo de nodo, es el nodo elemento (ELEMENT_NODE - Tipo 1). Estos nodos representan a cada una de las etiquetas en tu archivo. Para ver todos los nodos elemento dentro de un nodo, existen ciertas propiedades.

Usando como ejemplo el archivo recién definido:

document.children; // Array de "nodos elementos" hijos => [html]

let html = document.firstElementChild; // Primer "nodo elemento" => <html>...</html>
html.children; // => [head, body]

let body = html.lastElementChild; // Último "nodo elemento" => <body>...</body>
body.children; // => [p]
body.parentElement; // "nodo elemento" padre => <html>...</html>

html.parentElement; // => null // ya que #document no es un "nodo elemento"
html.parentNode; // nodo padre => #document

Luego, otro tipo de nodo, es el nodo Texto (TEXT_NODE - Tipo 3). Estos nodos representan todos los caracteres contenidos en un nodo elemento, exceptuando los nodos que se puedan incluir.

Continuando con el ejemplo:

document.childNodes; // Array de nodos hijos => [html]

let elementoP = body.firstElementChild; // => <p>...</p>
elementoP.children; // No tiene "nodos elementos" hijos => []
elementoP.childNodes; // Pero si tiene nodos hijos => [text]

elementoP.firstChild.nodeValue; // Contenido del nodo texto => "Texto!!"

html.children;   // => [head, body]
html.childNodes; // => [head, text, body] // text!!!

Apareció un nodo texto como hijo de mi etiqueta html. ¿Por qué?
Con la propiedad innerHTML se puede ver el contenido de la etiqueta html que viene del archivo.

JSON.stringify(html.innerHTML); // => "<head></head>\n    <body>...</body>"

Hice trampa acá, y usé la función JSON.stringify(); para mostrar los caracteres salto de línea (\n).
Entonces al interpretar esa cadena, <head></head> es un nodo elemento, "\n " es un nodo texto (las comillas solo para que se muestren los espacios acá en SO), y <body>...</body> es otro nodo elemento.

html.childNodes; // => [head, text, body] // Recordar que es un Array

let nodoTexto = html.childNodes[1]; // nodo texto => #text
JSON.stringify(nodoTexto.nodeValue); // texto => "\n    "

Ahora, ¿cómo interpreta estos nodos textos el navegador?

Simplemente decide tratar los saltos de línea como si fueran espacios.
Y los espacios, directamente se ignoran, salvo que se encuentren entre una palabra. En ese último caso, siempre que hayan 2 o más espacios consecutivos, decide interpretarlos como si fuera 1 solo.

Entonces:

<p>TE
X        TO   </p>

Se mostrará en pantalla solamente como TE X TO.

Por lo tanto, esos espacios no tienen importancia en cuanto a la vista de la página. Pero SÍ, existen, y forman parte del DOM como nodos textos.

Otra forma de entender la diferencia entre el DOM y un archivo, es viéndolo con el siguiente ejemplo en JavaScript. Se puede tener el siguiente texto {"a": 2}. Pero cuando se ejecuta:

let texto = '{"a": 2}';
let objeto = JSON.parse(texto); // => Object {a: 2}
objeto.a; // => 2

El texto deja de ser solo un texto, y se convierte en un objeto para JavaScript.
Lo mismo ocurre con el texto que lee un navegador desde un archivo.

¿Que es el DOM?

2 Answers2

La interpretación sobre estos archivos de texto, ¿es a criterio de cada navegador?