Logo

Complementos y nuevas tendencias en la programación web

Manuales web avanzados

Por Anyelguti

Este curso forma parte del proyecto Aprende Web

logo

DOM III

El Documento en HTML

Acceso al Documento

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

Propiedades tipo array

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:

Propiedades tipo array
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 curso 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 curso, el acceso a los elementos del array anchors es similar al del array links o images.

manipulación de nodos.

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étodos de manipulación del DOM
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:

Propiedades de manipulación del DOM
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, 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 menera general cualquier parte del documento. Para ver más concretamente cómo utilizar estas propiedades y métodos, consultar el curso 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 curso javascript apartado 6. Eventos.

Otras propiedades del documento

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:

Propiedades de informacion del documento
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.

Otros métodos

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ás métodos del documento
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

Acceso al DOM en XML



Manual de DOM

Anterior siguiente     Siguiente siguiente

Ver estadísticas

Free counter and web stats
Visita nuestro foro:

Puedes consultar tus dudas y sugerencias:

sobre el foro (info y entrar)

Página creada por ANYELGUTI.

Manda tus sugerencias:
aprendeweb@ymail.com ... manda un correo