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 Javascript

Javascript: lenguaje interactivo para dinamizar la web.

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: 29-01-2016.

Visitas este mes: 37

Visitas el mes pasado: 68

WEB-GRAFÍA

Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:

Desarrollo Web: manual de Javascript: Desarrollo Web, por Miguel Angel Álvarez
Libros Web: introducción a Javascript: Libros web, por Javier Eguíluz Pérez
Curso de Javascript: Programación Web: www.programacionweb.net
WebEstilo: JavaScript: www.webestilo.com
W3 schools; Javascript Tutorial: www.w3schools.com
Manual de Javascript: José Antonio Rodríguez.: Jose Antonio Rodriguez: manual en PDF

Donativos

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

Aprende Web por Anyelguti is licensed under a Creative Commons Reconocimiento-NoComercial-SinObraDerivada 3.0 Unported License.

15. Resumen (IV)

15.4 Acceso al DOM (I)

El DOM o Document Object Model

El DOM Es el Modelo de Objeto de Documento, es decir, es un modelo de estructura que deben seguir todas las páginas Web.

Aunque estas se escriben de manera secuencial, los distintos elementos que componen la página siguen un modelo jerárquico, de manera que dependen unos de otros. Estos elementos se llaman también objetos:

En la página hay un objeto inicial (elemento padre), el objeto document (etiqueta HTML). De él dependen dos elementos secundarios (elementos hijos) que son las etiquetas head y body. De éstas parten todos los demás elementos.

El objeto document depende a su vez del objeto window que es el navegador. El objeto window tiene también otros elementos hijos además del document.

Objetos, métodos y propiedades

Concepto	Definición
Objetos	Cualquier cosa que pueda guardarse en una variable, desde simples datos hasta elementos complejos (arrays, funciones, fechas, etc.)
Métodos	Forma de trabajar: funciones predefinidas. Para aplicar un método debemos llamar a la función que lo contiene
Propiedades	Elementos que definen o cambian características de un objeto. Pueden ser de sólo lectura o de lectura y escritura. La propiedad puede ser a su vez un objeto del que dependan otras propiedades.

Acceso desde javascript : Javascript utiliza el operador punto ( . ) para acceder a los diferentes métodos y propiedades de un elemento.

n=miarray.lenght

n=fecha.getDate()

Debemos distinguir entre dos tipos de objetos, los objetos de javascript propiamente dicho, y los objetos del DOM. En este apartado nos referiremos exclusivamente a los objetos del DOM

Estructura del DOM

El DOM es la estructura de la página, la cual está construida de manera jerárquica, al depender unos elementos de otros.

Cada elemento se denomina nodo y estos dependen unos de otros de manera jerárquica, de modo que cada nodo tiene su nodo padre y puede tener nodo hijos.

Objeto inicial : es el objeto del que depende todo. Este es el objeto window, que es el navegador. Como se sobreentiende no hay que escribirlo, por lo que la página depende del objeto document, hijo del anterior. El objeto document marca el inicio de la página, y se corresponde con la etiqueta <html>

Tipos de nodos

Aunque existen 12 tipos de nodos, en realidad, para manipular las páginas web sólo necesitamos los 5 siguientes:

Tipos de nodos en HTML
document	Nodo raíz del que derivan los demás
element	Cada una de las etiquetas HTML
attr	Cada uno de los atributos de las etiquetas HTML
text	Texto encerrado en las etiquetas HTML
comment	Comentarios de la página HTML

Los nodos attr y text son siempre hijos del nodo element (etiqueta) que lo contiene.

Solamente los nodos document y element pueden tener nodos hijo.

Los nodos comment son los comentarios que el programador pone en la página, y son hijos del nodo element en el que están escritos.

Lectura de elementos de la página.

Se accede a los elementos de la página mediante los siguientes métodos. Todos ellos van precedidos siempre de document. .

getElementsByTagName("etiqueta")	Crea un array con todas las etiquetas cuyo nombre sea `"etiqueta"`
getElementsByName("valor")	Crea un array con todas las etiquetas cuyo atributo `name` sea `"valor"`
getElementById("valor")	Accede al nodo cuyo atributo `id` sea `"valor"`

Crear una nueva etiqueta

Pasos para crear una nueva etiqueta
Paso	Código y explicación
1º	Código	var escribir="nuevo texto."
1º	Explicación:	Variable con el nuevo texto
2º	Código	var etiqueta = document.createElement("tag")
2º	Explicación:	Crear el nodo de la etiqueta. `"tag"`=etiqueta HTML.
3º	Código	var texto = document.createTextNode(escribir)
3º	Explicación:	Crear el nodo de texto. Como argumento pasamos el texto, ya sea en una variable o directamente entre comillas.
4º	Código	var nuevoElemento = etiqueta.appendChild(texto)
4º	Explicación:	Se inserta el nodo de texto como hijo del nodo de etiqueta.

Estos pasos muestran cómo crear un nodo element (de etiqueta) que contiene un nodo text (de texto). Sin embargo esta estructura no está integrada en la página, sino que solamente existe en una variable. El siguiente paso es integrar la estructura en la página.

