informaticaPC

Tutorial de JQuery

Manipulando el DOM


Regístrate

Tus datos no serán compartidos, solo nosotros te enviaremos información y novedades

Manipular el DOM

Tarde o temprano todo programador web se enfrenta a la tarea de manipular dinámicamente la estructura del DOM de una página, y cómo no, JQuery también nos ofrece métodos que nos facilitarán mucho dicha tarea.

Si bien con anterioridad hemos explicado cómo agregar y eliminar atributos en los elementos HTML, en este capítulo explicaremos otras formas de acceder al DOM.

Si deseas realizar las prácticas te recomendamos usar alguna herramienta o extensión en tu navegador web que te permita visualizar información relativa a la página cargada (en nuestro caso usaremos la consola JavaScript del navegador Chrome, que puedes activar desde el menú Herramientas, Consola JavaScript).

Más información

Relacionado: [ Atributos ]

Más información

Vea también: [ Manipular el DOM ]

Insertar elementos

Para insertar elementos en el DOM con JQuery envolviendo unos dentro de otros, disponemos de los siguientes métodos:

  • wrap(): envuelve cada uno de los elementos seleccionados (por separado) dentro de otro.
  • wrapAll(): envuelve todos los elementos seleccionados (agrupados) dentro de otro.
  • wrapInner(): funciona al contrario que los anteriores, insertando un elemento dentro de los seleccionados.
  • unwrap(): elimina el padre del elemento indicado.

Veamos un ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>InformaticaPC | DOM</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">
        body { background-color:lightyellow; }
        p { background-color:cyan; }
        #contenedor1 { float:left;width:300px;background-color:lightgreen; }
        .rojo { color:red; }
        .verde { color:green; }
    </style>

    <!-- Agregamos JQuery -->
    <script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function()
        {
            // wrap()
            $("#btn_wrap").click(function() {
                $(".rojo").wrap("<p></p>");
            });

            // ----------------

            // wrapAll()
            $("#btn_wrapAll").click(function() {
                $(".rojo").wrapAll("<div class='verde'></div>");
            });

            // ----------------

            // wrapInner()
            $("#btn_wrapInner").click(function() {
                $("#p1").wrapInner("<div class='verde'></div>");
            });

            // ----------------

            // unwrap()
            $("#btn_unwrap").click(function() {
                $("span.rojo").unwrap();
            });

        });

    </script>
  </head>

  <body>

      <input type="button" id="btn_wrap" value="wrap()" />
      <input type="button" id="btn_wrapAll" value="wrapAll()" />
      <input type="button" id="btn_unwrap" value="unwrap()" />
      <input type="button" id="btn_wrapInner" value="wrapInner()" /><p />

      <div id="contenedor1">
          <span>Esto es un span | </span>
          <span class="rojo">Esto es otro span | </span>
          <span class="rojo">Esto es otro span | </span>
          <span>Esto es otro span</span>
          <p id="p1">Esto es un párrafo</p>
      </div>

  </body>

</html>

Tanto en este como en el resto de ejemplos, para comprobar los cambios en el código HTML activa la pestaña 'Elements' de la consola JavaScript (si usas Chrome).

Página de ejemplo Código fuente

Por otro lado, los siguientes métodos permiten insertar contenido fuera de un elemento:

  • after(): inserta contenido después de un elemento.
  • before(): inserta contenido antes de otro elemento.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>InformaticaPC | DOM</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">
        body { background-color:lightyellow; }
        p { background-color:cyan; }
        #contenedor1 { float:left;width:300px;background-color:lightgreen; }
        .rojo { color:red; }
        .verde { color:green; }
    </style>

    <!-- Agregamos JQuery -->
    <script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function()
        {
            // after()
            $("#btn_after").click(function() {
                $("p").after("<span class='rojo'>SPAN insertado después del párrafo</span><br />");
            });

            // before()
            $("#btn_before").click(function() {
                $("p").before("<span class='rojo'>SPAN insertado antes del párrafo</span><br />");
            });

        });

    </script>
  </head>

  <body>

      <input type="button" id="btn_after" value="after()" />
      <input type="button" id="btn_before" value="before()" />

      <div id="contenedor1">
          <p>Esto es un párrafo</p>
          <p>Esto es otro párrafo</p>
      </div>

  </body>

