Ir al contenido principal

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

Comentarios

Publicar un comentario

Entradas más populares de este blog

Pasos para remover Postgresql 8.3 en MAC OS

Tomado de: http://forums.enterprisedb.com/posts/list/1437.page In Mac OSX: (Assuming Default Locations) Via uninstaller: 1) In the installation directory, there will be a uninstall-postgresql.app file will be there, executing (double clicking) that will uninstall the postgresql installation. Manual Uninstallation: 1) Stop the server sudo /sbin/SystemStarter stop postgresql-8.3 2) Remove menu shortcuts: sudo rm -rf /Applications/PostgreSQL 8.3 3) Remove the ini file sudo rm -rf /etc/postgres-reg.ini 4) Removing Startup Items sudo rm -rf /Library/StartupItems/postgresql-8.3 5) Remove the data and installed files sudo rm -rf /Library/PostgreSQL/8.3 6) Delete the user postgres sudo dscl . delete /users/postgres
26 comentarios
Leer más

Enrique Bunbury - 3 de Octubre 2009 - Heredia CR

Via periodico la nacion, me entero de este conciertazo: http://www.nacion.com/viva/2009/julio/29/viva2042768.html Ah esperar mas detalles y la venta de la entradas, "Para solo si me perdonas ..." EDIT ..... Via http://www.enriquebunbury.com/hellville.aspx (gracias a andres por su post) venta anticipada: Entradas a la venta a partir del 13 de agosto en: www.costaricaticket.com Por ahi estare anunciando, el 13 si las estan vendiendo!
10 comentarios
Leer más

Impensando acerca de las referencias en Java

Fue hace ya algún tiempo que pase un rato discutiendo con algunos compañeros acerca de si existe o no el paso por referencia; el discurso fue mucho hacia que en Java el comportamiento, en el supuestamente pasamos por referencia un objeto y por valor los objetos primitivos creo mucha polémica. Para ubicarnos en contexto veamos el siguiente ejemplo. public static void main(String[] args) { int value = 10; changeValue(value); System.out.println("value = " + value); User user = new User(); Name name = new Name(); user.setName(name); name.setName("jsanca"); name.setLastName("XXX"); user.setPassword("123queso"); System.out.println("user: " + user.getName().getName() + ", " + user.getName().getLastName() + ", " + user.getPassword()); changeValue1(user); System.out.println("user: " + user.getName().getName() + ", " + user.getName().getLastName() + ", " + user.ge...
11 comentarios
Leer más