Traducción de Artículo de Ajax XXI

El valor de los objetos
Ahora que tenés alguna terminología básica en tu haber, es hora de enfocar mas en esos pequeños rectángulos con nombres de elementos y texto adentro. (figura 1). Cada rectángulo es un objeto; ahí es donde el navegador resuelve algunos de esos problemas con el texto. Usando objetos para representar cada parte del documento HTML, se vuelve muy fácil cambiar la organización, aplicar estilos, permitir a JavaScript acceder al documento y mucho mas.
Tipos de Objetos y Propiedades
Cada tipo posible de markup tiene su propio tipo de objeto. Por ejemplo, los elementos en u HTML son representados por un objeto tipo element. El texto en tu documento es representado por un tipo Text, los atributos son representados por tipos Attribute y así con todos.
Entonces el navegador Web no solo tiene la posibilidad de usar un modelo de objetos para representar tu documento --dejando de lado el hecho de que tiene que tratar con texto estático--sino que también puede decir inmediatamente que es algo por su tipo de objeto. El documento HTML es analizado y convertido en un grupo de objetos como el que viste en la figura 1 y luego cosas como paréntesis angulares y secuencia de escape no son mas un problema. Esto hace que el trabajo de navegador, al menos después de que analiza el HTML de la entrada, mucho más simple. La operación para descubrir si algo es un elemento o un atributo y luego determinar que hacer con ese tipo de objeto es simple.
Usando objetos, el navegador Web puede entonces cambiar las propiedades de esos objetos. Por ejemplo, cada elemento tiene un padre y una lista de hijos. Por eso agregar un nuevo elemento o texto hijo es simplemente un asunto de agregar un nuevo hijo a una lista de hijos de un elemento. Esos objetos tiene también una propiedad style, por esto se vuelve fácil cambiar el estilo de un elemento o parte de texto al vuelo. Por ejemplo, podrías cambiar la altura de un div usando JavaScript como este:

someDiv.style.height = "300px";

En otras palabras, los navegadores Web pueden cambiar fácilmente la apariencia y estructura del árbol usando propiedades de objetos como esta. Comparando esto con la calse de cosas complicadas que el navegador tiene que hacer si representa la página como texto internamente; cada cambio de propiedades o estructuras que el navegador reescriba el archivo estático, lo re-analice y lo vuelva a mostrar en la pantalla. Todo esto se vuelve posiblo con objetos.
En este punto, tomate el tiempo de abrir algunos de tus documentos HTML y esquematizarlos como árbol. Así como este parece ser un pedido bastante inusual --especialmente de un artículo que contiene tan poco código -- vas a necesitar familiarizarte con la estructura de esos arboles si querés poder manipularlos.
En el proceso, probablemente te encuentres con otras rarezas. Por ejemplo, consideremos las siguientes situaciones:

• ¿Qué pasa con los atributos?
• ¿Qué pasa con el texto que es interrumpido por elementos, como em y b?
• ¿Y qué pasa con el HTML que no esté estructura do correctamente (como cuando falta la etiqueta de cierre p)

Una vez familiarizado con estos temas, vas a entender algunas de las próximas mucho mejor.
Estricto es algo bueno
Si intentaste el ejercicio que acábo de mencionarte, probablemente encontraste algunos de los problemas potenciales de una vista de árbol en tu markup (si no hiciste el ejercicio, solo toma mi palabra). De hecho, vas a encontrar muchos de ellos en el listing 1 y en la figura 1, empezando por la manera en que el elemento p se interrumpe. Si le preguntás al típico desarrollador Web cual es el contenido del elemento p, la respuesta más común sería, "Bienvenido a una página realmente aburrida" y si comparás esto con la figura 1, vas a ver que esa respuesta --aunque lógica-- no es totalmente correcta.
Resulta que el elemento p tiene tres objetos hijo diferentes y ninguno contiene todo el texto "Bienvenidos a una página realmente aburrida". Vas a encontrar partes de ese texto, como "Bienvenido a una Pagina Web" y "aburrida", pero todo completo. Para entender esto, recuerda que todo en tu markup tiene que ser convertido en un objeto de algún tipo.
Es más, el orden importa! ¿Podes imaginarte como los usuarios responderían a un navegador Web si este muestra el markup correcto, pero en un orden diferente que el que vos le diste en tu HTML? ¿Los párrafos se intercalan entre títulos y cabeceras, aún cuando así no es como vos organizaste tu propio documento? Obviamente, el navegador debe preservar el orden de los elementos y el texto.
En este caso, el elemento p tiene tres partes distintas:

• El texto que va antes del elemento em
• El elemento em mismo
• El texto que va después del elemento em

Si mezclas este orden, podrías aplicar el énfasis en una porción errónea del texto. Para mantener todo esto en orden, el elemento p tiene tres objetos hijos en el orden que esas cosas aparecieron en el HTML del Listing 1. Además, el texto enfatizado "realmente" no es un hijo del elemento p, es un hijo del em que es un hijo de p.
Es muy importante para vos entender este concepto. Aun cuando el texto "realmente" se va a ver probablemente junto con el resto del texto del elemento p, igual es un hijo directo del elemento em. Puede tener formato diferente del resto del p y puede ser movido independientemente del resto del texto.
Para ayudar a consolidar esto en tu mente, trata de diagramar el HTML de los listings 2 y 3, asegurándote de mantener el texto con su padre correcto (a pesar de como el texto se termine viendo en la pantalla).

Listing 2. markup con anidación de elementos levemente difícil.

<html>

<head>

<title> Este es un poquito difícil</title>

</head>
<body>

<h1>Poné<u>mucha</u> atención, OK?

</h1>
<div>
<p>
Este p no es realmente <em>necesario</em>, pero hace la <span id="bold-text">estructura <i> y </i>la organización</span> de la página fácil de mantener
</p>
</div>

</body>
</html>

Listing 3. Anidación de elementos un poco más difícil.

<html><head><title> Este es un poquito difícil</title> </head>
<body>
<div id="main-body">
<div id="contents">
<table>
<tr> <th>Pasos </th> <th>Proceso </th> </th>
<tr> <td>1 </td><td>Descubre el <em>elemento raiz</em>. </td> </tr>
<tr> <td>2 </td><td>Trabajar con la <span id="code">cabecera</span> primero, es normalmente fácil. </td> </tr>
<tr> <td>3 </td><td>Trabajar en el <span id="code">cuerpo</span>. Solo <em>tomate tu tiempo </em>.</td> </tr>
</table>
</div>
<div id="closing">
Este link <em>no</em> está activado, pero si lo estuviera, las respuestas a esto <a href=" answers.html"><img="exercise.gif" /></a>estarían ahí. Pero <em>hacé el ejercicio igual </em>
</div>
</div>
</body>
</html>

Vas a encontrar las respuestas de estos ejercicios en los archivos GIF tricky-solution.gif en figura 2 y trickier-solution.gif en figura 3 al final de este artículo. No las mires hasta que hayas tenido el tiempo de resolverlos vos mismo. Te ayudara a entender como aplicar las reglas estrictamente para organizar el árbol y realmente ayudarte en tu búsqueda de dominar HTML y su estructura de árbol.
¿Qué pasa con los atributos?
¿Te encontraste con algún problema cuando trataste de descubrir que hacer con los atributos? Como mencioné, los atributos tienen su propio tipo de objeto, pero un atributo nos es realmente un hijo del elemento en donde aparece --elementos anidados y texto no están al mismo nivel de un atributo y vas a notar que las respuestas de los ejercicios en los listings 2 y 3 no tiene atributos mostrados.
Los atributos de hecho son almacenados en el modelo de objeto que usan los navegadores, pero son un caso especial. Cada elemento tiene una lista de atributos disponibles, separado de la lista de objetos hijos. Entonces un elemento div podría tener una lista que contenga un atributo llamado "id" y otro llamado "class".
Ten en mente que los atributos de un elemento deben tener nombres únicos; en otras palabras, un elemento no puede tener dos atributos "id" u dos "class". Esto hace que la lista sea muy fácil de mantener y acceder. Como vas a ver en el próximo artículo, podes simplemente llamar a un método como getAttribute("id") para obtener el valor de un atributo por su nombre. Podes también agregar atributos y establecer ( o poner a cero) el valor de un atributo existente con un llamado a método similar.
También vale la pena precisar que el hecho de que los nombres de los atributos sean únicos hace es ta lista diferente de la lista de objetos hijo. Un elemento p puede tener múltiples elementos em dentro de el. entonces la lista de objetos hijo puede contener ítem duplicados. Si bien la lista de hijos y la lista de atributos operan de manera similar, una puede contener duplicados (los hijos de un objeto)y la otra no (los atributos de un elemento objeto). Finalmente, solo los elementos pueden tener atributos, entonces los objetos de texto no tienen listas asociadas a ellos para almacenar atributos.
HTML descuidado
Antes de continuar, un tema nuevo vale la pena un tiempo cuando viene de cómo un navegador convierte el markup en una representación de árbol -- cómo un navegador se encarga del markup que no esta bien armado. Bien armado es en realidad un termino muy usado en XML y significa dos cosas básicas:

• Toda etiqueta de apertura tiene una etiqueta de cierre coincidente. Entonces todo <p> se relaciona en el documento con un </p>, todo <div> con un </div>, y así sucesivamente.
• La etiqueta de apertura más interior hace juego con la etiqueta de cierre mas interior, luego la siguiente etiqueta de apertura más interior con la siguiente etiqueta de cierre mas interior y así sucesivamente. Por eso <b><i>negritas e itálicas </b></i> sería ilegal porque la etiqueta de apertura <i> esta incorrectamente relacionada con la etiqueta de cierra más interior <b>. Para armar bien esto, necesitarías cambiar el orden de las etiquetas de apertura u el orden de las etiquetas de cierre. (si se cambian ambas, mantendrías el problema)

Estudia estas dos reglas atentamente. Ambas son reglas que no solo aumentan la sencilla organización de un documento, sino que también eliminan la ambigüedad. ¿Debería aplicarse negritas primero y luego itálicas? ¿o al revés? Si parece que este orden y ambigüedad no es un gran problema, recuerda que CSS permite a las reglas que sobrescriban otras reglas para, por ejemplo, la fuente del texto entre elementos b sea distinta de la fuente entre elementos i, el orden en el cual el formato sea aplicado se vuelve muy importante. Por lo tanto, el buen formato de una página HTML entra en juego.
En los casos donde un navegador recibe un documento que no esté bien armado, hace simplemente lo mejor que puede. La estructura de árbol resultante es en el mejor de los casos, una aproximación de lo que el autor original de la pagina previó o peor algo completamente diferente. Si cargaste tu pagina en un navegador y viste algo completamente inesperado, puede ser que hayas visto el resultado de un navegador tratando de adivinar que debería ser tu estructura y haciendo el trabajo mal. Por supuesto, la solución a esto es bastante simple: ¡asegurate de que tus documentos estén bien armados! Si no tenés claro como escribir HTML estandarizado como este, consultá los recursos por ayuda.