Javascript: lenguaje interactivo para dinamizar la web.
Y ahora tambien aprende a programar en C++ con Aprende Web C++
y entérate de las novedades o deja un comentario.
última modificación: 13-07-2018.
Visitas este mes: 22
Visitas el mes pasado: 30
Mi agradecimiento a los siguientes sitios en los que me he basado para la elaboración de este manual.:
Si este sitio te parece interesante puedes contribuir con una pequeña aportación.
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.
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
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>
Aunque existen 12 tipos de nodos, en realidad, para manipular las páginas web sólo necesitamos los 5 siguientes:
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.
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" |
Paso | Código y explicación | |
---|---|---|
1º | Código | var escribir="nuevo texto." |
Explicación: | Variable con el nuevo texto | |
2º | Código | var etiqueta = document.createElement("tag") |
Explicación: | Crear el nodo de la etiqueta. "tag" =etiqueta HTML. |
|
3º | 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. | |
4º | 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.
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 el nodo al final de un elemento padre: método appendChild().
Paso | Código y explicación | |
---|---|---|
5º | 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 el nuevo elemento antes de un elemento concreto de la página. Método insertBefore.
Paso | Código y explicación | |
---|---|---|
5º | Código | var referencia = document.getElementById("ref") | Explicación: | Guardamos en una variable el nodo de referencia para poder insertarlo antes de éste. |
6º | Código | var padre = referencia.parentNode | 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) | 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. |
Para remplazar el nuevo elemento por otro ya existente utilizamos el método replaceChild.
Paso | Código y explicación | |
---|---|---|
5º | Código | var viejoElemento = document.getElementById("remplazar") | Explicación: | En una variable guardamos el nodo que queremos remplazar. |
6º | 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 . |
7º | 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. |
Para eliminar un nodo utilizamos el método removeChild().
Paso | Código y explicación | |
---|---|---|
1º | Código | var suprimir = "document.getElementById("provisional") | Explicación: | En una variable guardamos el nodo que queremos eliminar. |
2º | 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. |
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().
Paso | Código y explicación | |
---|---|---|
1º | Código | var trasladar = "document.getElementById("elemento1") | Explicación: | En una variable guardamos el nodo que queremos trasladar. |
2º | 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. |
3º | 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.
Para copiar un elemento en otro lugar de la página, conservando el original, utilizamos el método cloneNode(true).
Paso | Código y explicación | |
---|---|---|
1º | Código | var elemento1 = "document.getElementById("elem1") | Explicación: | En una variable guardamos el nodo que queremos copiar. |
2º | 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. |
3º | 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.
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.
Paso | Código y explicación | |
---|---|---|
1º | 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.
Paso | Código y explicación | |
---|---|---|
1º | 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.
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") | Explicación: | Guardamos el elemento en una variable, para poder manejarlo mejor. |
2º | 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. |
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 | 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" | 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.
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") | 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") | 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.
Para acceder al código CSS utilizamos las propiedades .style.propiedadCSS.
Paso | Código y explicación | |
---|---|---|
1º | 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.
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 | 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.
Sugerencias:
aprendeweb@aprende-web.net. Envia un
Visita nuestro blog par saber en qué estamos trabajando: Aprende Web Blog
Más sobre anyelguti en http://anyelguti.16mb.com