Entendido.

Este sitio utiliza cookies para analizar la navegación. Si continúa navegando se entiende que acepta su uso. Ver más detalles.";

Logo

Aprende Web

Crea y diseña tus sitios en la Web.

Manual de DOM

El DOM (document object model) marca la escructura de la página


Y ahora tambien aprende a programar en C++ con Aprende Web C++

logo rss RSS. Suscribir canal.

Buscar en Aprende Web

Traducir página

Visita nuestro blog:

bolg.aprende-web.net

y entérate de las novedades o deja un comentario.

Dudas y sugerencias:

aprendeweb@aprende-web.net





Sobre ésta página

Ültima modificación: 29-01-2016.

Visitas este mes: 118

Visitas el mes pasado: 396

logo
WEB-GRAFÍA

Mi agradecimiento a las siguientes páginas Web. en las cuales me he basado para la elaboración de este manual:


Introducción a XML
Desarrollo Web
DOM
mozilla.org
php: DOM manual
php.net
Document Object Model (DOM) Level 1 Specification
W3C.org
Especificación del Modelo de Objetos del Documento (DOM), Nivel 1
Traducción de W3C: conclase.net
HTML DOM Tutorial
w3schools.com
XML DOM Tutorial
w3schools.com

Donativos

Si este sitio te parece interesante puedes contribuir con una pequeña aportación.




DOM (III)

El Documento en HTML

imagen dom

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


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


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


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


imprimir esta página

Página creada por ANYELGUTI.

Sugerencias: aprendeweb@aprende-web.net. Envia un manda un correo

Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog

Más sobre anyelguti en http://anyelguti.16mb.com