Dom
-
Upload
mariazeballos -
Category
Documents
-
view
587 -
download
5
Transcript of Dom
![Page 1: Dom](https://reader030.fdocuments.ec/reader030/viewer/2022020123/5597043d1a28ab724f8b4792/html5/thumbnails/1.jpg)
DOM
Prof. María Zeballos
![Page 2: Dom](https://reader030.fdocuments.ec/reader030/viewer/2022020123/5597043d1a28ab724f8b4792/html5/thumbnails/2.jpg)
Objetivos:Comprender el concepto del DOMAnalizar la estructura Jerárquica del
DOMConocer objetos y métodos
proporcionados por JavaScript para el manejo del DOM
![Page 3: Dom](https://reader030.fdocuments.ec/reader030/viewer/2022020123/5597043d1a28ab724f8b4792/html5/thumbnails/3.jpg)
Document Objet Model: Modelo de Objetos del Documento
¿Qué es el DOM?
El DOM es una estructura de objetos generada por el navegador cuando la página XHTML se carga por completo. Permite acceder y manipular las páginas XHTML, cambiando dinámicamente tanto el contenido como el aspecto de la página.
![Page 4: Dom](https://reader030.fdocuments.ec/reader030/viewer/2022020123/5597043d1a28ab724f8b4792/html5/thumbnails/4.jpg)
Árbol de nodos
DOM transforma todo el documento XHTML en un conjunto de elementos interconectados, llamados NODOS.
Por su aspecto, la unión de todos los nodos se llama árbol de nodos.
![Page 5: Dom](https://reader030.fdocuments.ec/reader030/viewer/2022020123/5597043d1a28ab724f8b4792/html5/thumbnails/5.jpg)
Árbol de nodos
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"><head><title>Árbol de nodos</title></head><body><p> Por su aspecto, la unión de todos los nodos se llama <strong>árbol de nodos.</ strong ></p></body></html>
DocumentoXHTML
Elemento head
Elemento body
TextoÁrbol de nodos
Elemento title Elemento
p
TextoPor su aspecto, la unión de todos los
nodos se llama
Elemento strong
Textoárbol de nodos
![Page 6: Dom](https://reader030.fdocuments.ec/reader030/viewer/2022020123/5597043d1a28ab724f8b4792/html5/thumbnails/6.jpg)
Árbol de nodos
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"><head><title>Árbol de nodos</title></head><body><p> Por su aspecto, la unión de todos los nodos se llama <strong>árbol de nodos.</ strong ></p></body></html>
DocumentoXHTML
Elemento head
Elemento body
TextoÁrbol de nodos
Elemento title Elemento
p
TextoPor su aspecto, la unión de todos los
nodos se llama
Elemento strong
Textoárbol de nodos
![Page 7: Dom](https://reader030.fdocuments.ec/reader030/viewer/2022020123/5597043d1a28ab724f8b4792/html5/thumbnails/7.jpg)
Árbol de nodos
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"><head><title>Árbol de nodos</title></head><body><p> Por su aspecto, la unión de todos los nodos se llama <strong>árbol de nodos.</ strong ></p></body></html>
DocumentoXHTML
Elemento head
Elemento body
TextoÁrbol de nodos
Elemento title Elemento
p
TextoPor su aspecto, la unión de todos los
nodos se llama
Elemento strong
Textoárbol de nodos
![Page 8: Dom](https://reader030.fdocuments.ec/reader030/viewer/2022020123/5597043d1a28ab724f8b4792/html5/thumbnails/8.jpg)
Árbol de nodos
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"><head><title>Árbol de nodos</title></head><body><p> Por su aspecto, la unión de todos los nodos se llama <strong>árbol de nodos.</ strong ></p></body></html>
DocumentoXHTML
Elemento head
Elemento body
TextoÁrbol de nodos
Elemento title Elemento
p
TextoPor su aspecto, la unión de todos los
nodos se llama
Elemento strong
Textoárbol de nodos
![Page 9: Dom](https://reader030.fdocuments.ec/reader030/viewer/2022020123/5597043d1a28ab724f8b4792/html5/thumbnails/9.jpg)
Árbol de nodos
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"><head><title>Árbol de nodos</title></head><body><p> Por su aspecto, la unión de todos los nodos se llama <strong>árbol de nodos.</ strong ></p></body></html>
DocumentoXHTML
Elemento head
Elemento body
TextoÁrbol de nodos
Elemento title Elemento
p
TextoPor su aspecto, la unión de todos los
nodos se llama
Elemento Strong
Textoárbol de nodos
![Page 10: Dom](https://reader030.fdocuments.ec/reader030/viewer/2022020123/5597043d1a28ab724f8b4792/html5/thumbnails/10.jpg)
Árbol de nodos
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"><head><title>Árbol de nodos</title></head><body><p> Por su aspecto, la unión de todos los nodos se llama <strong>árbol de nodos.</ strong ></p></body></html>
DocumentoXHTML
Elemento head
Elemento body
TextoÁrbol de nodos
Elemento title Elemento
p
TextoPor su aspecto, la unión de todos los
nodos se llama
Elemento strong
Textoárbol de nodos
![Page 11: Dom](https://reader030.fdocuments.ec/reader030/viewer/2022020123/5597043d1a28ab724f8b4792/html5/thumbnails/11.jpg)
Árbol de nodos
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"><head><title>Árbol de nodos</title></head><body><p> Por su aspecto, la unión de todos los nodos se llama <strong>árbol de nodos.</ strong >p></body></html>
DocumentoXHTML
Elemento head
Elemento body
TextoÁrbol de nodos
Elemento title Elemento
p
TextoPor su aspecto, la unión de todos los
nodos se llama
Elemento strong
Textoárbol de nodos
![Page 12: Dom](https://reader030.fdocuments.ec/reader030/viewer/2022020123/5597043d1a28ab724f8b4792/html5/thumbnails/12.jpg)
Árbol de nodos
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"><head><title>Árbol de nodos</title></head><body><p> Por su aspecto, la unión de todos los nodos se llama <strong>árbol de nodos.</ strong ></p></body></html>
DocumentoXHTML
Elemento head
Elemento body
TextoÁrbol de nodos
Elemento title Elemento
p
TextoPor su aspecto, la unión de todos los
nodos se llama
Elemento strong
Textoárbol de nodos
![Page 13: Dom](https://reader030.fdocuments.ec/reader030/viewer/2022020123/5597043d1a28ab724f8b4792/html5/thumbnails/13.jpg)
Árbol de nodos
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"><head><title>Árbol de nodos</title></head><body><p> Por su aspecto, la unión de todos los nodos se llama <strong> árbol de nodos.</ strong ></p></body></html>
DocumentoXHTML
Elemento head
Elemento body
TextoÁrbol de nodos
Elemento title Elemento
p
TextoPor su aspecto, la unión de todos los
nodos se llama
Elemento strong
Textoárbol de nodos
![Page 14: Dom](https://reader030.fdocuments.ec/reader030/viewer/2022020123/5597043d1a28ab724f8b4792/html5/thumbnails/14.jpg)
Árbol de nodos
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es"><head><title>Árbol de nodos</title></head><body><p> Por su aspecto, la unión de todos los nodos se llama <strong> árbol de nodos.</ strong> </p></body></html>
DocumentoXHTML
Elemento head
Elemento body
TextoÁrbol de nodos
Elemento title Elemento
p
TextoPor su aspecto, la unión de todos los
nodos se llama
Elemento strong
Textoárbol de nodos
![Page 15: Dom](https://reader030.fdocuments.ec/reader030/viewer/2022020123/5597043d1a28ab724f8b4792/html5/thumbnails/15.jpg)
Los principales nodos de un documento XHTML son:
Document
Element
Text
Attr
Comment
![Page 16: Dom](https://reader030.fdocuments.ec/reader030/viewer/2022020123/5597043d1a28ab724f8b4792/html5/thumbnails/16.jpg)
Los principales nodos de un documento XHTML son:
Document
Element
Text
Attr
Comment
DocumentNodo raíz, del que se derivan todos
los demás nodos.
![Page 17: Dom](https://reader030.fdocuments.ec/reader030/viewer/2022020123/5597043d1a28ab724f8b4792/html5/thumbnails/17.jpg)
Los principales nodos de un documento XHTML son:
Document
Element
Text
Attr
Comment
ElementExiste un nodo elemento para cada
etiqueta XHTML. Es el único tipo de nodos que puede
tener atributos.De él pueden derivar otros nodos.
![Page 18: Dom](https://reader030.fdocuments.ec/reader030/viewer/2022020123/5597043d1a28ab724f8b4792/html5/thumbnails/18.jpg)
Los principales nodos de un documento XHTML son:
Document
Element
Text
Attr
Comment
TextNodo que contiene el texto
encerrado por una etiqueta XHTML. Deriva del nodo element.
![Page 19: Dom](https://reader030.fdocuments.ec/reader030/viewer/2022020123/5597043d1a28ab724f8b4792/html5/thumbnails/19.jpg)
Los principales nodos de un documento XHTML son:
Document
Element
Text
Attr
Comment
AttrSe crea un nodo attr para cada par
atributo=valor, contenido en las etiquetas.
![Page 20: Dom](https://reader030.fdocuments.ec/reader030/viewer/2022020123/5597043d1a28ab724f8b4792/html5/thumbnails/20.jpg)
Los principales nodos de un documento XHTML son:
Document
Element
Text
Attr
Comment
CommentSe crea un nodo de este tipo para
cada uno de los comentarios incluidos en la página.
![Page 21: Dom](https://reader030.fdocuments.ec/reader030/viewer/2022020123/5597043d1a28ab724f8b4792/html5/thumbnails/21.jpg)
JavaScript nos permite acceder a los diferentes elementos de una página web, para eliminarlos, modificarlos, crear nuevos elementos y colocarlos en la página, etc.
![Page 22: Dom](https://reader030.fdocuments.ec/reader030/viewer/2022020123/5597043d1a28ab724f8b4792/html5/thumbnails/22.jpg)
getElementsByTagName()getElementsByName()
getElementById()
![Page 23: Dom](https://reader030.fdocuments.ec/reader030/viewer/2022020123/5597043d1a28ab724f8b4792/html5/thumbnails/23.jpg)
Nombre_objeto.getElementsByTagName(nombre-etiqueta)
•Tiene como argumento el nombre de una etiqueta XHTML.
•Permite obtener todos los elementos cuya etiqueta coincida con el argumento que se le pasa y que se encuentren en el objeto desde el cual es invocado.
![Page 24: Dom](https://reader030.fdocuments.ec/reader030/viewer/2022020123/5597043d1a28ab724f8b4792/html5/thumbnails/24.jpg)
Nombre_objeto.getElementsByTagName(nombre-etiqueta)
document.getElementsByTagName(“a”)Obtiene todos los enlaces de la página
parrafo2.getElementsByTagName(“a”)Obtiene todos los enlaces del que se encuentren en el objeto
parrafo2
![Page 25: Dom](https://reader030.fdocuments.ec/reader030/viewer/2022020123/5597043d1a28ab724f8b4792/html5/thumbnails/25.jpg)
Nombre_objeto.getElementsByTagName(nombre-etiqueta)
•Tiene como argumento el nombre de una etiqueta XHTML.
•Permite obtener todos los elementos cuya etiqueta coincida con el argumento que se le pasa y que se encuentren en el objeto desde el cual es invocado.
•Como devuelve una colección de elementos, el valor devuelto es un vector de nodos DOM.
![Page 26: Dom](https://reader030.fdocuments.ec/reader030/viewer/2022020123/5597043d1a28ab724f8b4792/html5/thumbnails/26.jpg)
Nombre_objeto.getElementsByName(“texto”)
•Su argumento es el valor del atributo name (atributo de etiquetas XHTML).
•Permite obtener el o los elementos cuyo valor del atributo name coincida con el argumento que se le pasa. (Recordemos que en el caso de los radiobutton hay varios elementos con el mismo atributo name)
![Page 27: Dom](https://reader030.fdocuments.ec/reader030/viewer/2022020123/5597043d1a28ab724f8b4792/html5/thumbnails/27.jpg)
Nombre_objeto.getElementsByName(“texto”)
•Su argumento es el valor del atributo name (atributo de etiquetas XHTML).
•Permite obtener el o los elementos cuyo valor del atributo name coincida con el argumento que se le pasa. (Recordemos que en el caso de los radiobutton hay varios elementos con el mismo atributo name).
document.getElementsByName(“intro”)
Devuelve el elemento cuyo atributo name sea
igual a “intro”
![Page 28: Dom](https://reader030.fdocuments.ec/reader030/viewer/2022020123/5597043d1a28ab724f8b4792/html5/thumbnails/28.jpg)
Nombre_objeto.getElementById(“texto”)
•Su argumento es el valor del atributo ID (atributo de etiquetas XHTML).
•Permite obtener directamente el elemento cuyo valor del atributo id coincida con el argumento que se le pasa. (Recordemos que en el caso de los radiobutton hay varios elementos con el mismo atributo name).
document.getElementsById(“intro”)
![Page 29: Dom](https://reader030.fdocuments.ec/reader030/viewer/2022020123/5597043d1a28ab724f8b4792/html5/thumbnails/29.jpg)