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

Visitas el mes pasado: 77

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.




5. Acceso al DOM (III)

5.3 Manipular los nodos

javascript

Crear nuevos nodos

Para crear nuevos nodos tipo element (de etiqueta) que contengan el texto (nodo tipo text), usaremos los siguientes métodos (o funciones preestablecidas):

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.


Insertar elementos

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);


Reemplazar nodos

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)


Eliminar nodos

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.


Cambiar un nodo de sitio

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.


Copiar un nodo en otra parte de la página

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.


Página de ejemplo de manipulación de nodos

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:

Manipulación de Nodos





En la siguiente página veremos cómo acceder a los atributos y a las propiedades CSS

Atributos y código CSS



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