</html>

Código de Ejemplo

Por último, con los siguientes métodos es posible insertar contenido dentro de otro elemento (algunos de ellos ya los hemos explicado anteriormente):

  • append(): inserta contenido después del existente en un elemento.
  • html(): devuelve o establece el código HTML de un elemento.
  • prepend(): inserta contenido antes del existente en un elemento.
  • text(): devuelve el texto combinado de cada uno de los elementos seleccionados (incluido el de otros elementos que puedan a su vez contener). También se puede usar para definir el contenido de un elemento.

Veamos un ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>InformaticaPC | DOM</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">
        body { background-color:lightyellow; }
        p { background-color:cyan; }
        #contenedor1 { float:left;width:300px;background-color:lightgreen; }
        .rojo { color:red; }
        .verde { color:green; }
    </style>

    <!-- Agregamos JQuery -->
    <script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function()
        {
            // append()
            $("#btn_append").click(function() {
                $(".rojo").append(" AGREGADO.");
            });

            // prepend()
            $("#btn_prepend").click(function() {
                $(".verde").prepend("AGREGADO. ");
            });

        });

    </script>
  </head>

  <body>

      <input type="button" id="btn_append" value="append()" />
      <input type="button" id="btn_prepend" value="prepend()" />

      <div id="contenedor1">
          <p class="rojo">Esto es un párrafo.</p>
          <p class="verde">Esto es otro párrafo.</p>
      </div>

  </body>

</html>

Código de Ejemplo

Eliminar elementos

Para remover elementos disponemos de los siguientes métodos:

  • detach(): remueve elementos con la posibilidad de que puedan ser insertados nuevamente manteniendo las funcionalidades que tenían definidas (como por ejemplo sus eventos).
  • empty(): remueve los elementos hijo del elemento especificado.
  • remove(): elimina de forma definitiva un elemento junto con los otros que contenga.
  • unwrap(): remueve el elemento padre del especificado.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>InformaticaPC | DOM</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">
        body { background-color:lightyellow; }
        p { background-color:cyan; }
        #contenedor { float:left;width:300px;background-color:lightgreen; }
        .rojo { color:red; }
        .verde { color:green; }
    </style>

    <!-- Agregamos JQuery -->
    <script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function()
        {

            // Variable para guardar la referencia al elemento borrado con 'detach()
            var obj = null;

            // ----------------

            // empty()
            $("#btn_empty").click(function() {
               $("#divInterior1").empty();
            });

            // ----------------

            // remove()
            $("#btn_remove").click(function() {
               $("#divInterior2").remove();
            });

            // ----------------

            // detach()
            $("#btn_detach").click(function() {
                obj = $("#p3").detach();
            });

            // ----------------

            // Restaurar el elemento
            $("#btn_restaurar").click(function() {
                $("#p2").after( obj );
                obj = null;
            });

            // ----------------

            // unwrap()
            $("#btn_unwrap").click(function() {
                obj = $("#enlace").unwrap();
            });

        });

    </script>
  </head>

  <body>

      <input type="button" id="btn_empty" value="empty()" />
      <input type="button" id="btn_remove" value="remove()" />
      <input type="button" id="btn_unwrap" value="unwrap()" /><br />
      <input type="button" id="btn_detach" value="Eliminar con detach()" />
      <input type="button" id="btn_restaurar" value="Restaurar el elemento" /><p />

      <div id="contenedor">

          <div id="divInterior1">
              Texto flotante en 'divInterior1'
              <a href="#">Esto es un enlace</a>
          </div>

          <div id="divInterior2">
              Texto flotante en 'divInterior2'
              <span>Esto es un span</span>
          </div>

          <div id="divInterior3">
              <a id="e" href="#">Esto es un enlace</a>
          </div>

          <div id="divInterior4">
            <p id="p1" class="rojo">Esto es un párrafo</p>
            <p id="p2" class="rojo">Esto es otro párrafo.</p>
            <p id="p3" class="verde">Esto es un párrafo más.</p>
          </div>

      </div>

  </body>

</html>

Ejemplo

Más información

Vea también: [ Remover elementos ]

Reemplazar elementos

