DOM. DOM = Document Object Model Permite acceder y manipular las páginas XHTML DOM transforma los documentos XHTML en un conjunto de elementos llamados.

Presentación del tema: "DOM. DOM = Document Object Model Permite acceder y manipular las páginas XHTML DOM transforma los documentos XHTML en un conjunto de elementos llamados."— Transcripción de la presentación:

1 DOM

2 DOM = Document Object Model Permite acceder y manipular las páginas XHTML DOM transforma los documentos XHTML en un conjunto de elementos llamados nodos

3 Nodos Página sencilla Esta página es muy sencilla

4 Nodos

5 Las etiquetas XHTML se transforman en dos nodos: el primero es la propia etiqueta y el segundo nodo es hijo del primero y consiste en el contenido textual de la etiqueta.

6 Nodos Las etiquetas XHTML se transforman en dos nodos: el primero es la propia etiqueta y el segundo nodo es hijo del primero y consiste en el contenido textual de la etiqueta. Si una etiqueta XHTML se encuentra dentro de otra, se sigue el mismo procedimiento anterior, pero los nodos generados serán nodos hijo de su etiqueta padre.

7 Tipo de Nodos Document, nodo raíz Element, representa cada una de las etiquetas XHTML Attr, representa cada uno de los atributos de las etiquetas XHTML Text, contiene el texto encerrado por la etiqueta Comment, representa los comentarios incluidos en la página XHTML

8 Tipos de Nodos Otros tipos de nodos son: DocumentType, CDataSection, DocumentFragment, Entity, EntityReference, ProcessingInstruction, Notation

9 Acceso a los Nodos Hay dos maneras de acceder a los nodos:  De forma directa  Y a través del nodo padre Solo se puede acceder a los nodos cuando el árbol DOM ha sido construido completamente.

10 Acceso Directo a los Nodos Se utilizan los siguientes métodos:  getElementsByTagName(etiqueta)  getElementsByName(nombre)  getElementById(id)

11 Creación de Nodos Requiere 4 pasos:

12 Creación de Nodos Requiere 4 pasos: 1. Creación de un nodo tipo Element

13 Creación de Nodos Requiere 4 pasos: 1. Creación de un nodo tipo Element 2. Creación de un nodo tipo Text

14 Creación de Nodos Requiere 4 pasos: 1. Creación de un nodo tipo Element 2. Creación de un nodo tipo Text 3. Añadir el nodo Text como nodo hijo del nodo Element

15 Creación de Nodos Requiere 4 pasos: 1. Creación de un nodo tipo Element 2. Creación de un nodo tipo Text 3. Añadir el nodo Text como nodo hijo del nodo Element 4. Añadir el nodo Element a la página, en forma de nodo hijo del nodo correspondiente donde queremos insertar el elemento

16 Creación de Nodos // Crear nodo de tipo Element var parrafo = document.createElement("p"); // Crear nodo de tipo Text var contenido = document.createTextNode("Hola Mundo!"); // Añadir el nodo Text como hijo del nodo Element parrafo.appendChild(contenido); // Añadir el nodo Element como hijo de la pagina document.body.appendChild(parrafo);

17 Creación de Nodos createElement(etiqueta) – crea un nodo tipo Element createTextNode(contenido) – crea un nodo tipo Text nodoPadre.appendChild(nodoHijo) – añade un nodo como hijo de otro nodo

18 Eliminación de Nodos Se requiere de la funcion removeChild(nodo) var parrafo = document.getElementById("provisional"); parrafo.parentNode.removeChild(parrafo);...

19 Atributos XHTML Mediante DOM, es posible acceder a todos los atributos XHTML y todas las propiedades CSS Los atributos XHTML de los elementos dela página se transforma automáticamente en propiedades de los nodos

20 Atributos XHTML var enlace = document.getElementById("enlace"); alert(enlace.href); // muestra http://www...com Enlace

21 Atributos XHTML Para obtener cualquier propiedad CSS del nodo, se debe utilizar el atributo style var imagen = document.getElementById("imagen"); alert(imagen.style.margin);

22 Atributos XHTML Si el nombre de una propiedad CSS es compuesto, se modifica un poco:  font-weight será fontWeight  line-height será lineHeight  border-top-style será borderTopStyle  list-style-image será listStyleImage

23 Atributos XHTML var parrafo = document.getElementById("parrafo"); alert(parrafo.style.fontWeight); // muestra "bold"...

24 Atributos XHTML El único atributo XHTML que NO es igual en XHTML y en DOM es class Para obtener la class se usa className var parrafo = document.getElementById("parrafo"); alert(parrafo.class); // muestra "undefined" alert(parrafo.className); // muestra "normal"...