Recomendados
Más contenido relacionado
La actualidad más candente
Destacado
Similar a Dom
Similar a Dom (20)
Más de mariazeballos
Más de mariazeballos (19)
Dom
- 2. Objetivos: Comprender el concepto del DOM Analizar la estructura Jerárquica del DOM Conocer objetos y métodos proporcionados por JavaScript para el manejo del DOM
- 3. 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.
- 4. Á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.
- 5. Á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> Documento XHTML Elemento head Elemento body Texto Árbol de nodos Elemento title Elemento p Texto Por su aspecto, la unión de todos los nodos se llama Elemento strong Texto árbol de nodos
- 6. Á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> Documento XHTML Elemento head Elemento body Texto Árbol de nodos Elemento title Elemento p Texto Por su aspecto, la unión de todos los nodos se llama Elemento strong Texto árbol de nodos
- 7. Á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> Documento XHTML Elemento head Elemento body Texto Árbol de nodos Elemento title Elemento p Texto Por su aspecto, la unión de todos los nodos se llama Elemento strong Texto árbol de nodos
- 8. Á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> Documento XHTML Elemento head Elemento body Texto Árbol de nodos Elemento title Elemento p Texto Por su aspecto, la unión de todos los nodos se llama Elemento strong Texto árbol de nodos
- 9. Á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> Documento XHTML Elemento head Elemento body Texto Árbol de nodos Elemento title Elemento p Texto Por su aspecto, la unión de todos los nodos se llama Elemento Strong Texto árbol de nodos
- 10. Á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> Documento XHTML Elemento head Elemento body Texto Árbol de nodos Elemento title Elemento p Texto Por su aspecto, la unión de todos los nodos se llama Elemento strong Texto árbol de nodos
- 11. Á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> Documento XHTML Elemento head Elemento body Texto Árbol de nodos Elemento title Elemento p Texto Por su aspecto, la unión de todos los nodos se llama Elemento strong Texto árbol de nodos
- 12. Á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> Documento XHTML Elemento head Elemento body Texto Árbol de nodos Elemento title Elemento p Texto Por su aspecto, la unión de todos los nodos se llama Elemento strong Texto árbol de nodos
- 13. Á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> Documento XHTML Elemento head Elemento body Texto Árbol de nodos Elemento title Elemento p Texto Por su aspecto, la unión de todos los nodos se llama Elemento strong Texto árbol de nodos
- 14. Á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> Documento XHTML Elemento head Elemento body Texto Árbol de nodos Elemento title Elemento p Texto Por su aspecto, la unión de todos los nodos se llama Elemento strong Texto árbol de nodos
- 15. Los principales nodos de un documento XHTML son: Document Element Text Attr Comment
- 16. Los principales nodos de un documento XHTML son: Document Element Text Attr Comment Document Nodo raíz, del que se derivan todos los demás nodos.
- 17. Los principales nodos de un documento XHTML son: Document Element Text Attr Comment Element Existe un nodo elemento para cada etiqueta XHTML. Es el único tipo de nodos que puede tener atributos. De él pueden derivar otros nodos.
- 18. Los principales nodos de un documento XHTML son: Document Element Text Attr Comment Text Nodo que contiene el texto encerrado por una etiqueta XHTML. Deriva del nodo element.
- 19. Los principales nodos de un documento XHTML son: Document Element Text Attr Comment Attr Se crea un nodo attr para cada par atributo=valor, contenido en las etiquetas.
- 20. Los principales nodos de un documento XHTML son: Document Element Text Attr Comment Comment Se crea un nodo de este tipo para cada uno de los comentarios incluidos en la página.
- 21. 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.
- 23. 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.
- 24. 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
- 25. 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.
- 26. 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)
- 27. 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”
- 28. 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”)