El método replaceWith() permite reemplazar los elementos seleccionados con el contenido que especifiquemos.

En el siguiente ejemplo lo utilizamos para reemplazar unos determinados párrafos por etiquetas HTML 'SPAN':

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>InformaticaPC | DOM</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">
        body { background-color:lightyellow; }
        span { font-weight:bold; }
        .rojo { color:red; }
        .verde { color:green; }
    </style>

    <!-- Agregamos JQuery -->
    <script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function()
        {

          $("#btnReemplazar").click(function() {
            $(".rojo").replaceWith("<span>Este texto está en un 'SPAN'</span><br />");
          });

        });

    </script>
  </head>

  <body>

      <input type="button" id="btnReemplazar" value="Reemplazar" />

      <p id="p1" class="rojo">Esto es un párrafo</p>
      <p id="p2" class="rojo">Esto es otro párrafo.</p>
      <p id="p3" class="verde">Esto es un párrafo más.</p>

  </body>

</html>
Ejemplo Código fuente
Más información

Vea también: [ Reemplazar elementos ]

Obtener y recorrer elementos

Antes de explicar cómo recorrer elementos del DOM debes saber que dependiendo del método usado para acceder a los elementos podemos obtener objetos directamente del DOM o bien objetos JQuery (que a su a vez contendrá los objetos del DOM junto con otros métodos y propiedades propios).

Para seleccionar los elementos podemos hacerlo de los siguientes modos:

var elementos = $("#divContenedor1");       // De esta forma obtenemos un objeto JQuery
var elementos = $("#divContenedor1").get(); // Obtenemos un array de objetos directamente del DOM

Una vez obtenidos, para recorrer los elementos usaremos:

  • $.each(): permite iterar sobre un objeto JQuery, ejecutando una función por cada elemento existente.
  • JQuery.each(): permite iterar sobre objetos y arrays de JavaScript.

Para entender mejor cómo obtener y recorrer los elementos estudia el siguiente código fuente de ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>InformaticaPC | DOM</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">
        body { background-color:lightyellow; }
        p { color:red; }
        input { margin:4px; }
        #log { color:yellow;background-color:red;margin-bottom:10px; }
    </style>

    <!-- Agregamos JQuery -->
    <script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function()
        {

            $("#btnSeleccionarUno").click(function()
            {
                var elementos = $("#divContenedor1");   // Del siguiente modo obtenemos un objeto JQuery
                $("#log").text( "'" + elementos.attr("id") + "'" ); // Como hemos obtenido un objeto JQuery accedemos a él con 'attr()'

                // No podemos acceder a él del siguiente modo:
                //$("#log").text( elementos[contador].id );

                // También se podría acceder de los siguientes modos:
                //$("#log").text( elementos[0].id );
                //$("#log").text( elementos.get(0).id );
            });

            // -------------------

            $("#btnGetUno").click(function()
            {
                var elementos = $("#divContenedor1").get(); // Obtenemos un array de objetos directamente del DOM
                $("#log").text( "-> " + elementos[0].id );  // Mostramos el 'id'
            });

            // -------------------

            $("#btnSeleccionarVarios").click(function()
            {
                var elementos = $("DIV");   // Del siguiente modo obtenemos un array de objetos JQuery

                $("#log").text("");

                // Mostramos los índices e 'id'
                elementos.each( function(indice, elemento) {
                    $("#log").append( "índice [" + indice + "] -> '" + elemento.id + "'<br />" );
                });
            });

            // -------------------

            $("#btnGetVarios").click(function()
            {
                var elementos = $("DIV").get(); // Obtenemos un array de objetos directamente del DOM

                $("#log").text("");

                // Mostramos el 'id'
                for( var contador=0; contador < elementos.length; contador++ ) {
                    $("#log").append( "'" + elementos[contador].id + "'<br />" );
                }
            });

        });

    </script>
  </head>

  <body>

      <div id="log"> </div>

      <input type="button" id="btnSeleccionarUno" value="Acceder al DIV con id 'divContenedor1'" />
      <input type="button" id="btnGetUno" value="Acceder con get() al DIV con id 'divContenedor1'" />

      <hr id="hr1" />

      <input type="button" id="btnSeleccionarVarios" value="Acceder a los DIV con selector" />
      <input type="button" id="btnGetVarios" value="Acceder a los DIV con get()" />

      <div id="divContenedor1"> </div>
      <div id="divContenedor2"> </div>
      <div id="divContenedor3"> </div>

  </body>

