El DOM (document object model) marca la escructura de la página
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 18
Visitas el mes pasado: 63
Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:
Por elegir aprende-web
Aprende-web está diseñado a partir de los lenguajes que aquí mismo se enseñan.
By Anyelguti
El Documento o nodo "Document" es el nodo raíz del DOM. En HTML se corresponde con la etiqueta <html> que engloba la página. En XML se corresponde con la etiqueta principal o raíz. Una vez cargada la página podemos acceder a él desde javascript, sin embargo la forma de acceder es distinta en las páginas en HTML de las páginas en XML. Trataremos aquí la forma de acceder al DOM en las páginas HTML.
Gran parte de lo que que tratamos aquí se encuentra más detallado en el manual de javascript, ya que javascript necesita tener acceso al DOM para poder modificar las partes de la página. Nos remitiremos aquí a las principales características del objeto "Document", o nodo raíz del DOM, dejando para el curso javascript la forma de manipular los elementos de la página.
La forma normal de acceder al documento es mediante la palabra clave document Así como el objeto window está implícito y no hace falta ponerlo, con el documento no ocurre lo mismo, y para acceder o modificar cualquier parte del mismo debemos empezar siempre el código por la palabra document.
El documento en HTML tiene una serie de propiedades de tipo array, que nos devuelven un array con todos los elementos que tienen unas ciertas características. Estos son:
Propiedad | Explicación |
---|---|
document.links | Devuelve un array con todos los enlaces que hay en el documento |
document.forms | Devuelve un array con todos los formularios del documento |
document.images | Devuelve un array con todas las imágenes del documento |
document.anchors | Devuelve un array con todos los enlaces tipo referencia (<a name="..">...</a> ) del documento |
Podemos ver con más detalle cómo se utilizan estas propiedades en el manual de javascript página 5.5 Enlaces e Imágenes y en la página 7.1 Acceso al formulario. Aunque no viene explicado en el manual, el acceso a los elementos del array anchors es similar al del array links o images.
Una serie de métodos y propiedades nos permiten manipular los nodos, de forma que podemos buscarlos y guardarlos en variables, acceder a su contenido y atributos, modificarlos, crear nodos nuevos, insertarlos, remplazarlos, eliminarlos, o hacerles una copia.
Los métodos o propiedades se aplican a veces directamente sobre el nodo raíz document y otras veces sobre el nodo tipo element que queremos actuar, el cual lo hemos buscado previamente.
El funcionamiento de las propiedades y métodos que veremos a continuación viene explicado en el curso de javascript, por lo que aquí nos limitaremos simplemente a dar la lista.
Método | Explicación |
---|---|
getElementsByTagName() | Crea un array con todos los elementos cuya etiqueta sea igual a la que se le pasa en el parámetro.
Se aplica normalmente a document . Ej.:parrafos=document.getElementsByName("p") . |
getElementsByName() | Crea un array con todos los elementos cuya atributo name sea igual al que se le pasa en el parámetro.
Se aplica normalmente a document . |
getElementById() | Devuelve el elemento cuyo atributo id sea igual al que se le pasa en el parámetro.
Se aplica normalmente a document . Como el valor de id debe ser único en cada elemento,
sólo puede devolver uno. |
createElement() | Crea un nodo de tipo Element (etiqueta). Se aplica normalmente a document ;
document.createElement(). Como parámetro se pasa el nombre de la etiqueta. |
createTextNode() | Crea un nodo de tipo Text (texto). Se aplica normalmente a document ;
document.createTextNode() . Como parámetro se pasa el texto. |
appendChild() | Inserta un nodo dentro de otro, de manera que se aplica al nodo padre, y como parámetro pasamos el
nodo hijo: nodoPadre.appendChild(nodoHijo) . Si el nodo padre tiene otros nodos hijos, el
nuevo se coloca el último de todos. |
insertBefore() | Inserta un nodo delante de otro de referencia, Lo insertamos en el nodo padre del de referencia,
y pasamos como primer parámetro el nodo nuevo, y como segundo el de referencia:
nodoPadre.insertBefore(nodoNuevo,nodoRef); |
replaceChild() | Remplaza un nodo (nodoNuevo) por otro (nodoRef). Lo insertamos en el nodo padre del nodoRef,
y pasamos como primer parámetro el nodo nuevo, y como segundo el de referencia:
nodoPadre.replaceChild(nodoNuevo,nodoRef); |
removeChild() | Elimina un nodo. Lo aplicamos en el nodo padre del nodo a eliminar:
nodoPadre.removeChild(nodo); |
hasChildNodes() | Aplicado a un nodo, comprueba si éste tiene nodos hijos. (devuelve true o false). |
getAtribute() | Lee el valor de un atributo. Se aplica al nodo que contiene el atributo.
Ej.:valor=enlace.getAttribute("href") . |
setAtribute() | crea y define el valor de un nuevo atributo. Se aplica al nodo que contendrá el atributo.
Pasamos dos parámetros, el primero el nombre del atributo, y el segundo su valor:
Ej.:valor=enlace.getAttribute("target","_blank"). |
removeAtribute() | elimina un atributo. Se aplica al nodo que contiene el atributo.
Pasamos dos parámetros, el primero el nombre del atributo, y el segundo su valor:
Ej.:enlace.removeAttribute("class"). |
Para manipular los nodos también podemos usar una serie de propiedades que nos permiten acceder a ellos, o cambiar su contenido. Estos son:
Propiedad | Explicación |
---|---|
innerHTML | Devuelve o cambia el contenido en lenguaje HTML que contiene el nodo o etiqueta , pudiendo
así crear nuevos nodos dentro de uno ya existente. ej.;
elemento.innerHTML="<h3>hola mundo</h3>" |
parentNode | Devuelve el elemento padre del nodo al que se le aplica. (sólo lectura). |
firstChild | Devuelve el primer elemento hijo del nodo al que se le aplica. (sólo lectura). |
lastChild | Devuelve el último elemento hijo del nodo al que se le aplica. (sólo lectura). |
nodeName | Devuelve el nombre (nombre de etiqueta o atributo) del nodo al que se le aplica (en mayúsculas). |
nodeType | Devuelve el tipo de nodo al que se le aplica. |
nodeValue | Devuelve el valor del nodo al que se le aplica. (valor del atributo "value", o el texto en nodos de texto). |
attributes | Devuelve un array con todos los atributos del nodo al que se le aplica (sólo lectura). |
childNodes | Devuelve un array con todos los nodos hijo del nodo al que se le aplica (sólo lectura). |
tagName | Devuelve el nombre en mayúsculas de la etiqueta del nodo al que se le aplica (sólo lectura). |
previousSibling | Devuelve el elemento inmediatamente anterior al que se le aplica. |
NexSibling | Devuelve el elemento inmediatamente posterior al que se le aplica. |
style | mediante la propiedad style podemos acceder al código CSS y ver, modificar o crear
nuevo código para el nodo o etiqueta al que se le aplica. |
this | Devuelve el mismo elemento al que se le aplica o en el que está (por ejemplo en eventos) |
Esto es sólo una lista de los métodos y propiedades para manipular de una manera general cualquier parte del documento. Para ver más concretamente cómo utilizar estas propiedades y métodos, consultar el manual de javascript, y más concretamente el apartado 5. Acceso al DOM donde se explica cómo usar la mayoría de estos métodos y propiedades.
El acceso a atributos se puede hacer también por el nombre del atributo. El nombre del atributo se convierte en una propiedad con la que podemos ver, modificar o crear un atributo.
Hemos dejado de explicar otras formas más concretas de acceder a ciertos elementos, como son los formularios, ya que viene explicado en el curso javascript apartado 7. Formularios.
Tampoco explicamos cómo acceder mediante los eventos de javascript, ya que consideramos que éstos forman parte más del lenguaje de javascript que del DOM. Cómo manipular los eventos de Javascript viene explicado en el manual javascript apartado 6. Eventos.
El objeto document tiene además otra serie de propiedades que permiten obtener información o cambiar algun aspecto del documento.
Éstas se aplican directamente sobre el nodo raíz o document y son las siguientes:
Propiedad | Explicación |
---|---|
cookie | Devuelve todas las parejas nombre/valor de las cookies guardadas, como una cadena de texto.
ej.;misCookies=document.cookie . |
domain | Devuelve el dominio del servidor que ha cargado el documento. |
lastModified | Devuelve la fecha de la última modificación del documento. |
readyState | Devuelve el estado de carga del documento. |
referrer | Devuelve la URL del enlace que ha cargado el documento actual. |
title | Permite cambiar o devuelve el título de la página actual (etiqueta title del head ). |
URL | Devuelve la URL completa de la página actual. |
clientHeight | Devuelve la altura de la parte visible del documento (en píxeles). |
clientWidth | Devuelve la anchura de la parte visible del documento (en píxeles). |
scrollHeight | Devuelve la altura total del documento (en pixels), incluyendo las zonas ocultas por barras de desplazamiento. |
scrollWidth | Devuelve la anchura total del documento (en pixels), incluyendo las zonas ocultas por barras de desplazamiento. |
scrollTop | Devuelve la distancia entre el borde superior del documento en sí y el borde superior de la parte que vemos del documento. |
scrollLeft | Devuelve la distancia entre el borde izquierdo del documento en sí y el borde izquierdo de la parte que vemos del documento. |
Existen además en javascript otros muchos métodos y propiedades que poder utilizar para modificar o acceder a la página. La mayoría de éstos están asociados a las clases de objetos de javascript, y se explican en el curso de javascript. Hay sin embargo algunos métodos que dependen del objeto window o del nodo document. Aparte de los vistos anteriormente están estos otros métodos; éstos pueden aplicarse a cualquier elemento
Método | Explicación |
---|---|
toString() | Convierte cualquier elemento en una cadena de texto. ej.;
cadena=elemento.toString() |
focus() | Pone el foco del documento en el elemento al que se le aplica |
blur() | Quita el foco del documento del elemento al que se le aplica |
click() | Tiene el mismo efecto que si se efectuara un click de ratón en el elemento al que se le aplica. |
En la siguiente página veremos Cómo se accede al DOM desde un documento XML
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com