Arbol DOM En HTML5
El fragmento marcado en la parte superior de esta sección se convertiría en el siguiente árbol DOM:
- DOCTYPE:
HTML
HTML
cabeza
# Text : ⏎ ␣ ␣título
# Text : Página de muestra
# Text : ⏎ ␣
# Text : ⏎ ␣cuerpo
# Text : ⏎ ␣ ␣h1
# Text : Página de muestra
# Text : ⏎ ␣ ␣p
# Texto : Este es unun href = " demo.html "
# Text : muestra.
# Text : ⏎ ␣ ␣# Comment : esto es un comentario# Text : ⏎ ␣ ⏎
El elemento raíz de este árbol es el HTML elemento, que es el elemento siempre se encuentran en la raíz de documentos HTML. Contiene dos elementos, la cabeza y el cuerpo , así como un texto de nodo entre ellos.
Hay muchas más texto nodos del árbol DOM de un principio era de esperar, ya que la fuente contiene una serie de espacios (representado aquí por "␣") y saltos de línea ("⏎") que todos terminan como texto nodos en el DOM . Sin embargo, por razones históricas, no todos los espacios y saltos de línea en el formato original, aparecen en el DOM. En particular, todos los espacios en blanco antes de la cabeza etiqueta inicial termina siendo abandonado en silencio, y todo el espacio en blanco después de que el cuerpo de la etiqueta de cierre termina colocado en el extremo del cuerpo .
La cabeza de elemento contiene un título elemento, que a su vez contiene un texto nodo con la "Página de ejemplo" text. Del mismo modo, el cuerpo contiene un elemento h1elemento, un p elemento, y un comentario.
Este árbol DOM se puede manipular desde secuencias de comandos en la página. Secuencias de comandos (normalmente en JavaScript) son pequeños programas que se pueden incrustar utilizando el script de elemento o utilizando atributos de contenido controlador de eventos . Por ejemplo, aquí es una forma con un guión que establece el valor de la formade salida de elemento de decir "Hello World":
< forma nombre = "principal">
Resultado: < salida nombre = "número"> </ salida>
< script de >
documentos . formas .. principales elementos .. consecuencia valor = 'Hello World';
</ Script>
</ Form>
Cada elemento en el árbol DOM está representada por un objeto, y estos objetos tengan API para que puedan ser manipulados. Por ejemplo, un enlace (por ejemplo, la de unelemento en el árbol de arriba) puede tener su " href atributo "cambió de varias maneras:
var a = documento . enlaces [0]; / / Obtener el primer eslabón en el documento
. un href = 'sample.html'; / / Cambiar la URL de destino del vínculo
. un protocolo = 'https'; / / Cambiar sólo la parte de esquema de la URL
a.setAttribute ('href', 'http://example.com/'); / / Cambiar el atributo contenido directamente
Como los árboles DOM se utilizan como la forma de representar documentos HTML cuando son procesados y presentados por las implementaciones (implementaciones especialmente interactivas como navegadores web), esta especificación está redactada principalmente en términos de árboles DOM, en vez del marcado descrito anteriormente.
Documentos HTML representan una descripción independiente de medios de contenido interactivo. Los documentos HTML pueden ser prestados a una pantalla oa través de un sintetizador de voz, o en una pantalla Braille. Para influir exactamente cómo tal representación se lleva a cabo, los autores pueden usar un lenguaje de estilo como CSS.
En el siguiente ejemplo, la página se ha realizado amarillo sobre azul usando CSS.
<! DOCTYPE html>
<html>
<head>
Página de ejemplo <title> estilo </ title>
<style>
body {background: marino; color: amarillo; }
</ Style>
</ Head>
<body>
Página de ejemplo <h1> estilo </ h1>
<p> Esta página es sólo una demo. </ p>
</ Body>
</ Html>
Para más detalles sobre cómo usar HTML, se anima a los autores a consultar tutoriales y guías. Algunos de los ejemplos incluidos en esta especificación también podría ser de utilidad, pero el autor novato se advirtió que esta especificación, por necesidad, se define el idioma con un nivel de detalle que puede ser difícil de entender al principio.
.jpg)
.jpg)
.jpg)