viernes, mayo 11, 2012

Javascript y DOM (creando Listas)

El siguiente es un ejemplo de Javascript de como crear una lista con parrafos adentro, utilizando para ello unicamente el DOM, adicionalmente se muestra un ejemplo de como usar el getElementByTag, con el cual obtenemos una Array de tag y cambiamos el estilo (color) a azul

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>New Web Project</title>

       
    </head>
    <body>
        <div>
            <ul>
                <li><p>Uno</p></li>
                <li><p>Dos</p></li>
                <li><p>Tres</p></li>
                <li><p>Cuatro</p></li>
            </ul>
        </div>
       
        <hr/>

        <div id="ulDinamico">
        </div>       

        <a href="#" onclick="cambiarColor(); return false;">Cambiar color a todos los parrafos</a>
       
        <script type="text/javascript">

            var ulDinamico = document.getElementById("ulDinamico");
            var ul = document.createElement("ul");
            var li = document.createElement("li");
            var p = document.createElement("p");
            var text = document.createTextNode("Uno");
           
            p.appendChild(text);
            li.appendChild(p);
            ul.appendChild(li);

            // Campo 2
            li = document.createElement("li");
            p = document.createElement("p");
            text = document.createTextNode("Dos");
           
            p.appendChild(text);
            li.appendChild(p);
            ul.appendChild(li);

            // Campo 3
            li = document.createElement("li");
            p = document.createElement("p");
            text = document.createTextNode("Tres");
           
            p.appendChild(text);
            li.appendChild(p);
            ul.appendChild(li);

            // Campo 4
            li = document.createElement("li");
            p = document.createElement("p");
            text = document.createTextNode("Cuatro");
           
            p.appendChild(text);
            li.appendChild(p);
            ul.appendChild(li);
           
            ulDinamico.appendChild(ul);

            function cambiarColor () {
           
                var parrafosArray = document.body.getElementsByTagName("p"); console.log(parrafosArray);
                var parrafo;
                var i = 0;   
                for (i = 0; i < parrafosArray.length; ++i) {
               
                parrafo = parrafosArray [i];
                console.log(parrafo);
                parrafo.style.color="blue";
                }   
            }   
        </script>
    </body>
</html>

No hay comentarios.: