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

RSS. Suscribir canal.

Donativos

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

Este obra está bajo una licencia de Creative Commons Reconocimiento-NoComercial 4.0 Internacional.

5. Acceso al DOM (III)

5.3 Manipular los nodos

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

• createElement(): Crea un nodo de tipo element. En el paréntesis, y con comillas, se escribe la etiqueta del elemento a crear.
• createTextNode(): Crea un nodo de tipo text. En el paréntesis escribiremos el contenido del nodo de texto. Si lo escribimos literal debemos ponerlo entre comillas. También podemos haberlo guardado previamente en una variable, en ese caso escribiremos en el paréntesis la variable sin comillas.
• appendChild(): Hace que el nodo insertado dentro del paréntesis sea hijo del nodo que debemos escribir antes del método seguido de un punto. (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.

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

Página creada por ANYELGUTI.

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