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 Javascript

Javascript: lenguaje interactivo para dinamizar la web.


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: 19

Visitas el mes pasado: 44

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




15. Resumen (IV)

15.4 Acceso al DOM (I)

javascript

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

esquema 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
Código var escribir="nuevo texto."
Explicación: Variable con el nuevo texto
Código var etiqueta = document.createElement("tag")
Explicación: Crear el nodo de la etiqueta. "tag"=etiqueta HTML.
Código var texto = document.createTextNode(escribir)
Explicación: Crear el nodo de texto. Como argumento pasamos el texto, ya sea en una variable o directamente entre comillas.
Código var nuevoElemento = etiqueta.appendChild(texto)
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
Código document.getElementById("caja1").appendChild(nuevoElemento)
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
Código var referencia = document.getElementById("ref")
Explicación: Guardamos en una variable el nodo de referencia para poder insertarlo antes de éste.
Código var padre = referencia.parentNode
Explicación: En una variable guardamos el nodo padre del nodo de referencia, localizado mediante la propiedad parentNode.
Código padre.insertBefore(nuevoElemento,referencia)
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
Código var viejoElemento = document.getElementById("remplazar")
Explicación: En una variable guardamos el nodo que queremos remplazar.
Código var padre = viejoElemento.parentNode
Explicación: En una variable guardamos el nodo padre del nodo que queremos remplazar, localizado mediante la propiedad parentNode.
Código padre.replaceChild(nuevoElemento,viejoElemento)
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
Código var suprimir = "document.getElementById("provisional")
Explicación: En una variable guardamos el nodo que queremos eliminar.
Código suprimir.parenNode.removeChild(suprimir)
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
Código var trasladar = "document.getElementById("elemento1")
Explicación: En una variable guardamos el nodo que queremos trasladar.
Código trasladar.parenNode.removeChild(trasladar)
Explicación: Eliminamos de la página el elemento que queremos trasladar , sin embargo éste sigue guardado en la variable.
Código document.getElementById("caja1").appendChild(trasladar)
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
Código var elemento1 = "document.getElementById("elem1")
Explicación: En una variable guardamos el nodo que queremos copiar.
Código var copia = elemento1.cloneNode(true)
Explicación: Hacemos una copia mediante el método cloneNode(true), la cual queda guardada en una variable.
Código document.getElementById("caja1").appendChild(copia)
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
Código var contenido = document.getElementById("elem1").innerHTML
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
Código document.getElementById("elem1").innerHTML = "<a href='http://google.com'>Ir a Google</a>"
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
Código var contenido = document.genElementById("elem1")
Explicación: Guardamos el elemento en una variable, para poder manejarlo mejor.
Código contenido.innerHTML += "<p>añadir otro párrafo</p>"
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
Código var valor = document.getElementById("enlace1").href
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
Código document.getElementById("enlace1").href = "http://yahoo.es"
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
Código valor = document.getElementById("elem1").getAttribute("align")
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
Código document.getElementById("elem1").setAttribute("align","center")
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
Código document.getElementById("elem1").style.fontSize = "1.5em"
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
Código var valor =document.getElementById("elem1").style.fontSize
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 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