Insertar o reemplazar un nodo en la página.

Siguiendo con el ejemplo anterior, una vez creado el nodo de etiqueta con su texto, debemos insertarlo en la página o remplazarlo por otro ya existente. Veamos las opciones:

Insertar después de un elemento

Insertar el nodo al final de un elemento padre: método appendChild().

insertar mediante "appendChild()"
Paso	Código y explicación
5º	Código	document.getElementById("caja1").appendChild(nuevoElemento)
5º	Explicación:	Especificamos el nodo (etiqueta) de la página en el que queremos introducir el nuevo elemento -`document.getElementById(("..")`- e insertamos el elemento como hijo. El nuevo elemento se colocará detrás de los ya existentes en ese nodo.

Insertar antes de un elemento.

Insertar el nuevo elemento antes de un elemento concreto de la página. Método insertBefore.

insertar mediante "insertBefore()"
Paso	Código y explicación
5º	Código	var referencia = document.getElementById("ref")
5º	Explicación:	Guardamos en una variable el nodo de referencia para poder insertarlo antes de éste.
6º	Código	var padre = referencia.parentNode
6º	Explicación:	En una variable guardamos el nodo padre del nodo de referencia, localizado mediante la propiedad `parentNode`.
7º	Código	padre.insertBefore(nuevoElemento,referencia)
7º	Explicación:	Desde el elemento padre insertamos el nuevo elemento con el método `insertBefore(.. , ..)` donde el primer argumento será el elemento a insertar, y el segundo el elemento de referencia.

Remplazar un elemento

Para remplazar el nuevo elemento por otro ya existente utilizamos el método replaceChild.

Remplazar mediante "replaceChild()"
Paso	Código y explicación
5º	Código	var viejoElemento = document.getElementById("remplazar")
5º	Explicación:	En una variable guardamos el nodo que queremos remplazar.
6º	Código	var padre = viejoElemento.parentNode
6º	Explicación:	En una variable guardamos el nodo padre del nodo que queremos remplazar, localizado mediante la propiedad `parentNode`.
7º	Código	padre.replaceChild(nuevoElemento,viejoElemento)
7º	Explicación:	Desde el elemento padre remplazmos el nuevo elemento con el método `replaceChild(nuevo,viejo)` donde el primer argumento será el elemento a insertar, y el segundo el elemento a remplazar.

Eliminar un nodo

Para eliminar un nodo utilizamos el método removeChild().

Eliminar mediante "removeChild()"
Paso	Código y explicación
1º	Código	var suprimir = "document.getElementById("provisional")
1º	Explicación:	En una variable guardamos el nodo que queremos eliminar.
2º	Código	suprimir.parenNode.removeChild(suprimir)
2º	Explicación:	Localizamos primero su elemento padre `parentNode` y desde ahí lo eliminamos mediante el método `removeChild` pasándolo como argumento.

Cambiar un nodo de sitio

Para cambiar un elemento de sitio seguimos los mismos pasos que para eliminarlo (removeChild()). El elemento, aunque está eliminado, ha quedado guardado en una variable. Esto permite recuperarlo mediante el método appendChild().

Trasladar mediante "removeChild()" y "appendChild()"
Paso	Código y explicación
1º	Código	var trasladar = "document.getElementById("elemento1")
1º	Explicación:	En una variable guardamos el nodo que queremos trasladar.
2º	Código	trasladar.parenNode.removeChild(trasladar)
2º	Explicación:	Eliminamos de la página el elemento que queremos trasladar , sin embargo éste sigue guardado en la variable.
3º	Código	document.getElementById("caja1").appendChild(trasladar)
3º	Explicación:	Insertamos el elemento en otro nodo mediante el método `appendChild` tal como haríamos con un elemento nuevo.

También podemos insertar el elemento mediante el método insertBefore() siguiendo los pasos vistos anteriormente para insertar con este método.

Copiar un nodo

Para copiar un elemento en otro lugar de la página, conservando el original, utilizamos el método cloneNode(true).

Copiar mediante "cloneNode(true)"
Paso	Código y explicación
1º	Código	var elemento1 = "document.getElementById("elem1")
1º	Explicación:	En una variable guardamos el nodo que queremos copiar.
2º	Código	var copia = elemento1.cloneNode(true)
2º	Explicación:	Hacemos una copia mediante el método `cloneNode(true)`, la cual queda guardada en una variable.
3º	Código	document.getElementById("caja1").appendChild(copia)
3º	Explicación:	Copiamos el elemento en otro nodo mediante el método `appendChild` tal como haríamos con un elemento nuevo.

También podemos utilizar el método insertBefore() siguiendo los pasos vistos anteriormente para insertar con este método.

Propiedad "innerHTML"

La propiedad innerHTML permite leer y escribir el código HTML que hay dentro de una etiqueta. Esto permite escribir directamente el contenido HTML que habrá dentro de una etiqueta, es decir podemos escribir directamente etiquetas anidadas.

