HTML - ¿Qué es el DOM y porqué debería interesarme?

Uhhhh el DOM, ¿de qué está compuesto?, ¿es comestible?, ¿en que puede ayudarnos?, ¿es comestible?, ¿acaso tengo hambre y por eso sigo preguntando si es comestible?. Bueno, todo esto lo escribiré en este post.

El DOM (Document Object Model) proveé una representación estructurada del documento HTML y define una manera de poder acceder a esta estructura de tal manera que se pueda modificar facilmente tanto la estructura, los estilos y los contenidos. Es una representación completamente orientada a objetos de una página web.

Ahora respondiendo a las preguntas que nos hicimos siempre:

¿Es comestible?
- Para este momento ya debería estar claro, no, no lo es.

¿De qué está compuesto?
- Esta compuesto de cada elemento de tú página web, de hecho, incluso en caso de que tu documento no esté estructurado de manera correcta, se corrige mágicamente en el DOM. Además, es necesario tener en cuenta que distintos navegadores implementan de distinta manera su implementación del DOM.

Por ejemplo, la siguiente tabla con un pequeño error, se corrige en el DOM.

<table>
  <tbody>
    <tr>
      <td>Contenido</td>
    </tr>
</table>

El dom agrega la etiqueta de cierre del tbody

¿En que puede ayudarnos?
- Pues nos facilitá el acceso a los elementos de una página web, usualmente se puede manipular con javascript. Por ejemplo el siguiente código obtiene todos los tags td de la tabla.

document.getElementsByTagName("td")

Es útil conocer el DOM en caso de estar haciedo diseño de interfaces. Un buen ejemplo es la siguiente imagen.

En la parte inferior se puede observar una representación del DOM

Y eso es todo por ahora, keep coding >_<