Índice: Temas 3.3 y 3.4
3.3 El modelo de objetos del Documento
3.3.1 Introducción al DOM
3.3.2 Acceso a los nodos
3.3.3 Manipulación de nodos
3 3 4 A
3.3.4 Acceso a los atributos
t ib t
l
3.4 El modelo de objetos del Navegador
3 4 1 El objeto window
3.4.1 El objeto window
3.4.2 Otros objetos de utilidad
Índice: Temas 3.3 y 3.4
3.3 El modelo de objetos del Documento
3.3.1 Introducción al DOM
3.3.2 Acceso a los nodos
3.3.3 Manipulación de nodos
3 3 4 A
3.3.4 Acceso a los atributos
t ib t
l
3.4 El modelo de objetos del Navegador
3 4 1 El objeto window
3.4.1 El objeto window
3.4.2 Otros objetos de utilidad
3.3
3.3.1
EL MODELO DE OBJETOS DEL DOCUMENTO
INTRODUCCIÓN AL DOM
Modelo de Objetos del Documento (1)
El Modelo de Objetos del Documento (DOM) es un interfaz que permite acceder
y modificar la estructura y contenido de una página web.
Especifica cómo se puede acceder desde los lenguajes de script a los distintos
Especifica cómo se puede acceder desde los lenguajes de script a los distintos
elementos (enlaces, imágenes, formularios, etc…) de una página web y cómo se
pueden modificar.
Para lograrlo, se crean una serie de objetos que representan dichos elementos, y
que guardan entre ellos unas relaciones de parentesco (jerarquía) que refleja la
estructura lógica de una página HTML.
Una página se presenta en una ventana que posee un documento el cual a su vez
Una página se presenta en una ventana, que posee un documento, el cual a su vez
puede tener una serie de formularios, que pueden contener elementos como
botones, cuadros de texto, etc…, a su vez con una serie de propiedades, etc…
APLICACIONES WEB
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
3
3.3
3.3.1
EL MODELO DE OBJETOS DEL DOCUMENTO
INTRODUCCIÓN AL DOM
Modelo de Objetos del Documento (2)
A continuación se muestran las clases de objetos del navegador en un diagrama
que indica sus relaciones de contenido.
APLICACIONES WEB
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
4
3.3
3.3.1
EL MODELO DE OBJETOS DEL DOCUMENTO
INTRODUCCIÓN AL DOM
Modelo de Objetos del Documento (3)
Considérese la siguiente página web sencilla:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
</body>
</body>
h
i
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Página sencilla</title>
/h l
f 8
h
<p>Esta página es <strong>muy sencilla</strong></p>
</html>
APLICACIONES WEB
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
5
3.3
3.3.1
EL MODELO DE OBJETOS DEL DOCUMENTO
INTRODUCCIÓN AL DOM
Modelo de Objetos del Documento (4)
Antes de poder utilizar las funciones de DOM, los navegadores convierten
automáticamente la página HTML en una estructura de árbol con nodos.
Dichas funciones permiten añadir, eliminar, modificar y reemplazar cualquier nodo
de cualquier documento de forma sencilla y sin necesidad de recargar la página.
APLICACIONES WEB
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
6
3.3
3.3.1
EL MODELO DE OBJETOS DEL DOCUMENTO
INTRODUCCIÓN AL DOM
Tipos de nodos
La especificación completa de DOM define 12 tipos de nodos.
A continuación se detallan los tipos más importantes de nodos en los que DOM
transforma los documentos HTML:
• Document
Nodo raíz del que derivan todos los demás nodos del árbol.
• DocumentType
DocumentType
Es el nodo que contiene la representación del DTD empleado en la
Es el nodo que contiene la representación del DTD empleado en la
página (indicado mediante el DOCTYPE).
• Element
• Attr
• Text
• Comment
C
Representa cada una de las etiquetas HTML. Es el único nodo que
puede tener tanto nodos hijos como atributos.
Representa cada uno de los atributos de las etiquetas HTML, es decir,
uno por cada par atributo=valor.
t ib t
d
l
Nodo que contiene el texto encerrado por una etiqueta HTML.
R
á i HTML
Representa los comentarios incluidos en la página HTML.
id
l
i
i
l
l
APLICACIONES WEB
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
7
3.3
3.3.1
EL MODELO DE OBJETOS DEL DOCUMENTO
INTRODUCCIÓN AL DOM
La interfaz NODE (1)
Una vez que DOM ha creado de forma automática el árbol completo de nodos de
la página, ya es posible utilizar sus funciones para obtener información sobre los
nodos o manipular su contenido.
JavaScript crea el objeto Node para definir las propiedades y métodos necesarios
para procesar y manipular los documentos.
En primer lugar, el objeto Node define las siguientes constantes para la
identificación de cada uno de los 12 tipos de nodos existentes:
Node.ELEMENT_NODE = 1
Node.ATTRIBUTE_NODE = 2
...
Node.COMMENT_NODE = 8
Node.DOCUMENT_NODE = 9
...
Node.NOTATION_NODE = 12
12
d
APLICACIONES WEB
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
8
3.3
3.3.1
EL MODELO DE OBJETOS DEL DOCUMENTO
INTRODUCCIÓN AL DOM
La interfaz NODE (2)
Además de estas constantes, Node proporciona las siguientes propiedades y
métodos:
APLICACIONES WEB
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
9
3.3
3.3.1
EL MODELO DE OBJETOS DEL DOCUMENTO
INTRODUCCIÓN AL DOM
La interfaz NODE (3)
APLICACIONES WEB
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
10
Índice: Temas 3.3 y 3.4
3.3 El modelo de objetos del Documento
3.3.1 Introducción al DOM
3.3.2 Acceso a los nodos
3.3.3 Manipulación de nodos
3 3 4 A
3.3.4 Acceso a los atributos
t ib t
l
3.4 El modelo de objetos del Navegador
3 4 1 El objeto window
3.4.1 El objeto window
3.4.2 Otros objetos de utilidad
3.3
3.3.2
EL MODELO DE OBJETOS DEL DOCUMENTO
ACCESO A LOS NODOS
Tipos de acceso
DOM proporciona dos métodos alternativos para acceder a un nodo específico:
• Acceso relativo: También conocido como acceso a través de nodos padre, consiste en
acceder al nodo raíz de la página y después a sus nodos hijos y a los nodos hijos de esos
h
hijos y así sucesivamente hasta el nodo buscado.
d b
h
d
l
í
• Acceso directo: Cuando se quiere acceder a un nodo específico, es mucho más rápido
acceder directamente a ese nodo a tener que llegar hasta él descendiendo a través de
acceder directamente a ese nodo a tener que llegar hasta él descendiendo a través de
todos sus nodos padre.
Por último, es importante recordar que el acceso a los nodos, su modificación y su
p
q
y
,
,
eliminación solamente es posible cuando el árbol DOM ha sido construido
completamente, es decir, después de que la página HTML se cargue por completo
(evento onload).
Más adelante se verá cómo asegurar que un código JavaScript solamente se
ejecute cuando el navegador ha cargado entera la página HTML.
APLICACIONES WEB
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
12
3.3
3.3.2
EL MODELO DE OBJETOS DEL DOCUMENTO
ACCESO A LOS NODOS
Acceso relativo (1)
// html (elemento raiz)
La operación básica consiste en obtener el objeto que representa el elemento raíz
de la página, para luego utilizar los diferentes métodos de la interfaz node para
acceder al nodo deseado. Por ejemplo, se pueden hacer cosas del tipo:
var objeto_html = document.documentElement;
var objeto_head = objeto_html.firstChild;
var objeto_body = objeto_html.lastChild;
var objeto_head = objeto_html.childNodes[0];
var objeto_body = objeto_html.childNodes[1];
var numeroDescendientes = objeto_html.childNodes.length;
th
objeto_head.parentNode;
objeto_body.parentNode;
objeto body.previousSibling;
objeto_body.previousSibling;
objeto_head.nextSibling;
objeto_head.ownerDocument;
document nodeType;
document.nodeType;
document.documentElement.nodeType;
// devuelve el objeto_html
// devuelve el objeto_html
// devuelve el objeto head
// devuelve el objeto_head
// devuelve el objeto_body
// devuelve el document
// alternativa para obtener head
// alternativa para obtener body
// 9 (tipo del nodo document)
// 9 (tipo del nodo document)
// 1 (tipo del nodo html)
// l
it d li t
// longitud lista
bj t
ht l
hildN d
l
// head
// body
D
di
t
APLICACIONES WEB
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
13
3.3
3.3.2
EL MODELO DE OBJETOS DEL DOCUMENTO
ACCESO A LOS NODOS
EJERCICIO 16
Acceso relativo (2)
Comprobar el acceso a los diferentes nodos de una página mostrando el
resultados mediante alertas por pantalla:
APLICACIONES WEB
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
14
3.3
3.3.2
EL MODELO DE OBJETOS DEL DOCUMENTO
ACCESO A LOS NODOS
Acceso directo (1)
Cuando se trabaja con una página web real, el árbol DOM tiene miles de nodos de
todos los tipos. Por este motivo, no es eficiente acceder a un nodo descendiendo
a través de todos los ascendentes de ese nodo.
Para solucionar este problema, DOM proporciona una serie de métodos para
acceder de forma directa a los nodos deseados.
getElementsByTagName(“etiqueta”)
• Dicha función obtiene todos los elementos de la página cuya etiqueta coincida con la
especificada como argumento de la función:
var parrafos =document.getElementsByTagName("p");
• El resultado se devuelve en un objeto de tipo NodeList, similar a un array de nodos:
El resultado se devuelve en un objeto de tipo NodeList, similar a un array de nodos:
var primerParrafo = parrafos[0];
var numeroParrafos = parrafos.length;
• Se puede aplicar de forma recursiva sobre cada uno de los nodos devueltos por la función:
var enlaces = primerParrafo.getElementsByTagName("a");
APLICACIONES WEB
TEMA 3: PROGRAMACIÓN EN EL LADO DEL CLIENTE
15
3.3
3.3.2
EL MODELO DE OBJETOS DEL DOCUMENTO
ACCESO A LOS NODOS
Acceso directo (2)
getElementsByName(“name”)
• Dicha función obtiene todos los elementos de la página cuyo atributo name coincida con
el especificado como argumento de la función.
<p name="especial">Contenido del párrafo</p>
var parrafoEspecial = document.getElementsByName("especial");
getElementById(“id”)
• Dicha función obtiene todos el elemento de la página cuya atributo id se especifica como
argumento de la función:
<div id="cabecera">
var cabecera = document.getElementByI
Crear cuenta
Comentarios de: Temás 3.3 y 3.4 - El modelo de objetos del Documento/El modelo de objetos del Navegador (0)
No hay comentarios