Diferencia entre revisiones de «Uso del DOM»
(No se muestran 6 ediciones intermedias de 4 usuarios) | |||
Línea 1: | Línea 1: | ||
− | + | {{Definición | |
− | + | |nombre= Document Object Mode | |
+ | |imagen= | ||
+ | |tamaño= | ||
+ | |concepto= Forma de representar los elementos de un documento estructurado | ||
+ | }}<div align = justify> | ||
+ | ''' Document Object Mode''' (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. | |
− | + | * 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. | 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.== | == 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== | ==Tipos de nodos== | ||
− | + | * Document:Nodo raíz del que derivan los demás nodos del árbol. | |
− | + | * Element:Representa cada una de las etiquetas HTML, único nodo que contiene atributos y del que derivan otros nodos. | |
− | + | * Attr:Se define un nodo de este tipo por cada atributo de una etiqueta HTML. | |
− | + | * Text:Nodo que contiene el texto encerrado por una etiqueta HTML. | |
− | |||
− | |||
− | |||
== Características del DOM== | == Características del DOM== | ||
Línea 39: | Línea 33: | ||
Por su aspecto a la unión de todos los nodos se le llama “árbol de nodos.” | 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. | |
− | + | * 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== | ==Acceso a los nodos== | ||
DOM proporciona dos métodos: | DOM proporciona dos métodos: | ||
− | + | * Acceso a través de los nodos padres.* Acceso directo. | |
− | |||
− | |||
− | |||
− | |||
===Acceso a través de los nodos padres=== | ===Acceso a través de los nodos padres=== | ||
− | |||
document.formName.elements[index] | document.formName.elements[index] | ||
− | |||
− | |||
document.forms[index].elementName | document.forms[index].elementName | ||
===Acceso directo=== | ===Acceso directo=== | ||
− | + | * Se utilizan funciones que permiten acceder directamente al elemento en cuestión. | |
− | + | * getElementsByTagName(). | |
− | + | * getElementsByName(). * getElementById(). | |
− | |||
− | |||
− | |||
− | |||
− | |||
==Resumen== | ==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. | 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. |
última versión al 10:41 18 jun 2015
|
Document Object Mode (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
- Document:Nodo raíz del que derivan los demás nodos del árbol.
- Element:Representa cada una de las etiquetas HTML, único nodo que contiene atributos y del que derivan otros nodos.
- Attr:Se define un nodo de este tipo por cada atributo de una etiqueta HTML.
- 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