DOM (Document object model)

Author: danielgara - Date: 2013-01-10 00:40:56
 
¿Que es el DOM?
El document object model (por sus siglas en inglés), es simplemente una manera de acceder y manipular los documentos HTML.
Se caracteriza por tomar todo el documento HTML y presentarlo en forma de árbol (tal como muestra la siguiente imagen).

htmltree.gif

El DOM trabaja el documento como si fueran objetos, por ejemplo: según la imagen anterior, el TAG o elemento 'HTML' seria padre de los TAGS 'head' y 'body', y 'body' a su vez seria padre de 'a' y 'h1'; pero no solo eso, 'a' y 'h1' serian también hermanos y toda esta serie de rótulos nos permiten navegar por todo el documento y modificarlo.

¿Donde se usa DOM?
DOM se usa en javascript, se puede crear archivos .js e importarlos, o copiar el código directamente en los templates (usando las etiquetas literal de smarty).

¿Como usar el DOM?
Lo primero y mas común es colocarle a los elementos que queremos modificar mediante javascript un id, luego desde javascript obtener ese elemento vía id. Por ejemplo:
Code:
<body> <ol id="ol1"> <li id="li1"> <span id="span1"> This is Text 1 </span> </li> <li id="li2"> <span id="span2"> This is Text 2 </span> </li> <li id="li3"> <span id="span3"> This is Text 3 </span> </li> </ol> </body>

Ahora supongamos que queremos acceder a la información del elemento con id ol1 desde javascript, según el árbol anteriormente existen muchas maneras de acceder entre las cuales están:
  • document.getElementById("ol1")
  • document.getElementsById("li1").parentNode
  • document.getElementsByTagName("ol").item(0)
  • document.getElementsByTagName("li").item(0).parentNode
  • document.getElementsByTagName("li").item(1).parentNode
  • document.getElementsByTagName("l1").item(2).parentNode
  • document.getElementsByTagName("span").item(2).parentNode.parentNode
  • document.getElementsByTagName("body").item(0).childNodes.item(0)
  • document.body.childNodes.item(0)

Suma de 2 valores usando DOM y javascript
Supongamos que queremos que un usuario ingrese 2 números y el sistema le devuelva el resultado de la suma.

Podríamos hacer la suma recogiendo los datos en un formulario y luego calcular el valor desde php, pero esto requiere que se vuelva a cargar todo el php y todo el template cada vez que se haga una suma, y dado que la operación es tan sencilla es mejor utilizar DOM.

Usando DOM la lógica es sencilla, debemos crear un template donde existan 2 campos de textos, y ademas un botón para activar el calculo, una vez un usuario llene los 2 campos y de clic en el botón el sistema debe usando DOM identificar los 2 campos de texto, extraer los valores, sumarlos y enviar el resultado nuevamente al template para mostrarlo (todo esto sin necesidad de recargar el controlador php).

Miremos el ejemplo funcionando
  1. Creamos un controlador dom.php en la ruta work/dom.php con el siguiente contenido:
    <?php

    require('./configs/include.php');

    class 
    c_dom extends super_controller {

        public function 
    display()
        {
            
    $this->engine->assign('title','DOM');
            
    $this->engine->display('header.tpl');
            
    $this->engine->display('dom.tpl');
            
    $this->engine->display('footer.tpl');
        }
        
        public function 
    run()
        {
            
    $this->display();
        }
    }

    $call = new c_dom();
    $call->run();

    ?>
  2. Creamos el template dom.tpl en la ruta work/templates/t_dark/dom.tpl con el siguiente contenido:
    {literal}
    <script type="text/javascript">
    function suma()
    {
    val1=document.getElementById('value1').value;
    val2=document.getElementById('value2').value;
    total=parseInt(val1)+parseInt(val2);
    document.getElementById('result').innerHTML='El resultado es '+total;
    }
    </script>
    {/literal}

    <div id="result"></div>

    <div class="well">
    <table cellspacing="2">
    <tr><td>Insert value 1: <input type="text" name="value1" id="value1" /></td></tr>
    <tr><td>Insert value 2: <input type="text" name="value2" id="value2" /></td></tr>
    <tr><td><button class="btn" onClick="suma()">Calculate</button></td></tr>
    </table>
    </div>
  3. Ejecutamos el controlador desde localhost/work/dom.php y realizamos la suma (como vemos el valor del resultado será asignado a la división 'result' que al principio estaba vacía).

Comments

Alerts There are not comments, be the first
Alerts To post comments, you must be a registered