Entendido.

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

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

Manuales para la creación y diseño de páginas web

Básicos					Avanzados					Practicas
Inicio	HTML	CSS	Complementos	Gestores de Contenido	Javascript	PHP básico	Nuevas Tendencias	Programación	Librerías	Mi primera web	Prácticas Web

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: 13-07-2018.

Visitas este mes: 18

Visitas el mes pasado: 63

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.

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

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