</html>

Ejemplo

Una vez aclarado lo anterior, el siguiente paso es conocer algunos de los métodos existentes para recorrer el árbol de elementos del DOM:

  • children(): devuelve los elementos hijo que contiene el especificado.
  • get(): usado para acceder directamente a los elementos del DOM.
  • prev() / next(): devuelven los elementos anterior y siguiente respectivamente.
  • parent(): devuelve el elemento padre del especificado.
  • parents(): devuelve los padres de un elemento en los distintos niveles dentro del árbol DOM.
  • siblings(): devuelve los elementos 'hermanos' que están al mismo nivel del especificado.

Veamos un ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>InformaticaPC | DOM</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">
        body { background-color:lightyellow; }
        p { color:red; }
        input { margin:4px; }
        #log { color:yellow;background-color:red;margin-bottom:10px; }
    </style>

    <!-- Agregamos JQuery -->
    <script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function()
        {

            var elemento, elementos;

            // -------------------

            // siblings()
            $("#btnHermanos").click(function() {
                resetear();

                elementos = $("#ol1-opc2").siblings();
                $("#log").text( "El elemento con id 'ol-opc2' tiene otros [" + elementos.length + "] a su mismo nivel." );

                elementos.css("color", "blue");
            });

            // -------------------

            // next()
            $("#btnHermanoSiguiente").click(function() {
                resetear();

                $("#ol1-opc2").next().css("color", "blue");
            });

            // -------------------

            // prev()
            $("#btnHermanoAnterior").click(function() {
                resetear();

                $("#ol1-opc2").prev().css("color", "blue");
            });

            // -------------------

            // parent()
            $("#btnPadre").click(function() {
                resetear();

                elemento = $("#principal").parent();
                $("#log").text( "El padre de la lista con id 'principal' tiene id [" + elemento.attr('id') + "]" );

                elemento.css("border", "2px solid red");
            });

            // -------------------

            // parents()
            $("#btnPadres").click(function() {
                resetear();

                elementos = $("#principal").parents();
                $("#log").text( "El elemento con id 'Opción 3B' tiene [" + elementos.length + "] elementos padre: " );

                for( var contador=0; contador < elementos.length; contador++ ) {
                    $("#log").append("'#" + elementos[contador].tagName + "' | ");
                }

            });

            // -------------------

            // children()
            $("#btnHijo").click(function() {
                resetear();

                elementos = $("#sublista2").children();
                elementos.css("color", "blue");
            });

        });

        // -------------------

        function resetear()
        {
            $("#divContenedor1").css("border","none");
            $("li").css("color","black");
            $("#sublista2").css("background-color", "lightyellow");

            $("#log").html(" ")
        }


    </script>
  </head>

  <body>

      <div id="log"> </div>

      <input type="button" id="btnHermanos" value="Elementos al mismo nivel de 'Opción 2B'" />
      <input type="button" id="btnHermanoSiguiente" value="Siguiente elemento al mismo nivel de 'Opción 2B'" />
      <input type="button" id="btnHermanoAnterior" value="Anterior elemento al mismo nivel de 'Opción 2B'" /><br />

      <input type="button" id="btnPadre" value="Obtener padre de la lista principal" />
      <input type="button" id="btnHijo" value="Obtener hijos de 'Opción 3'" /><br />

      <input type="button" id="btnEnlaces" value="Obtener todos los enlaces" />

      <hr id="hr1" />

      <div id="divContenedor1">

          <ul id="principal">

              <li id="opc1"><span>Opción 1</span></li>

              <li id="opc2"><span>Opción 2</span>

                  <ol id="sublista1">
                      <li id="ol1-opc1"><span>Opción 2A</span></li>
                      <li id="ol1-opc2"><span>Opción 2B</span></li>
                      <li id="ol1-opc3"><span>Opción 2C</span></li>
                      <li id="ol1-opc4"><span>Opción 3C</span></li>
                  </ol>

              </li>

              <li id="opc3"><span>Opción 3</span>

                  <ol id="sublista2">
                      <li id="ol2-opc1"><span>Opción 3A</span></li>
                      <li id="ol2-opc2"><span>Opción 3B</span></li>
                      <li id="ol2-opc3"><span>Opción 3C</span></li>
                  </ol>

              </li>

              <li id="opc4"><span>Opción 4</span></li>

          </ul>

      </div>

      <div id="divContenedor2">
          <a href="#">Enlace 1</a>
      </div>

      <div id="divContenedor3">
          <a href="#">Enlace 2</a>
      </div>

  </body>

</html>

Ejemplo

Almacenar datos en elementos del DOM

Los elementos del DOM pueden ser manipulados hasta el punto de que es posible almacenar datos en ellos de forma temporal (en caso de objetos se guardan referencias a ellos).

Los métodos que utilizaremos para ello son data() (para almacenar los datos) y removeData() (para eliminarlos). Estudia el siguiente ejemplo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

  <head>
    <title>InformaticaPC | DOM</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <style type="text/css">
        body { background-color:lightyellow; }
        p { color:red; }
        #log { color:yellow;background-color:red;margin-bottom:10px; }
    </style>

    <!-- Agregamos JQuery -->
    <script type="text/javascript" src="../lib/jquery-1.9.1.min.js"></script>

    <script type="text/javascript">

        $(document).ready(function()
        {
            var valor1, valor2;

            // ----------------

            $("#btnGuardarValor").click(function() {
                valor1 = $("#txtValor1").val();
                valor2 = $("#txtValor2").val();

                $("body").data("valor_1", valor1);
                $("body").data("valor_2", valor2);

                $("#log").text("Valores guardados");
            });

            // ----------------

            $("#btnRestaurarValor").click(function() {
                valor1 = $("body").data("valor_1");
                valor2 = $("body").data("valor_2");

                $("#log").text( "El primer valor recuperado es [" +  valor1 + "] y el segundo es: [" + valor2 + "]" );
            });

            // ----------------

            $("#btnBorrarValor").click(function() {
                valor1 = $("body").removeData("valor_1");
                valor2 = $("body").removeData("valor_2");

                $("#log").text( "El primer valor recuperado es [" +  valor1 + "] y el segundo es: [" + valor2 + "]" );
            });

            // ----------------

            $("#btnGuardarObjeto").click(function() {
                valor1 = $("#txtValor1").val();
                valor2 = $("#txtValor2").val();

                $("body").data( "datos1", { valor_1:valor1, valor_2:valor2} );
                $("body").data( "datos2", { valor_1:valor1*1000, valor_2:valor2*1000} );

                $("#log").text("Objeto guardado");
            });

            // ----------------

            $("#btnRestaurarObjeto").click(function() {
                valor1 = $("body").data("datos1").valor_1;
                valor2 = $("body").data("datos1").valor_2;

                $("#log").html( "El primer valor del objeto recuperado es [" + valor1 + "] y el segundo es [" + valor2 + "]<br />" );

                valor1 = $("body").data("datos2").valor_1;
                valor2 = $("body").data("datos2").valor_2;

                $("#log").append( "El primer valor del objeto recuperado es [" + valor1 + "] y el segundo es [" + valor2 + "]" );
            });

        });

    </script>
  </head>

  <body>

      <div id="log"> </div>

      <label for="txtValor1">Escribe un valor</label>
      <input type="text" id="txtValor1" value="" size="2" />

      <label for="txtValor2">Escribe otro valor:</label>
      <input type="text" id="txtValor2" value="" size="2" />

      <hr />

      <input type="button" id="btnGuardarValor" value="Guardar el valor" />
      <input type="button" id="btnRestaurarValor" value="Restaurar el valor" />
      <input type="button" id="btnBorrarValores" value="Borrar los valores" />

      <hr />

      <input type="button" id="btnGuardarObjeto" value="Guardar un objeto" />
      <input type="button" id="btnRestaurarObjeto" value="Restaurar el objeto" />

  </body>

</html>

Ejemplo

Más información

Vea también: [ Almacenamiento de datos ]

Primera página Página anterior Siguiente Última página
Usamos cookies para ofrecerte una experiencia mejorada, el continuar navegando supone que aceptas su uso