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

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

Wikipedia data base schema

Algo interesante como caso de estudio, especialmente para los que estén cursando bases de datos, el esquema de la Wikipedia esta disponible para hechar un ojo. A simple vista, me gusta mucho la simplicidad y lo bien documentada que se encuentra, vale la pena dedicarle un tiempo. http://www.wikipedia.org/
2 comentarios
Leer más

Analizador de expresiones algebraicas recursivo decendente

Como les mencione en un post previo, estoy leyendo el libro el arte de programar en Java, el primer ejercicio consiste en un analizador de expresiones algebraicas recursivo descendente, el mismo consiste en la posibilidad de tomar una cadena que contenga una expresión matemática, la misma puede contener valores en punto flotante, sumar, restar, dividir, multiplicar, sacar exponente (potencia), uso de paréntesis para priorizar una operación, etc. A continuación clase a clase, con una pequeña explicación Lo primero que definiremos es una suite de excepciones para reportar errores, no tiene mucha ciencia, hay una para la division entre cero, cuando no existe una expresión valida, error de sintaxis o cuando los paréntesis no se encuentran balanceados, veamos package cap2; /** * Exception para reportar que hay al intentar dividir entre cero * * User: jsanca * Date: 4/16/13 * Time: 1:30 AM * @author jsanca */ public class DividedByZeroException extends RuntimeException { ...
4 comentarios
Leer más