Lectura:

Paso	Código y explicación
1º	Código	var contenido = document.getElementById("elem1").innerHTML
1º	Explicación:	Guarda en una variable el contenido HTML del elemento.

Aquí hemos usado el método getElementById() para acceder al elemento, pero podemos usar otros métodos o utilizar variables en las que hayamos guardado variables del tipo element.

Escritura

Paso	Código y explicación
1º	Código	document.getElementById("elem1").innerHTML = "<a href='http://google.com'>Ir a Google</a>"
1º	Explicación:	Localizamos el elemento en la página mediante `getElementById()`, aplicamos después la propiedad `innerHTML` a la cual le damos como valor el contenido HTML que queremos que haya dentro de esa etiqueta.

La operación de escritura borra el contenido antiguo que tenía el elemento al que se le aplica, y lo remplaza por el que le hemos dado.

Añadir contenido a un elemento

Podemos escribir más contenido dentro de una etiqueta sin borrar el anterior utilizando el operador +=.

Paso	Código y explicación
1º	Código	var contenido = document.genElementById("elem1")
1º	Explicación:	Guardamos el elemento en una variable, para poder manejarlo mejor.
2º	Código	contenido.innerHTML += "<p>añadir otro párrafo</p>"
2º	Explicación:	Aplicamos la propiedad `innerHTML` con el operador de suma y asignación `+=`, de esta manera el código que se escribe se añade al que ya tenía el elemento.

Acceso a atributos

Acceso como propiedades

Los atributos son en realidad propiedades del nodo element (etiqueta) que los contiene, por lo que podemos acceder a ellos de la misma manera que se accede a un propiedad de un elemento, es decir mediante la forma .nombre_atributo. Podemos acceder tanto a su lectura como a su escritura

Lectura del atributo

Paso	Código y explicación
1º	Código	var valor = document.getElementById("enlace1").href
1º	Explicación:	Para leer el valor del atributo localizamos el elemento que lo contiene y lo escribimos detrás como una propiedad. La variable `valor` será el valor que tenga el atributo.

Escritura de atributo

Paso	Código y explicación
1º	Código	document.getElementById("enlace1").href = "http://yahoo.es"
1º	Explicación:	Localizamos el nodo que contiene el atributo y lo escribimos detrás como una propiedad. Le asignamos un nuevo valor. Éste podemos escribirlo directamente o en una variable.

Al escribir un atributo, si éste ya existía, el valor antiguo se remplaza por el nuevo. Si no existía se crea el nuevo atributo con el valor asignado.

Acceso con métodos

Podemos acceder a los atributos mediante los métodos getAttribute() (lectura) y setAttribute() (escritura).

Lectura de atributo

Paso	Código y explicación
1º	Código	valor = document.getElementById("elem1").getAttribute("align")
1º	Explicación:	Localizamos el nodo que contiene el atributo y le aplicamos el método `getAtribute("..")`. Como argumento pasamos el nombre del atributo. Obtenemos así su valor

Escritura de atributo

Paso	Código y explicación
1º	Código	document.getElementById("elem1").setAttribute("align","center")
1º	Explicación:	Localizamos el nodo que contiene el atributo y le aplicamos el método `setAtribute("..","..")`. Como primer argumento pasamos el nombre del atributo, y como segundo su valor.

Al escribir un atributo, si éste ya existía, el valor antiguo se remplaza por el nuevo. Si no existía se crea el nuevo atributo con el valor asignado.

Acceso al código CSS

Para acceder al código CSS utilizamos las propiedades .style.propiedadCSS.

Acceso a CSS: escritura

Paso	Código y explicación
1º	Código	document.getElementById("elem1").style.fontSize = "1.5em"
1º	Explicación:	Localizamos el nodo al que queremos aplicar la propiedad. Ponemos despues la propiedad `.style` seguido de un punto y la propiedad CSS; le asignamos después un nuevo valor a la propiedad.

Si la propiedad ya existía antes se le cambia su valor, y si no existía se crea como nueva con el valor indicado.

Si el nombre de la propiedad tiene más de una palabra (separadas por guiones en CSS), lo escribiremos todo junto y empezando por mayúscula la segunda palabra y siguientes.

Escribiremos los valores entre comillas (a no ser que esté guardado en una variable), y al igual que en CSS en las medidas indicaremos el tipo. Solo en el caso de que el valor sea un número (sin indicación de medida) puede escribirse sin comillas.

Acceso a CSS: lectura

Sólo se puede acceder a la lectura de una propiedad CSS si ésta ha sido escrita con javascript en la forma indicada anteriormente.

Paso	Código y explicación
1º	Código	var valor =document.getElementById("elem1").style.fontSize
1º	Explicación:	Localizamos el nodo que contiene la propiedad y aplicamos las mismas propiedades vistas anteriormente; pero aquí no le damos un nuevo valor, sino que guardamos el valor que tiene en una variable.

Seguimos en la siguiente página con el acceso al documento desde javascript.

Acceso al DOM(II)

manual de Javascript

Anterior 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