Dom

DOM

Prof. María Zeballos

Objetivos:Comprender el concepto del DOMAnalizar la estructura Jerárquica del

DOMConocer objetos y métodos

proporcionados por JavaScript para el manejo del DOM

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.

Á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.

Á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> Por su aspecto, la unión de todos los nodos se llama árbol de nodos.</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

Árbol de nodos


DocumentoXHTML

Elemento head

Elemento body



p


nodos se llama

Elemento strong


Árbol de nodos


DocumentoXHTML

Elemento head

Elemento body



p


nodos se llama

Elemento strong


Árbol de nodos


DocumentoXHTML

Elemento head

Elemento body



p


nodos se llama

Elemento strong


Árbol de nodos


DocumentoXHTML

Elemento head

Elemento body



p


nodos se llama

Elemento Strong


Árbol de nodos


DocumentoXHTML

Elemento head

Elemento body



p


nodos se llama

Elemento strong


Á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> Por su aspecto, la unión de todos los nodos se llama árbol de nodos.p></body></html>

DocumentoXHTML

Elemento head

Elemento body



p


nodos se llama

Elemento strong


Árbol de nodos


DocumentoXHTML

Elemento head

Elemento body



p


nodos se llama

Elemento strong


Á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> Por su aspecto, la unión de todos los nodos se llama árbol de nodos.</body></html>

DocumentoXHTML

Elemento head

Elemento body



p


nodos se llama

Elemento strong


Á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> Por su aspecto, la unión de todos los nodos se llama árbol de nodos. </body></html>

DocumentoXHTML

Elemento head

Elemento body



p


nodos se llama

Elemento strong


Los principales nodos de un documento XHTML son:

Document

Element

Text

Attr

Comment


Document

Element

Text

Attr

Comment

DocumentNodo raíz, del que se derivan todos

los demás nodos.


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.


Document

Element

Text

Attr

Comment

TextNodo que contiene el texto

encerrado por una etiqueta XHTML. Deriva del nodo element.


Document

Element

Text

Attr

Comment

AttrSe crea un nodo attr para cada par

atributo=valor, contenido en las etiquetas.


Document

Element

Text

Attr

Comment

CommentSe crea un nodo de este tipo para

cada uno de los comentarios incluidos en la página.

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.

getElementsByTagName()getElementsByName()

getElementById()

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.


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


•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.

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)

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”

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”)

Documents

Dom