Como ocurre con los archivos externos de HTML, la organización del marcado está separada de su estilo, formato y comportamiento. Si bien ciertamente puedes cambiar el estilo de los elementos o del texto con JavaScript, es más interesante cambiar la organización de cómo se presenta tu marcado.
Sólo recuerda que tu marcado sólo proporciona organización, un marco y estarás en el camino hacia el éxito. Da un pequeño paso más y verás cómo el navegador toma toda esa organización del texto y la convierte en algo súper interesante, un conjunto de objetos, cada uno de los cuales se puede cambiar, agregar o eliminar.
Ventajas del marcado de texto
Antes de hablar de los navegadores web, vale la pena considerar por qué el texto sin formato es la mejor opción para almacenar HTML (consulte algunas otras ideas sobre el marcado para obtener más información). Independientemente de los pros y los contras, recuerde que HTML se envía a través de la red al navegador web cada vez que se visita una página (por brevedad, no se tienen en cuenta los cachés, etc.). Realmente no existe una forma más eficiente de entregar texto. Objetos binarios, representaciones gráficas de páginas, bloques de marcado reorganizados, etc., todos los cuales son más difíciles de transmitir a través de la red que los archivos de texto plano.
Además, el navegador también se suma a la gloria. Los navegadores actuales permiten a los usuarios cambiar el tamaño del texto, escalar imágenes, descargar el CSS o JavaScript de la página (en la mayoría de los casos) y más, lo que excluye por completo el envío de cualquier tipo de representación gráfica de la página al navegador. Sin embargo, el navegador necesita el HTML sin formato para poder aplicar cualquier procesamiento a la página en el navegador, en lugar de confiar en que el navegador se encargue de esa tarea. Del mismo modo, separar CSS de JavaScript y CSS de HTML requiere un formato que se pueda separar fácilmente. Una vez más, los archivos de texto son el mejor método para esta tarea.
Por último, pero no menos importante, recuerde que los nuevos estándares (como HTML 4.01 y XHTML 1.0 y 1.1) prometen separar el contenido (los datos de la página) de la presentación y el estilo (normalmente aplicado mediante CSS). Si los programadores separaran HTML de CSS y luego obligaran al navegador a recuperar alguna representación de la página que une las distintas partes de la página, perderían la mayoría de los beneficios de estos estándares. Mantener estas partes separadas cuando llegan al navegador le da al navegador una flexibilidad sin precedentes para obtener HTML del servidor.
Pensamientos adicionales sobre
la edición de texto sin formato con marcado: ¿correcto o incorrecto?
El texto sin formato es ideal para almacenar marcas, pero no es adecuado para editarlas. Popular es el uso de IDE, como Macromedia DreamWeaver o el más potente Microsoft® FrontPage®, para manipular el marcado de páginas web. Estos entornos suelen proporcionar accesos directos y ayuda para crear páginas web, especialmente cuando se utiliza CSS y JavaScript, los cuales provienen de archivos distintos del marcado de página real. No importa que mucha gente todavía prefiera el viejo Bloc de notas o vi (admito que soy uno de ellos). De cualquier manera, el resultado final es un archivo de texto lleno de marcas.
Texto en la Web: Lo bueno
ya se ha dicho, el texto es el mejor medio para que documentos, como HTML o CSS, se transmitan miles de veces a través de la Web. Cuando digo que es difícil para un navegador representar texto, me refiero específicamente a convertir texto en una página gráfica visual para que la vea el usuario. Esto no tiene nada que ver con cómo el navegador recupera realmente la página del navegador web; en este caso, el texto sigue siendo la mejor opción.
Desventajas del marcado de texto
Así como el marcado de texto tiene ventajas sorprendentes para los diseñadores y creadores de páginas, también tiene desventajas bastante sorprendentes para los navegadores. Específicamente, es difícil para los navegadores representar visualmente el marcado de texto directamente al usuario (consulte algunas otras ideas sobre el marcado para obtener más detalles). Considere las siguientes tareas comunes del navegador:
·Aplicar estilos CSS (normalmente de múltiples hojas de estilo en archivos externos) al marcado según el tipo de elemento, clase, ID y su posición en el documento HTML.
·Aplicar estilos y formatos a diferentes partes del documento HTML basándose en código JavaScript (generalmente ubicado en un archivo externo).
·Cambiar los valores de los campos del formulario según el código JavaScript.
·Basado en código JavaScript, admite efectos visuales como voltear e intercambiar imágenes.
La complejidad no reside en codificar estas tareas; todo lo que contienen es bastante fácil. La complejidad proviene de que el navegador realmente implementa la acción solicitada. Si el marcado se almacena como texto, por ejemplo, si desea ingresar texto (alineación de texto: centro) en el elemento p de la clase de texto central, ¿cómo lograrlo?
·¿Agregar estilos en línea al texto?
·¿Aplicar estilos al texto HTML en el navegador y simplemente mantener el contenido centrado o no?
·¿Aplicar HTML sin estilo y luego aplicar formato?
Estos problemas tan difíciles son la razón por la que hoy en día tan pocas personas escriben navegadores. (Quien haya escrito el navegador debería aceptar mi más sincero agradecimiento).
No hay duda de que el texto plano no es una buena manera de almacenar el HTML del navegador, aunque el texto es la mejor solución para obtener el marcado de la página. Agregue la capacidad de JavaScript para cambiar la estructura de la página y las cosas se vuelven un poco más matizadas. ¿Debería el navegador reescribir la estructura modificada en el disco? ¿Cómo se puede conservar la última versión del documento?
Ciertamente, el texto no es la respuesta. Es difícil de modificar, es difícil aplicarle estilos y comportamientos y, fundamentalmente, está muy alejado de la naturaleza dinámica de las páginas web actuales.
La respuesta al problema derecurrir a vistas de árbol
(al menos la respuesta elegida por los navegadores web actuales) es utilizar una estructura de árbol para representar HTML. Consulte el Listado 1, una página HTML bastante simple y aburrida que representa el marcado de este artículo.
Listado 1. Página HTML simple<html>
en formato de texto
<cabeza>
<title>Árboles, árboles, por todas partes</title>
</cabeza>
<cuerpo>
<h1>Árboles, árboles, por todas partes</h1>
<p>Bienvenido a una página <em>realmente</em> aburrida.</p>
<div>
Vuelve pronto.
<img src="ven-de nuevo.gif" />
</div>
</cuerpo>
</html>
El navegador acepta la página y la convierte en una estructura de árbol, como se muestra en la Figura 1.
Para que este artículo siga avanzando, lo he simplificado un poco. Los expertos en DOM o XML serán conscientes del impacto que tienen los espacios en blanco en la forma en que se representa y desglosa el texto de un documento en la estructura de árbol de un navegador web. Una comprensión superficial sólo hace que las cosas sean ambiguas, así que si quieres descubrir el impacto de los espacios en blanco, esa es tu mejor opción; si no, sigue leyendo y no pienses en ello. Cuando se convierta en un problema, sabrás todo lo que necesitas.
Aparte del fondo del árbol, lo primero que puede notar es que todo en el árbol comienza con el elemento que contiene HTML más externo, el elemento html. Usando la metáfora de un árbol, esto se llama elemento raíz. Entonces, aunque este es el nivel inferior del árbol, cuando miras y analizas el árbol, normalmente comienzo con esto. Si funciona, podrías poner todo el árbol patas arriba, pero eso estira un poco la metáfora del árbol.
Las líneas que fluyen desde la raíz representan la relación entre las diferentes partes etiquetadas. Los elementos head y body son hijos del elemento raíz html title es hijo de head, y el texto "Árboles, árboles, en todas partes" es hijo de title. Todo el árbol se organiza de esta forma hasta que el navegador obtiene una estructura similar a la Figura 1.
Alguna terminología adicional
Para seguir con la metáfora del árbol, la cabeza y el cuerpo se denominan ramas de html. Se les llama ramas porque tienen sus propios hijos. Cuando llegue al final del árbol, llegará al texto principal, como "Árboles, árboles, en todas partes" y "de verdad"; a menudo se les llama hojas porque no tienen hijos propios. No es necesario que recuerdes todos estos términos; es mucho más fácil imaginar la estructura del árbol cuando intentas descubrir qué significa un término en particular.
Valores de objeto
Ahora que comprende cierta terminología básica, es hora de centrarse en el pequeño rectángulo que contiene el nombre del elemento y el texto (Figura 1). Cada rectángulo es un objeto; el navegador resuelve algunos problemas de texto dentro de él. Al utilizar objetos para representar cada parte de un documento HTML, puede cambiar fácilmente la organización, aplicar estilos, permitir que JavaScript acceda al documento y más.
Tipos de objetos y
marcadores de propiedades Cada tipo posible tiene su propio tipo de objeto. Por ejemplo, los elementos en HTML están representados por el tipo de objeto Elemento. El texto del documento está representado por el tipo Texto, los atributos están representados por el tipo Atributo, etc.
Por lo tanto, los navegadores web no sólo pueden usar un modelo de objetos para representar documentos (evitando así tener que lidiar con texto estático), sino que también pueden usar tipos de objetos para decir inmediatamente qué es algo. El documento HTML se analiza y se convierte en una colección de objetos, como se muestra en la Figura 1, y cosas como corchetes angulares y secuencias de escape (por ejemplo, usar < para < y > para >) ya no son un problema. Esto facilita mucho el trabajo del navegador (al menos después de analizar el HTML de entrada). Es fácil determinar si algo es un elemento o un atributo y determinar cómo manejar objetos de ese tipo.
Al utilizar objetos, un navegador web puede cambiar las propiedades de estos objetos. Por ejemplo, cada objeto elemento tiene un elemento principal y una lista de elementos secundarios. Entonces, agregar un nuevo elemento secundario o texto simplemente agrega un nuevo elemento secundario a la lista de elementos secundarios del elemento. Estos objetos también tienen una propiedad de estilo, por lo que cambiar rápidamente el estilo de un elemento o segmento de texto es muy sencillo. Por ejemplo, para usar JavaScript para cambiar la altura de un div, tenga este aspecto:
someDiv.style.height = "300px"
En otras palabras, un navegador web hace que sea muy fácil cambiar la apariencia y estructura de un árbol usando un objeto
;propiedades. Compare esto con las cosas complicadas que un navegador tiene que hacer internamente para representar una página como texto: cada cambio en una propiedad o estructura requiere que el navegador reescriba el archivo estático, lo analice y vuelva a mostrarlo en la pantalla. Con los objetos todo esto se soluciona.
Ahora, tómate un momento para expandir algunos documentos HTML y delinearlos con un árbol. Aunque esto puede parecer una solicitud inusual (especialmente en un artículo como este que contiene tan poco código), si desea poder manipular estos árboles, debe estar familiarizado con su estructura.
En el camino, es posible que descubras algunas cosas raras. Por ejemplo, considere lo siguiente:
¿Qué sucede con el atributo?
·¿Qué pasa con el texto dividido en elementos (como em yb)?
·¿Qué pasa con el HTML que no está estructurado adecuadamente (por ejemplo, cuando falta la etiqueta p de cierre)?
Una vez que esté familiarizado con estos temas, podrá comprender mejor las siguientes secciones.
La rigurosidad es a veces algo bueno.
Si intenta el ejercicio que acabo de mencionar, puede encontrar algunos problemas potenciales con la vista de árbol marcada (si no, ¡créame!). De hecho, se encontrarán algunos problemas en el Listado 1 y la Figura 1. Primero, observe cómo se descompone el elemento p. Si le pregunta al desarrollador web promedio "¿Cuál es el contenido de texto del elemento p?", la respuesta más común será "Bienvenido a una página web realmente aburrida". Si compara esto con la Figura 1, verá que esta respuesta (aunque lógica) simplemente no es correcta.
De hecho, el elemento p tiene tres objetos secundarios diferentes, ninguno de los cuales contiene el texto completo "Bienvenido a una página web realmente aburrida". Encontrarás partes del texto como "Bienvenido a una" y "página web aburrida", pero no todo. Para entender esto, recuerde que cualquier cosa en el marcado debe convertirse en un objeto de algún tipo.
Además, ¡el orden no importa! ¿Se imagina cómo respondería un usuario a un navegador web si éste mostrara los objetos correctos, pero en un orden diferente al que usted los proporcionó en el HTML? ¿Qué pasa si el párrafo está intercalado entre el título de la página y el título del artículo, y no es así como organizas tu documento? Evidentemente, el navegador debe mantener el orden de los elementos y del texto.
En este ejemplo, el elemento p tiene tres partes diferentes:
· El texto antes del elemento em · El elemento em en sí · El texto después del elemento em
Si confundes este orden, es posible que te centres en la parte incorrecta del texto. Para mantener todo en orden, el elemento p tiene tres objetos secundarios, en el orden que se muestra en el HTML del Listado 1. Además, el texto clave "realmente" no es un elemento hijo de p, es un elemento hijo de em, un elemento hijo de p.
Es muy importante entender este concepto. Aunque el texto "real" probablemente aparecerá con otro texto del elemento p, sigue siendo un hijo directo del elemento em. Puede tener un formato diferente al de otro texto p y se puede mover independientemente de otro texto.
Para tener esto en cuenta, intente diagramar el HTML en los Listados 2 y 3 para asegurarse de que el texto tenga el elemento principal correcto (independientemente de cómo aparecerá finalmente el texto en la pantalla).
Listado 2. Marcado
<html>
con anidamiento inteligente de elementos
<cabeza>
<title>Esto es un poco complicado</title>
</cabeza>
<cuerpo>
<h1>Presta <u>mucha</u> atención, ¿de acuerdo?</h1>
<div>
<p>Esta p realmente no es <em>necesaria</em>, pero facilita la
<span id="bold-text">estructura <i>y</i> la organización</span>
de la página es más fácil de seguir.</p>
</div>
</cuerpo>
</html>
Listado 3. Anidamiento de elementos más inteligente
<html>
<cabeza>
<title>Anidamiento más complicado, todavía</title>
</cabeza>
<cuerpo>
<div id="cuerpo-principal">
<div id="contenido">
<tabla>
<tr><th>Pasos</th><th>Proceso</th></tr>
<tr><td>1</td><td>Descubre el <em>elemento raíz</em>.</td></tr>
<tr><td>2</td><td>Trata con el <span id="code">cabeza</span> primero,
ya que suele ser fácil.</td></tr>
<tr><td>3</td><td>Trabaja en el <span id="code">cuerpo</span>.
Simplemente <em>tómate tu tiempo</em>.</td></tr>
</tabla>
</div>
<div id="cierre">
Este enlace <em>no</em> está activo, pero si lo estuviera, las respuestas
a esto <a href="answers.html"><img src="exercise.gif" /></a> sería
estar allí. ¡Pero <em>haz el ejercicio de todos modos!</em>
</div>
</div>
</cuerpo>
</html>
Encontrarás las respuestas a estos ejercicios en los archivos GIF al final de este artículo, tricky-solution.gif en la Figura 2 y trickier-solution.gif en la Figura 3. No mires, tómate el tiempo para responder automáticamente primero. Esto le ayudará a comprender cuán estrictas se aplican las reglas al organizar el árbol y realmente le ayudará a dominar HTML y su estructura de árbol.
¿Qué pasa con los atributos?
¿Tiene algunos problemas al intentar descubrir qué hacer con las propiedades? Como se mencionó anteriormente, el atributo tiene su propio tipo de objeto, pero el atributo de hecho no es hijo del elemento que lo muestra. El elemento anidado y el texto no están en el mismo "nivel" de atributo, como notará. respuestas a los ejercicios de los Listados 2 y 3 No se muestran propiedades.
En realidad, las propiedades se almacenan en el modelo de objetos utilizado por los navegadores, pero tienen algunos casos especiales. Cada elemento tiene una lista de propiedades disponibles, separada de la lista de objetos secundarios. Entonces, un elemento div podría tener una lista que contenga un atributo "id" y otro atributo "clase".
Recuerde que los atributos de los elementos deben tener nombres únicos, es decir, un elemento no puede tener dos atributos "id" o dos "class". Esto hace que la lista sea fácil de mantener y acceder. Como verá en el próximo artículo, simplemente puede llamar a un método como getAttribute("id") para obtener el valor de un atributo por nombre. También se pueden utilizar llamadas a métodos similares para agregar propiedades o establecer (restablecer) el valor de propiedades existentes.
Vale la pena señalar que la unicidad de los nombres de los atributos hace que esta lista sea diferente de la lista de subobjetos. Un elemento p puede tener varios elementos em, por lo que la lista de objetos secundarios puede contener varios duplicados. Aunque las listas secundarias y las listas de propiedades funcionan de manera similar, una puede contener duplicados (hijos de un objeto) mientras que otra no (propiedades de un objeto elemento). Finalmente, sólo los elementos tienen atributos, por lo que los objetos de texto no tienen una lista adicional para almacenar atributos.
HTML desordenado
Antes de pasar a cómo los navegadores convierten el marcado en una representación de árbol, hay otro tema que vale la pena explorar: cómo los navegadores manejan el marcado que no está bien formado. Bien formado es un término ampliamente utilizado en XML y tiene dos significados básicos:
·Cada etiqueta de apertura tiene una etiqueta de cierre correspondiente. Entonces, cada <p> del documento coincide con </p>, cada <div> coincide con </div>, y así sucesivamente.
La etiqueta inicial más interna coincide con la etiqueta final más interna, luego la siguiente etiqueta inicial más interna coincide con la siguiente etiqueta final más interna, y así sucesivamente. Por lo tanto, <b><i>negrita y cursiva</b></i> es ilegal porque la etiqueta de apertura más interna <i> no coincide correctamente con la etiqueta de cierre más interna <b>. Para que esté bien formado, cambie el orden de las etiquetas de apertura o el orden de las etiquetas de cierre. (Si cambia ambos, el problema persistirá).
Eche un vistazo más de cerca a estas dos reglas. Estas dos reglas no sólo simplifican la organización de los documentos sino que también eliminan la incertidumbre. ¿Debería aplicarse primero la negrita y luego la cursiva? ¿O todo lo contrario? Si este orden e incertidumbre no parecen gran cosa, tenga en cuenta que CSS permite que las reglas anulen otras reglas, así que, por ejemplo, si el texto en el elemento b tiene una fuente diferente a la fuente en el elemento i, el orden en el que se aplica el formato cambiará. Por lo tanto, el buen formato del HTML juega un papel crucial.
Si el navegador recibe un documento que no está bien formado, hará lo mejor que pueda. La estructura de árbol resultante será, en el mejor de los casos, una aproximación a la página original que pretendía el autor y, en el peor, será irreconocible. Si alguna vez cargó una página en su navegador y vio resultados completamente inesperados, probablemente miró los resultados del navegador, adivinó cómo debería ser su estructura y continuó trabajando frustrado. Por supuesto, solucionar este problema es bastante sencillo: ¡asegúrese de que el documento esté bien formateado! Si no está seguro de cómo escribir HTML estandarizado, consulte sus recursos para obtener ayuda.
Introducción al DOM
A estas alturas ya sabes que los navegadores convierten páginas web en representaciones de objetos, e incluso habrás adivinado que las representaciones de objetos son árboles DOM. DOM significa Document Object Model y es una especificación disponible en el World Wide Web Consortium (W3C) (puede ver algunos enlaces relacionados con DOM en Recursos).
Pero lo más importante es que el DOM define los tipos y propiedades de los objetos, lo que permite al navegador representar marcas. (El próximo artículo de esta serie estará dedicado a las especificaciones para usar DOM en código JavaScript y Ajax).
Objeto de documento
Primero, debe acceder al modelo de objetos en sí. Es muy fácil utilizar la variable de documento incorporada en cualquier código JavaScript que se ejecute en una página web; puede escribir código como este:
var domTree = document
Por supuesto, este código en sí es inútil, pero demuestra que cada Web; El navegador crea objetos de documento que se pueden utilizar en código JavaScript y se muestra un árbol completo de marcado de representación de objetos (Figura 1).
Cada elemento es un nodo
. Obviamente, el objeto del documento es importante, pero eso es solo el comienzo. Antes de continuar, hay otro término que aprender: nodos. Ya sabes que cada parte del marcado está representada por un objeto, pero no es un objeto cualquiera, es un tipo específico de objeto, un nodo DOM. Los tipos más específicos, como texto, elementos y atributos, heredan de este tipo de nodo básico. Por tanto, puede haber nodos de texto, nodos de elementos y nodos de atributos.
Si ya tienes mucha experiencia en programación JavaScript, probablemente ya estés trabajando con código DOM. Si has estado siguiendo esta serie de Ajax hasta ahora, debes haber estado trabajando con código DOM desde hace algún tiempo. Por ejemplo, la línea de código var number = document.getElementById("phone").value usa el DOM para encontrar un elemento específico y luego recupera el valor de ese elemento (en este caso, un campo de formulario). Entonces, incluso si no te das cuenta, estás usando el DOM cada vez que escribes un documento en código JavaScript.
Para profundizar en los términos que ya ha aprendido, un árbol DOM es un árbol de objetos, pero más específicamente, es un árbol de objetos de nodo. En aplicaciones Ajax o cualquier otro JavaScript, puede utilizar estos nodos para producir efectos como eliminar elementos y sus contenidos, resaltar texto específico o agregar nuevos elementos de imagen. Debido a que todos ocurren en el lado del cliente (el código que se ejecuta en el navegador web), estos efectos ocurren inmediatamente sin comunicarse con el servidor. El resultado final suele ser que la aplicación se siente más receptiva porque el contenido cambia en la página web sin largas pausas mientras la solicitud se dirige al servidor y se interpreta la respuesta.
En la mayoría de los lenguajes de programación, es necesario conocer el nombre real del objeto de cada tipo de nodo, conocer las propiedades disponibles y descubrir los tipos y las conversiones, pero en JavaScript esto no es necesario; Puedes simplemente crear una variable y asignarle el objeto que desees (como ya has visto):
var domTree = document;
var phoneNumberElement = document.getElementById("teléfono");
var phoneNumber = phoneNumberElement.value;
No hay ningún tipo, JavaScript crea la variable según sea necesario y le asigna el tipo correcto. Como resultado, trabajar con el DOM desde JavaScript se vuelve trivial (un artículo futuro estará dedicado al DOM en relación con XML, que será aún más ingenioso).
Paraterminar
, quiero dejarlos con un poco de suspenso. Obviamente, esta no es una descripción completamente exhaustiva del DOM; de hecho, este artículo es solo una introducción al DOM; ¡Hay mucho más en el DOM de lo que he presentado hoy!
El próximo artículo de esta serie ampliará estas ideas y profundizará en cómo usar DOM en JavaScript para actualizar páginas web, cambiar rápidamente HTML y crear una experiencia más interactiva para sus usuarios. Volveré al DOM nuevamente en un artículo posterior dedicado al uso de XML en solicitudes Ajax. Así que familiarícese con el DOM, que es una parte importante de las aplicaciones Ajax.
En este punto, comprender el DOM en profundidad sería bastante simple, como detallar cómo moverse por el árbol DOM, obtener los valores de los elementos y el texto, iterar a través de listas de nodos, etc., pero esto podría dejarlo con la Impresión de que el DOM tiene que ver con el código, lo cual no es el caso.
Antes de leer el siguiente artículo, intente pensar en una estructura de árbol y pruébela con algo de HTML propio para ver cómo un navegador web convierte HTML en una vista de árbol de marcado. Además, piense en la organización del árbol DOM y practíquelo con los casos especiales presentados en este artículo: atributos, texto con elementos mezclados y elementos sin contenido de texto (como el elemento img).
Tener una comprensión sólida de estos conceptos y luego aprender la sintaxis de JavaScript y DOM (próximo artículo) hará que responder sea mucho más fácil.
Y no olvide que hay respuestas a los Listados 2 y 3, ¡completas con código de muestra!