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: 52
Visitas el mes pasado: 129
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.
Para crear nuevos nodos tipo element
(de etiqueta) que contengan
el texto (nodo tipo text), usaremos los siguientes métodos (o funciones preestablecidas):
nodoPadre.appendChild(nodoHijo)
).Los métodos createElement y createTextNode requieren llevar delante como referencia el objeto document. ; el metodo appendChild, como ya se ha dicho, lleva delante por referencia su elemento padre.
Los pasos a seguir serán los siguientes:
En primer lugar creamos el nodo element mediante el método createElement(): En el ejemplo crearemos un nuevo párrafo:
elemento = document.createElement("p");
Creamos luego el nodo de texto, mediante el método createTextNode:
texto = document.createTextNode("Este es el texto del nuevo nodo");
Por último hacemos que el nodo de texto sea hijo del nodo elemento mediante el método appendChild():
nuevo = elemento.appendChild(texto)
Con esto hemos creado un nuevo elemento; ahora debemos insertarlo en la página.
Hay dos formas de insertar un elemento en la página, La primera es mediante el método appendChild, lo cual lo inserta como elemento hijo del de referencia, pero al final de los demás elementos que tenga su elemento padre. Por ejemplo, si tenemos un "div" con un "id" llamado "lateral", el nuevo elemento aparecerá al final de los demás que ya tengamos:
padre = document.getElementById("lateral")
padre.appendChild(nuevo)
Donde padre
es el elemento del que va a depender, y nuevo
es la
variable donde hemos guardado el nodo elemento después de añadirle el nodo texto.
La segunda forma de insertar un elemento se basa en el método insertBefore(). Este método inserta el nuevo elemento delante de la etiqueta que hayamos seleccionado. para ello seguiremos los siguientes pasos:
Elegimos la etiqueta delante de la cual queremos insertar la nueva que hemos creado, en el ejemplo, sería la que lleva el "id" al que llamamos "insertar".
var referencia = document.getElementbyId("insertar");
Buscamos el elemento padre del elemento de referencia mediante la propidad parentNode
;
y lo guardamos en una variable:
var padre = referencia.parentNode;
Por último desde el elemento padre, utilizamos el método InsertBefore(), el cual dentro del paréntesis tiene dos parámetros separados por una coma, el primero es el nuevo elemento que insertamos, y el segundo es el elemento de referencia, delante del cual debe insertarse.
padre.insertBefore(nuevo,referencia);
Una vez creado un elemento no sólo podemos insertarlo en la página como elemento nuevo, sino que podemos insertarlo reemplazando a un elemento ya existente; para ello utilizaremos el método replaceChild(). La forma de reemplazarlo es similar a insertar un elemento delante de otro, lo único que cambia es el nombre del método:
Buscamos el nodo que queremos reemplazar:
var cambiarElemento = document.getElementbyId("reemplazar");
Accedemos a su elemento padre mediante la propiedad parentNode:
var padre = cambiarElemento.parentNode;
Por último aplicamos el método replaceChild() al elemento padre. Entre paréntesis pondremos en primer lugar el elemento nuevo que lo sustituirá, y en segundo el elemento viejo:
padre.replaceChild(nuevo,cambiarElemento)
Para eliminar un elemento utilizaremos el método removeChild(). Dentro del paréntesis pondremos el nodo que queremos eliminar. Debemos eliminar el elemento desde su nodo padre por lo que buscamos primero su nodo padre para luego desde ahí eliminarlo como un hijo de éste: ejemplo
suprimir = document.getElementById("provisional")
suprimir.parentNode.removeChild(suprimir)
Al eliminar un nodo eliminamos también todos los nodos hijos que dependen de él, Aunque el nodo se elimina en la página, seguimos teniendo una variable que lo almacena.
Si éste es un nodo que hemos creado anteriormente con Javascript, lo único que tenemos que hacer es colocarlo de nuevo en la página como la primera vez, bien sea con el método appendChild() o con el método insertBefore(), el nodo desaparecerá de donde estaba antes y aparecerá en el nuevo lugar.
Si queremos cambiar de sitio un nodo de un elemento de la página (no escrito con javascript), en primer lugar debemos eliminarlo, tal como hemos visto en el punto anterior:
trasladar = document.getElementById("cuadro1")
trasladar.parentNode.removeChild(trasladar)
hasta aquí hemos hecho lo mismo que en el punto anterior, es decir, suprimirlo, pero sin
embargo el nodo está guardado en la variable trasladar
, por lo que mediante el
método appendChild podemos insertarlo de nuevo en la página en otro lugar diferente:
document.getElementById("cuadro2").appendChild(trasladar).
También se podría haber usado el método insertBefore() para cambiarlo de sitio, siguiendo los pasos ya vistos anteriormente para este método.
Para copiar un nodo en otra parte de la página y conservar el original, usaremos el método cloneNode(true). Seguiremos los siguientes pasos:
Accedemos al elemento que queremos copiar, y lo guardamos en una variable:
elemento = document.getElementById("parrafo2")
Le aplicamos el método cloneNode(true)
para copiarlo, y lo guardamos en otra variable.
observa que el parámetro que le pasamos al método cloneNode
(valor del paréntesis) debe
ser siempre true
.
copia = elemento.cloneNode(true)
Por último lo insertamos en la página mediante el método appendChild, como elemento hijo de la etiqueta seleccionada.
document.getElementById("nuevos").appendChild(copia)
También podriamos haber usado el método insertBefore() para cambiarlo de sitio, siguiendo los pasos ya vistos anteriormente para este método.
El siguiente ejemplo de página utiliza los métodos vistos anteriormente para cambiar algunos párrafos. veamos su código fuente:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Manipular nodos</title> <style type="text/css"> #cuadro { width: 400px; height: 250px; border: 1px black solid; float: right; font-family: arial; overflow: auto } p { font-size: 1em; font-family: arial; } </style> <script type="text/javascript"> //Creación de un nuevo nodo var nuevoElemento = document.createElement("p"); var nuevoTexto = document.createTextNode("Nuevo elemento en la página"); var nuevo = nuevoElemento.appendChild(nuevoTexto); function restaurar(){ //restaurar el valor inicial mediante innerHTML var lugar = document.getElementById("cuadro"); lugar.innerHTML = "<h4 id='primero'>primer texto fijo</h4><h4 id='segundo'>Segundo texto fijo</h4><h4 id='tercero'>Tercer texto fijo</h4>" } function debajo() { //insertar elemento al final -appendChild()- var lugar = document.getElementById("cuadro") lugar.appendChild(nuevo) } function delante() { //Insertar elemento delante de otro -insertBefore() var segundo = document.getElementById("segundo") var padre = segundo.parentNode padre.insertBefore(nuevo,segundo) } function reemplazar() { //Reemplazar elemento con -replaceChild()- var primero = document.getElementById("primero") var padre = primero.parentNode padre.replaceChild(nuevo,primero) } function suprimir() { //Suprimir un elemento -removeChild()- var tercero = document.getElementById("tercero") tercero.parentNode.removeChild(tercero) } function cambiar() { //cambiar de sitio : removeChild() + appendChild() var segundo = document.getElementById("segundo") segundo.parentNode.removeChild(segundo) document.getElementById("cuadro").appendChild(segundo) } function copiar() { //copia de un nodo: cloneNode(true) var segundo = document.getElementById("segundo") copia = segundo.cloneNode(true) document.getElementById("cuadro").appendChild(copia) } </script> </head> <body> <h1>Manipulación de nodos. </h1> <div id="cuadro"> <h4 id="primero">primer texto fijo</h4> <h4 id="segundo">Segundo texto fijo</h4> <h4 id="tercero">Tercer texto fijo</h4> </div> <p>Pulsa en los siguientes párrafos, para cambiar los textos de la caja de la derecha</p> <p onclick="restaurar()">Pulsa en este párrafo para restaurar el estado inicial de la caja.</p> <p onclick="debajo()">Insertar nuevo elemento debajo de todos</p> <p onclick="delante()">Insertar nuevo elemento delante del segundo.</p> <p onclick="reemplazar()">reemplazar el primer elemento de la caja por otro nuevo</p> <p onclick="suprimir()">Suprimir el tercer párrafo</p> <p onclick="cambiar()">Poner el segundo texto en último lugar</p> <p onclick="copiar()">Copia del nuevo elemento, se inserta al final</p> </body> </html>
La página anterior la veremos como en el siguiente enlace:
En la siguiente página veremos cómo acceder a los atributos y a las propiedades CSS
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