Diferencia entre revisiones de «Uso del DOM»
(Página creada con ' El Document Object Model, es una forma de representar los elementos de un documento estructurado ej. (X)HTML como objetos que tienen sus propios métodos y propiedades. ==Impo...') |
|||
| Línea 1: | Línea 1: | ||
| − | El Document Object Model, es una forma de representar los elementos de un documento estructurado ej. (X)HTML como objetos que tienen sus propios métodos y propiedades. | + | El Document Object Model(DOM), es una forma de representar los elementos de un documento estructurado ej. (X)HTML como objetos que tienen sus propios métodos y propiedades. |
==Importancia del DOM== | ==Importancia del DOM== | ||
En Javascript es habitual: | En Javascript es habitual: | ||
| + | |||
- Obtener el valor almacenado por algunos elementos. | - Obtener el valor almacenado por algunos elementos. | ||
| + | |||
- Crear y Eliminar un elemento de forma dinámica y añadirlo al documento. | - Crear y Eliminar un elemento de forma dinámica y añadirlo al documento. | ||
| + | |||
- Manipulación interactiva de contenidos. | - Manipulación interactiva de contenidos. | ||
| + | |||
- Flexibilidad ilimitada. | - Flexibilidad ilimitada. | ||
| Línea 17: | Línea 21: | ||
• Si un etiqueta es hija de otra se sigue el procedimiento anterior, siendo hijos de su nodo padre. | • Si un etiqueta es hija de otra se sigue el procedimiento anterior, siendo hijos de su nodo padre. | ||
==Tipos de nodos== | ==Tipos de nodos== | ||
| − | 1. Document: | + | |
| − | Nodo raíz del que derivan los demás nodos del árbol. | + | 1. Document:Nodo raíz del que derivan los demás nodos del árbol. |
| − | 2. Element: | + | |
| − | Representa cada una de las etiquetas HTML, único nodo que contiene atributos y del que derivan otros nodos. | + | 2. Element:Representa cada una de las etiquetas HTML, único nodo que contiene atributos y del que derivan otros nodos. |
| − | 3. Attr: | + | |
| − | Se define un nodo de este tipo por cada atributo de una etiqueta HTML. | + | 3. Attr:Se define un nodo de este tipo por cada atributo de una etiqueta HTML. |
| − | 4. Text: | + | |
| − | Nodo que contiene el texto encerrado por una etiqueta HTML. | + | 4. Text:Nodo que contiene el texto encerrado por una etiqueta HTML. |
| + | |||
== Características del DOM== | == Características del DOM== | ||
| − | + | ||
| + | Por su aspecto a la unión de todos los nodos se le llama “árbol de nodos.” | ||
== Consideraciones del árbol del DOM== | == Consideraciones del árbol del DOM== | ||
- Cada rectángulo representa un nodo del DOM. | - Cada rectángulo representa un nodo del DOM. | ||
| + | |||
- Dentro de cada nodo se ha incluido su tipo y su contenido. | - Dentro de cada nodo se ha incluido su tipo y su contenido. | ||
| + | |||
- A partir del nodo raíz cada nodo se transforma en un nodo de tipo Element. | - A partir del nodo raíz cada nodo se transforma en un nodo de tipo Element. | ||
| + | |||
- Cada etiqueta HTML genera dos nodos, el primero es el nodo de tipo Element correspondiente a la etiqueta y el segundo es un nodo de tipo texto que contiene el texto encerrado por esta. | - Cada etiqueta HTML genera dos nodos, el primero es el nodo de tipo Element correspondiente a la etiqueta y el segundo es un nodo de tipo texto que contiene el texto encerrado por esta. | ||
| + | |||
- La raíz del árbol de nodo de cualquier documento HTML es del tipo Documento. | - La raíz del árbol de nodo de cualquier documento HTML es del tipo Documento. | ||
| Línea 40: | Línea 50: | ||
==Acceso a los nodos== | ==Acceso a los nodos== | ||
DOM proporciona dos métodos: | DOM proporciona dos métodos: | ||
| + | |||
-Acceso a través de los nodos padres. | -Acceso a través de los nodos padres. | ||
| + | |||
-Acceso directo. | -Acceso directo. | ||
| + | |||
===Acceso a través de los nodos padres=== | ===Acceso a través de los nodos padres=== | ||
| − | + | ||
| + | document.formName.elements[index] | ||
| + | |||
| − | + | document.forms[index].elementName | |
===Acceso directo=== | ===Acceso directo=== | ||
• Se utilizan funciones que permiten acceder directamente al elemento en cuestión. | • Se utilizan funciones que permiten acceder directamente al elemento en cuestión. | ||
| Línea 56: | Línea 71: | ||
– getElementById(). | – getElementById(). | ||
| + | ==Resumen== | ||
| + | DOM permite ver el mismo documento de otra manera, describiendo el contenido del documento como un conjunto de objetos que un programa Javascript puede actuar sobre ellos. | ||
==Fuentes== | ==Fuentes== | ||
Introducción a JavaScript, capítulo 5, pág 51-61 | Introducción a JavaScript, capítulo 5, pág 51-61 | ||
[[Category: Programación]] | [[Category: Programación]] | ||
Revisión del 08:22 11 oct 2014
El Document Object Model(DOM), es una forma de representar los elementos de un documento estructurado ej. (X)HTML como objetos que tienen sus propios métodos y propiedades.
Sumario
Importancia del DOM
En Javascript es habitual:
- Obtener el valor almacenado por algunos elementos.
- Crear y Eliminar un elemento de forma dinámica y añadirlo al documento.
- Manipulación interactiva de contenidos.
- Flexibilidad ilimitada.
Una página (X)HTML no es más que una sucesión de caracteres. - DOM transforma todos los documentos (X)HTML en un conjunto de elementos llamados nodos, que están interconectados y que representan los contenidos de las páginas web y las relaciones entre ellos.
Reglas para la transformación de la página en sus nodos.
• Las etiquetas HTML se transforman en 2 nodos: - Propia etiqueta. - Contenido textual de la etiqueta. • Si un etiqueta es hija de otra se sigue el procedimiento anterior, siendo hijos de su nodo padre.
Tipos de nodos
1. Document:Nodo raíz del que derivan los demás nodos del árbol.
2. Element:Representa cada una de las etiquetas HTML, único nodo que contiene atributos y del que derivan otros nodos.
3. Attr:Se define un nodo de este tipo por cada atributo de una etiqueta HTML.
4. Text:Nodo que contiene el texto encerrado por una etiqueta HTML.
Características del DOM
Por su aspecto a la unión de todos los nodos se le llama “árbol de nodos.”
Consideraciones del árbol del DOM
- Cada rectángulo representa un nodo del DOM.
- Dentro de cada nodo se ha incluido su tipo y su contenido.
- A partir del nodo raíz cada nodo se transforma en un nodo de tipo Element.
- Cada etiqueta HTML genera dos nodos, el primero es el nodo de tipo Element correspondiente a la etiqueta y el segundo es un nodo de tipo texto que contiene el texto encerrado por esta.
- La raíz del árbol de nodo de cualquier documento HTML es del tipo Documento.
Acceso a los nodos
DOM proporciona dos métodos:
-Acceso a través de los nodos padres.
-Acceso directo.
Acceso a través de los nodos padres
document.formName.elements[index]
document.forms[index].elementName
Acceso directo
• Se utilizan funciones que permiten acceder directamente al elemento en cuestión.
– getElementsByTagName().
– getElementsByName().
– getElementById().
Resumen
DOM permite ver el mismo documento de otra manera, describiendo el contenido del documento como un conjunto de objetos que un programa Javascript puede actuar sobre ellos.
Fuentes
Introducción a JavaScript, capítulo 5, pág 51-61
