DOM. DOM = Document Object Model Permite acceder y manipular las páginas XHTML DOM transforma los...
-
Upload
prospero-allende -
Category
Documents
-
view
106 -
download
0
Transcript of DOM. DOM = Document Object Model Permite acceder y manipular las páginas XHTML DOM transforma los...
![Page 1: DOM. DOM = Document Object Model Permite acceder y manipular las páginas XHTML DOM transforma los documentos XHTML en un conjunto de elementos llamados.](https://reader036.fdocumento.com/reader036/viewer/2022081518/5528bde4497959977d8fb7c1/html5/thumbnails/1.jpg)
DOM
![Page 2: DOM. DOM = Document Object Model Permite acceder y manipular las páginas XHTML DOM transforma los documentos XHTML en un conjunto de elementos llamados.](https://reader036.fdocumento.com/reader036/viewer/2022081518/5528bde4497959977d8fb7c1/html5/thumbnails/2.jpg)
DOM
DOM = Document Object Model Permite acceder y manipular las páginas
XHTML DOM transforma los documentos XHTML en un
conjunto de elementos llamados nodos
![Page 3: DOM. DOM = Document Object Model Permite acceder y manipular las páginas XHTML DOM transforma los documentos XHTML en un conjunto de elementos llamados.](https://reader036.fdocumento.com/reader036/viewer/2022081518/5528bde4497959977d8fb7c1/html5/thumbnails/3.jpg)
Nodos
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Página sencilla</title>
</head>
<body>
<p>Esta página es <strong>muy sencilla</strong></p>
</body>
</html>
![Page 4: DOM. DOM = Document Object Model Permite acceder y manipular las páginas XHTML DOM transforma los documentos XHTML en un conjunto de elementos llamados.](https://reader036.fdocumento.com/reader036/viewer/2022081518/5528bde4497959977d8fb7c1/html5/thumbnails/4.jpg)
Nodos
![Page 5: DOM. DOM = Document Object Model Permite acceder y manipular las páginas XHTML DOM transforma los documentos XHTML en un conjunto de elementos llamados.](https://reader036.fdocumento.com/reader036/viewer/2022081518/5528bde4497959977d8fb7c1/html5/thumbnails/5.jpg)
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.
![Page 6: DOM. DOM = Document Object Model Permite acceder y manipular las páginas XHTML DOM transforma los documentos XHTML en un conjunto de elementos llamados.](https://reader036.fdocumento.com/reader036/viewer/2022081518/5528bde4497959977d8fb7c1/html5/thumbnails/6.jpg)
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.
![Page 7: DOM. DOM = Document Object Model Permite acceder y manipular las páginas XHTML DOM transforma los documentos XHTML en un conjunto de elementos llamados.](https://reader036.fdocumento.com/reader036/viewer/2022081518/5528bde4497959977d8fb7c1/html5/thumbnails/7.jpg)
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
![Page 8: DOM. DOM = Document Object Model Permite acceder y manipular las páginas XHTML DOM transforma los documentos XHTML en un conjunto de elementos llamados.](https://reader036.fdocumento.com/reader036/viewer/2022081518/5528bde4497959977d8fb7c1/html5/thumbnails/8.jpg)
Tipos de Nodos
Otros tipos de nodos son:
DocumentType, CDataSection, DocumentFragment, Entity, EntityReference, ProcessingInstruction, Notation
![Page 9: DOM. DOM = Document Object Model Permite acceder y manipular las páginas XHTML DOM transforma los documentos XHTML en un conjunto de elementos llamados.](https://reader036.fdocumento.com/reader036/viewer/2022081518/5528bde4497959977d8fb7c1/html5/thumbnails/9.jpg)
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.
![Page 10: DOM. DOM = Document Object Model Permite acceder y manipular las páginas XHTML DOM transforma los documentos XHTML en un conjunto de elementos llamados.](https://reader036.fdocumento.com/reader036/viewer/2022081518/5528bde4497959977d8fb7c1/html5/thumbnails/10.jpg)
Acceso Directo a los Nodos
Se utilizan los siguientes métodos: getElementsByTagName(etiqueta)
getElementsByName(nombre)
getElementById(id)
![Page 11: DOM. DOM = Document Object Model Permite acceder y manipular las páginas XHTML DOM transforma los documentos XHTML en un conjunto de elementos llamados.](https://reader036.fdocumento.com/reader036/viewer/2022081518/5528bde4497959977d8fb7c1/html5/thumbnails/11.jpg)
Creación de Nodos
Requiere 4 pasos:
![Page 12: DOM. DOM = Document Object Model Permite acceder y manipular las páginas XHTML DOM transforma los documentos XHTML en un conjunto de elementos llamados.](https://reader036.fdocumento.com/reader036/viewer/2022081518/5528bde4497959977d8fb7c1/html5/thumbnails/12.jpg)
Creación de Nodos
Requiere 4 pasos:
1. Creación de un nodo tipo Element
![Page 13: DOM. DOM = Document Object Model Permite acceder y manipular las páginas XHTML DOM transforma los documentos XHTML en un conjunto de elementos llamados.](https://reader036.fdocumento.com/reader036/viewer/2022081518/5528bde4497959977d8fb7c1/html5/thumbnails/13.jpg)
Creación de Nodos
Requiere 4 pasos:
1. Creación de un nodo tipo Element
2. Creación de un nodo tipo Text
![Page 14: DOM. DOM = Document Object Model Permite acceder y manipular las páginas XHTML DOM transforma los documentos XHTML en un conjunto de elementos llamados.](https://reader036.fdocumento.com/reader036/viewer/2022081518/5528bde4497959977d8fb7c1/html5/thumbnails/14.jpg)
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
![Page 15: DOM. DOM = Document Object Model Permite acceder y manipular las páginas XHTML DOM transforma los documentos XHTML en un conjunto de elementos llamados.](https://reader036.fdocumento.com/reader036/viewer/2022081518/5528bde4497959977d8fb7c1/html5/thumbnails/15.jpg)
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
![Page 16: DOM. DOM = Document Object Model Permite acceder y manipular las páginas XHTML DOM transforma los documentos XHTML en un conjunto de elementos llamados.](https://reader036.fdocumento.com/reader036/viewer/2022081518/5528bde4497959977d8fb7c1/html5/thumbnails/16.jpg)
Creación de Nodos
// Crear nodo de tipo Elementvar parrafo = document.createElement("p"); // Crear nodo de tipo Textvar contenido = document.createTextNode("Hola Mundo!");
// Añadir el nodo Text como hijo del nodo Elementparrafo.appendChild(contenido); // Añadir el nodo Element como hijo de la paginadocument.body.appendChild(parrafo);
![Page 17: DOM. DOM = Document Object Model Permite acceder y manipular las páginas XHTML DOM transforma los documentos XHTML en un conjunto de elementos llamados.](https://reader036.fdocumento.com/reader036/viewer/2022081518/5528bde4497959977d8fb7c1/html5/thumbnails/17.jpg)
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
![Page 18: DOM. DOM = Document Object Model Permite acceder y manipular las páginas XHTML DOM transforma los documentos XHTML en un conjunto de elementos llamados.](https://reader036.fdocumento.com/reader036/viewer/2022081518/5528bde4497959977d8fb7c1/html5/thumbnails/18.jpg)
Eliminación de Nodos
Se requiere de la funcion removeChild(nodo)
var parrafo = document.getElementById("provisional");
parrafo.parentNode.removeChild(parrafo);
<p id="provisional">...</p>
![Page 19: DOM. DOM = Document Object Model Permite acceder y manipular las páginas XHTML DOM transforma los documentos XHTML en un conjunto de elementos llamados.](https://reader036.fdocumento.com/reader036/viewer/2022081518/5528bde4497959977d8fb7c1/html5/thumbnails/19.jpg)
Atributos XHTML
Mediante DOM, es posible acceder a todos los atributos XHTML y todas las propiedades CSS
Los atributos XHTML de los elementos de la página se transforma automáticamente en propiedades de los nodos
![Page 20: DOM. DOM = Document Object Model Permite acceder y manipular las páginas XHTML DOM transforma los documentos XHTML en un conjunto de elementos llamados.](https://reader036.fdocumento.com/reader036/viewer/2022081518/5528bde4497959977d8fb7c1/html5/thumbnails/20.jpg)
Atributos XHTML
var enlace = document.getElementById("enlace");
alert(enlace.href); // muestra http://www...com
<a id="enlace" href="http://www...com">Enlace</a>
![Page 21: DOM. DOM = Document Object Model Permite acceder y manipular las páginas XHTML DOM transforma los documentos XHTML en un conjunto de elementos llamados.](https://reader036.fdocumento.com/reader036/viewer/2022081518/5528bde4497959977d8fb7c1/html5/thumbnails/21.jpg)
Atributos XHTML
Para obtener cualquier propiedad CSS del nodo, se debe utilizar el atributo style
var imagen = document.getElementById("imagen");
alert(imagen.style.margin);
<img id="imagen" style="margin:0; border:0;" src="logo.png" />
![Page 22: DOM. DOM = Document Object Model Permite acceder y manipular las páginas XHTML DOM transforma los documentos XHTML en un conjunto de elementos llamados.](https://reader036.fdocumento.com/reader036/viewer/2022081518/5528bde4497959977d8fb7c1/html5/thumbnails/22.jpg)
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
![Page 23: DOM. DOM = Document Object Model Permite acceder y manipular las páginas XHTML DOM transforma los documentos XHTML en un conjunto de elementos llamados.](https://reader036.fdocumento.com/reader036/viewer/2022081518/5528bde4497959977d8fb7c1/html5/thumbnails/23.jpg)
Atributos XHTML
var parrafo = document.getElementById("parrafo");
alert(parrafo.style.fontWeight); // muestra "bold"
<p id="parrafo" style="font-weight: bold;">...</p>
![Page 24: DOM. DOM = Document Object Model Permite acceder y manipular las páginas XHTML DOM transforma los documentos XHTML en un conjunto de elementos llamados.](https://reader036.fdocumento.com/reader036/viewer/2022081518/5528bde4497959977d8fb7c1/html5/thumbnails/24.jpg)
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"
<p id="parrafo" class="normal">...</p>