Articles

Manejo de nodos DOM con JavaScript

In JavaScript on 06/12/2011 by Esteban Olate Etiquetado: , , ,

Gracias a DOM se logran generar páginas Web más dinámicas y de mayor complejidad. Consiste en un conjunto de utilidades que nos permite manipular nuestra página como si fuera un árbol de nodos, donde cada nodo representa a una etiqueta XHTML de nuestra página. Los lenguajes de programación (Como Java, PHP,JavaScript,etc…) permiten manipular estos nodos, es decir, crearlos, modificarlos y eliminarlos. A continuación veremos cómo implementar el uso de nodos DOM en JavaScript.

JavaScript proporciona un objeto, que hace referencia a nuestra página web actual, llamado «document», el cual posee una serie de atributos y métodos que podemos utilizar simplemente escribiendo «document.<nombreMetodo o nombreAtributo>». Para el manejo de nodos DOM JavaScript proporciona una serie de métodos y atributos de los cuales los más usados son los siguientes:

document.getElementById(<id>); Retorna nodo según su id, si no encuentra retorna «undefined».
document.createElement(<tag>); Crea un nodo de tipo elemento según el tag ingresado.
document.createTextNode(<texto>); Crea un nodo de tipo texto con el texto ingresado.
<nodo>.hasChild(); Retorna «true» si el nodo tiene nodo/s hijos, de lo contrario retorna «false».
<nodo>.parentNode(); Retorna el nodo padre del nodo actual.
<nodo>.appendChild(<nodo>); Agrega un nodo hijo al nodo actual.
<nodo>.removeChild(<nodo>); Elimina el nodo recibido por parametro del nodo actual.
<nodo>.removeAttribute(<atributo>); Elimina el atributo ingresado del nodo actual.
<nodo>.setAttribute(<atributo>,<valor>); Asigna atributo al nodo actual.
<nodo>.childNodes; Retorna arreglo con todos los nodos hijos del nodo actual.

Ahora un ejemplo que utiliza algunos de estos métodos, para el cual usaremos dos archivos:

funcionesEjemplo.js:

function crearDiv(){
  //Obtenemos el nodo que hace referencia al elemento ‘body’
  var nodoDestino = document.body;
  //Creamos un elemento div
  var div = document.createElement(«div«);
  //Asignamos un id y le damos algo de estilo css para visualizarlo mejor
  div.setAttribute(«id»,»divPrueba»);
  div.setAttribute(«style»,»background-color:#ccc; height:50px; width:300px;»);
  //Agregamos el elemento creado al ‘body’
  nodoDestino.appendChild(div);
}
function agregaTexto(texto){
  //Obtenemos el nodo anteriormente creado
  var div = document.getElementById(«divPrueba»);
  //Consultamos si la búsqueda retorno undefined
  if(div == undefined)
    alert(«No has creado el div…»);
  else
    //Creamos un nodo de texto y lo agregamos al div
    div.appendChild(document.createTextNode(texto));
}
function cambiarColorLetra(){
  var div = document.getElementById(«divPrueba»);
  if(div == undefined)
    alert(«No has creado el div…»);
  else
    //Modificamos el estilo para cambiar el color de letra
    div.setAttribute(«style»,»background-color:#ccc; height:50px; width:300px; color:green;»);
}
function eliminarNodo(idNodo){
  //Buscamos el nodo y verficamos su retorno
  var nodo = document.getElementById(idNodo);
  if(nodo == undefined)
    alert(«No has creado el div…»);
  else{
    //Obtenemos el nodo padre
    var padre = nodo.parentNode;
    //Removemos el nodo desde el nodo padre
    padre.removeChild(nodo);
  }
}

index.html:

<html>
  <head>
    <title>Manejo nodos DOM con JavaScript</title>
    <!– Incorporamos nuestro script –>
    <script language=»javascript» src=»funcionesEjemplo.js»></script>
  </head>
  <body>
    <input type=»button» value=»Crear div» onclick=»crearDiv();»>
    <input type=»button» value=»Agregar texto» onclick=»agregaTexto(‘Texto de prueba’);»>
    <input type=»button» value=»Cambiar color letra» onclick=»cambiarColorLetra();»>
    <input type=»button» value=»Eliminar div» onclick=»eliminarNodo(‘divPrueba’);»>
  </body>
</html>

Espero haber sido claro y que les ayude…

Esteban Olate

3 comentarios

3 respuestas to “Manejo de nodos DOM con JavaScript”

  1. pepe 02/02/2013 a las 19:12 | Responder

    Muy buen ejemplo, muy legible

  2. Jess Bernés Lopez 14/05/2013 a las 19:15 | Responder

    Gracias, si me ayudó.

  3. Jiskar 23/08/2016 a las 12:24 | Responder

    excelente

Deja un comentario

« Back to Home