Tironemota

JavaScript

Curso de Javascript
21/04/2023

Edutin Academy

Nombre: Tirone Mota
Correo: tironemota@gmail.com
Password: tironeedutin2023

Mostrar repuesta o resultado del código 21/04/2023

    Metódos:

  • alert(); función muestra resultado con un mensaje de alerta
  • <script>
        alert("Hola mundo...!");
    </script>
    
  • console.log(); función muestra resultado por la consola del navegador
  • <script>
        console.log("Hola mundo...!");
    </script>
    
  • document.write(); función imprime resultado en nuestro documento
  • <script>
        document.write("Hola mundo...!");
    </script>
    

Comentarios en el código 21/04/2023

    // Este es un comentario de una linea

    /* Este es un comentario
    de bloque, ocupando más de una línea */

Variables: Contenedor de valores 21/04/2023

Se utiliza la palabra clave var para declarar una variable

<script>
    // Declaramos y damos valor a variable
    var nombreVariable = 9 + 10 ;
    // Mostramos en el documento
    document.write(nombreVariable);
</script>
    
Resultado: 19

Tipos de datos 21/04/2023

  • Números (numbers): enteros y flotantes
  • <script>
        // Declaramos y damos valor a variable
        var numeroEntero = 7 ;
        /* Mostramos valor concatenandolo
        con un texto usando el signo más (+) */
        document.write("Valor número entero: " + numeroEntero);
    </script>
        
    Resultado: Valor número entero: 7
    
    <script>
        // Declaramos y damos valor a variable
        var numeroFlotante = 6.66 ;
        /* Mostramos valor concatenandolo
        con un texto usando el signo más (+) */
        document.write("Valor número flotante: " + numeroFlotante);
    </script>
        
    Resultado: Valor número flotante: 6.66
    
  • Cadenas de texto (string): van entre comillas dobles ("") o simples ('')
  • <script>
        // Declaramos y damos valor a variable
        var caracteres = "123wqx+!?=()mas" ;
        /* Mostramos valor concatenandolo
        con un texto usando el signo más (+) */
        document.write("Valor de tipo string: " + caracteres);
    </script>
        
    Resultado: Valor de tipo string: 123wqx+!?=()mas
    
    <script>
        // Declaramos y damos valor a variables con números de tipo string
        var num_string1 = "10";
        var num_string2 = "20";
        /* Mostramos valor concatenandolo
        con un texto usando el signo más (+) */
        document.write("Concatena: " + num_string1 + num_string2);
    </script>
        
    Resultado: Concatena: 1020
    
  • Boleanos (bool): Solo pueden contener uno de dos valores:
    verdadero o falso (True o False) (1 ó 0)
  • <script>
        // Declaramos y damos valor a variables
        var boolFalse = false;
        var boolTrue = true;
        // Mostramos valor
        document.write("Valor de tipo Booleano: " + boolFalse + "<br>");
        document.write("Valor de tipo Booleano: " + boolTrue);
    </script>
        
    Resultado: Valor de tipo Booleano: false
                Valor de tipo Booleano: true
    
  • Objetos
  • Funciones
  • Indefinidos
  • Operadores 22/04/2023

    • Aritméticos
      • Suma (+)
      • Resta (-)
      • Multiplicación (*)
      • División (/)
      • Residuo (%)
    <script>
        // Declaramos y damos valor a variables
        var numero1 = 10, numero2 = 8, cadena = "101010";
        // Mostramos valor
        document.write("OPERADORES ARITMETICOS <br>");
        document.write("Suma: 10 + 8 = " + (numero1 + numero2) + "<br>");
        document.write("Resta: 10 - 8 = " + (numero1 - numero2) + "<br>");
        document.write("Multiplica: 10 * 8 = " + (numero1 * numero2) + "<br>");
        document.write("Divide: 10 / 8 = " + (numero1 / numero2) + "<br>");
        document.write("Residuo: 10 % 8 = " + (numero1 % numero2) + "<br>");
        document.write("Concatena: numero1 + (cadena = " + numero1) + cadena + "<br>");
        document.write("Concatena: cadena + (cadena = " + cadena + cadena));
    </script>
        
    Resultado: 
            OPERADORES ARITMETICOS
            Suma: 10 + 8 = 108
            Resta: 10 - 8 = 2
            Multiplica: 10 * 8 = 80
            Divide: 10 / 8 = 1.25
            Residuo: 10 % 8 = 2
            Concatena: numero1 + cadena = 10101010
            Concatena: cadena + cadena = 101010101010
    
  • Unario
  • <script>
        // typeof: muestra una cadena con el tipo de dato que le demos
        // Declaramos y damos valor a variables
        var numero1 = 10, numero2 = 8, cadena = "101010";
        // Mostramos valor
        document.write("OPERADOR UNARIO <br>");
        document.write(typeof numero1 + "<br>"); //number
        document.write(typeof cadena + "<br>"); //string
        document.write(typeof true); //boolean
    </script>
        
    Resultado: OPERADOR UNARIO
                number
                string
                boolean
    
  • Comparación: Devuelve un valor booleano (True o False)
    • === Exactamente igual que
    • /== Distinto que
    • < Menor que
    • > Mayor que
    • <= Menor o igual que
    • >= Mayor o igual que
  • <script>
        // Declaramos y damos valor a variables
        var numero1 = 10, numero2 = 8, cadena = "101010";
        // Mostramos valor
        document.write("OPERADORES DE COMPARACION <br>");
        document.write((numero1 === numero2) + "<br>"); //false
        document.write((numero1 !== numero2) + "<br>"); //true
        document.write((numero1 < numero2) + "<br>"); //false
        document.write((numero1 > numero2) + "<br>"); //true
        document.write((numero1 >= numero2) + "<br>"); //false
        document.write(10 >= 10); //true
    </script>
        
    Resultado: OPERADORES DE COMPARACION
                false
                true
                false
                true
                false
                true
    
  • Lógicos
    • AND (y): && Devuelve true sólo cuando ambos valores son true
    • OR (o): || Devuelve true si cualquiera de los valores es true
    • NOT (no): ! Invierte el valor, true produce false y false un true
  • <script>
        // Declaramos y damos valor a variables
        var numero1 = 10, numero2 = 8, cadena = "101010";
        // Mostramos valor
        document.write("OPERADORES LÓGICOS <br>");
        document.write("Operador && <br>");
        document.write((false && true) + "<br>"); //false
        document.write((false && false) + "<br>"); //false
        document.write((true && true) + "<br>"); //true
        document.write((numero1 < numero2) && (numero1 > numero2)); //false
    </script>
    
    <script>
        // Declaramos y damos valor a variables
        var numero1 = 10, numero2 = 8, cadena = "101010";
        // Mostramos valor
        document.write("OPERADORES LÓGICOS <br>");
        document.write("Operador || <br>");
        document.write((false || true) + "<br>"); //true
        document.write((false || false) + "<br>"); //false
        document.write((true || true) + "<br>"); //true
        document.write((numero1 < numero2) || (numero1 > numero2)); //true
    </script>
    
    <script>
        // Declaramos y damos valor a variables
        var numero1 = 10, numero2 = 8, cadena = "101010";
        // Mostramos valor
        document.write("OPERADORES LÓGICOS <br>");
        document.write("Operador ! <br>");
        document.write(!(numero1 < numero2) + "<br>"); //true
        document.write(!(numero1 > numero2) + "<br>"); //false
    </script>
    
  • Ternarios: Opera sobre tre valores
    Cuando es true se elige el valor del medio
    Cuando es false se elige el de la derecha
  • <script>
        document.write("OPERADORES TERNARIOS <br>");
        document.write((true ? 2 : 1) + "<br>"); // 2
        document.write((false ? 2 : 1) + "<br>"); // 1
    </script>
    

    Sentencias condicionales 22/04/2023

    if, else if, else

    Sí(Condición es verdadera){
        // Ejecuta esta parte
    } sino, Sí (esta condición es verdadera) {
        // Ejecuta esta parte
    } sino {
        // Ejecuta esta parte
    }
    
    <script>
    var semaforo = "morado";
    if(semaforo === "verde"){
        alert("El semaforo está en verde");
    }else if(semaforo === "rojo"){
        alert("El semaforo está en rojo");
    }else if(semaforo === "amarillo"){
        alert("El semaforo está en amarillo");
    }else{
        // Como no está en verde, ni rojo, ni amarillo
        // Mostramos el valor de la variable
        alert("El semaforo está en " + semaforo);
    }
    </script>
    
    <script>
    //Todo lo que contiene un prompt() se concidera un string
    //La función Number() convierte string a número
    var tuEdad = Number(prompt("Escriba su edad: "));
    //Si tu edad es mayor o igual a 18
    if(tuEdad >= 18) {
        alert("Tú eres mayor de edad");
    } else {
        alert("Tú eres menor de edad");
    }
    </script>
    

    Bucles- Control de flujo - Ciclos 22/04/2023

    Bucle while

    <script>
    /* Bucle while(mientras): La condición entre paréntesis
    sea true, las declaraciones dentro del bucle
    se seguirán ejecutando */
    var num = 0; // Inicio del ciclo
    // Mientras que num sea menor o igual a 100
    while(num <= 100){ // Evaluamos
        // Muestro el valor de la variable
        document.write(num);
        // Le sumo 2 cada ves que la muestro
        num = num + 2; // Fin ciclo
    }
    </script>
    

    Bucle do-while

    <script>
    // Bucle do-while(hacer mientras) Se ejecuta por lo menos una vez
    // pagos de una deuda
    var pago = 0;
    var totalDePagos = 0;
    do{
        // Solicitamos el pago
        pago = Number(prompt("De cuanto es tú pago: "));
        totalDePagos = totalDePagos + pago;
    } while(pago);
    /* Muestro el monto total de pago.
    Para esto el último pago sera cero. */
    alert("Tú pago fue de: " + totalDePagos);
    </script>
    

    Bucle for

    <script>
    // Bucle for(para): 
    /*
    for(inicia; evalúa; final){
        // Repite este bloque
    }
    */
    // Mostrar los números pares hasta el 100
    for(num = 0; num <= 100; num = num + 2){
        document.write(num);
    }
    </script>
    

    Funciones 22/04/2023

    <script>
    // Palabra clave function
    // Nombre de la función, la que desees saludo
    function saludo(){
        // Creamos un alerta
        alert("Wolasss!!");
    }
    /* Llamamos la función. 
    Ésta mostrará el alerta al cargar la página */
    saludo();
    </script>
    
    <script>
    /* Utilizamos la misma función.
    La llamaremos desde un botón. */
    function saludo(){
        // Creamos un alerta
        alert("Wolasss!!");
    }
    </script>
    // Bóton fruera del script 
    // en cualquier lugar de la página
    <button onclick="saludo();">Pulsame</button>
    

    Funciones con parametros 23/04/2023

    Función con un parametro

    <script>
        // Valor del parametro nombre
        function saludo2(nombre){
            document.write("Hola " + nombre + "<br>");
        }
    // LLamamos la función y le pasamos un valor
    saludo2("Marcos");
    saludo2("Juan");
    saludo2("María");
    </script>
    
    Resultado:
    Hola Marcos
    Hola Juan
    Hola María

    Función con varios parametros

    <script>
        // Parametro: nombre
        // Parametro: apellido
        function saludo3(nombre, apellido){
            document.write("Hola " + nombre + apellido + "<br>");
        }
    // LLamamos la función y le pasamos los parametros
    saludo3("Marcos ", "Sanchez");
    saludo3("Juan ", "García");
    // Ejemplo: no conocemos el apellido
    // Muestra error undefined (valor no definido)
    saludo3("María ");
    // Espacio en blanco
    saludo3("María ", " ");
    </script>
    
    Resultado:
    Hola Marcos Sanchez
    Hola Juan García
    Hola María undefined
    Hola María

    Llamar a funciones desde otra función 23/04/2023

    Ejemplo 1

    <script>
    function uno(){
        document.write("Soy la función numero 1 ");
    };
    function dos(){
        document.write("Llamando a 1: ");
        uno();
    };
    dos();
    </script>
    

    Resultado:
    Llamando a 1: Soy la función numero 1

    Ejemplo 2

    <script>
    function tres(){
        document.write("Soy la función 3 ");
    };
    function cuatro(){
        document.write("Llamando a 3 ");
    };
    function telefono(){
        tres();
        cuatro();
    };
    //Ejecutamos función telefono
    telefono();
    //Invertimos los resulatados
    function telefono2(){
        cuatro();
        tres();
    };
    //Ejecutamos función telefono2
    telefono2();
    </script>
    

    Resultado telefono():
    Soy la función 3 Llamando a 3

    Resultado telefono2():
    Llamando a 3 Soy la función 3

    Variables locales y globales 23/04/2023

    Variable local

    Una variable es local cuando es declarada dentro de una función y no pudiendo ser usada fuera de la función

    <script>
    function local(){
        var x = "informatica";
        //Llamamos la variable desde la funación
        document.write("A mi me gusta la " + x + "<br>");
    };
    local();
    //Llamamos la variable fuera de la función pero no funciona
    document.write("A mi no me gusta la " + x + "<br>");
    </script>
    

    Resultado:
    A mi me gusta la informatica

    Variable global

    Una variable es global cuando es declarada fuera de una función, donde puede ser llamada de claquier punto de nuestro script

    <script>
    var x = "informatica";
    function local(){
        //Llamamos la variable desde la funación
        document.write("A mi me gusta la " + x + "<br>");
    };
    local();
    //Llamamos la variable fuera de la función pero no funciona
    document.write("A mi no me gusta la " + x + "<br>");
    </script>
    

    Resultado:
    A mi me gusta la informatica
    A mi no me gusta la informatica

    Javascript orientada a objetos 23/04/2023

    Sintaxis

    CLASE mascota{
        PROPIEDADES (variables)
            - cabeza
            - patas
            - cola
        METODOS (funciones)
            - camina
            - corre
            - come
    }
    
    // creamos un objeto de la CLASE
    OBJETO gato uno {
        cabeza: grande
        patas: largas
        cola: pequeña
    
        camina: rapido
        corre: largas distancias
        come: comida especial
    }
    
    OBJETO gato dos {
        cabeza: pequeña
        patas: cortas
        cola: larga
    
        camina: lento
        corre: no
        come: cualquier comida
    }
    
    mostrame gato uno > cabeza
    

    Ejemplo 1:

    <script>
    class miClase{
        constructor(primero, segundo){
            this.uno = primero;
            this.dos = segundo;
            this.tres = "Hola a todos";
        };
        miMetodoUno(){
            return this.uno;
        }
        miMetodoDos(parametroUno, parametroDos){
            document.write(
                "El parametro UNO es: " + parametroUno +
                "<br>El parametro DOS es: " + parametroDos
            );
        };
    };
    // CREAR UN OBJETO - instanciar
    var objetoUno = new miClase("Yoney", 777777);
    </script>
    

    Ejemplo 1.1: Recupero parametro uno

    <script>
    // RECUPERAR DATOS
    document.write(objetoUno.uno);
    </script>
    

    Resultado: Yoney

    Ejemplo 1.2: Recupero parametro dos

    <script>
    // RECUPERAR DATOS
    document.write(objetoUno.dos);
    </script>
    

    Resultado: 777777

    Ejemplo 1.3: Recupero miMetodoUno

    <script>
    // RECUPERAR DATOS
    document.write(objetoUno.miMetodoUno());
    </script>
    

    Resultado: Yoney

    Ejemplo 1.4: Recupero miMetodoDos con nuevos parametros

    <script>
    // RECUPERAR DATOS
    objetoUno.miMetodoDos("Alex", 222222);
    </script>
    

    Resultado:
    El parametro UNO es: Alex
    El parametro DOS es: 222222

    Ejemplo 2: Creamos nueva clase

    <script>
    //CREAMOS CLASE UNO
    class miClaseUno{
        constructor(primero, segundo){
            this.uno = primero;
            this.dos = segundo;
            this.tres = "Hola a todos";
        };
        miMetodoUno(){
            return this.uno;
        }
        miMetodoDos(parametroUno, parametroDos){
            document.write(
                "El parametro UNO es: " + parametroUno +
                "<br>El parametro DOS es: " + parametroDos
            );
        };
    };
    //CREAMOS CLASE DOS Y SERÁ UNA EXTENCIÓN DE LA UNO
    class miClaseDos extends miClaseUno{
    
    };
    // LA GUARDAMOS EN UNA VARIABLE CON PARAMETROS
    var ObjetoTres = new miClaseDos("Miguel", 55);
    </script>
    

    Ejemplo 2.1: Recupero el parametro uno de miClaseDos

    <script>
    // RECUPERO el parametro uno de miClaseDos
    document.write(ObjetoTres.uno);
    </script>
    

    Resultado: Miguel

    Ejemplo 2.2: Recupero el parametro dos de miClaseDos

    <script>
    // RECUPERO el parametro dos de miClaseDos
    document.write(ObjetoTres.dos);
    </script>
    

    Resultado: 55

    Ejemplo 2.3: Recupero el parametro uno con miMetodoUno

    <script>
    // RECUPERO el parametro uno con miMetodoUno
    document.write(ObjetoTres.miMetodoUno());
    </script>
    

    Resultado: Miguel

    Ejemplo 3: Creamos miClaseTres

    <script>
    //CREAMOS CLASE UNO
    class miClaseUno{
        constructor(primero, segundo){
            this.uno = primero;
            this.dos = segundo;
            this.tres = "Hola a todos";
        };
        miMetodoUno(){
            return this.uno;
        }
        miMetodoDos(parametroUno, parametroDos){
            document.write(
                "El parametro UNO es: " + parametroUno +
                "<br>El parametro DOS es: " + parametroDos
            );
        };
    };
    //CREAMOS CLASE DOS Y SERÁ UNA EXTENCIÓN DE LA UNO
    class miClaseDos extends miClaseUno{
    
    };
    // LA GUARDAMOS EN UNA VARIABLE CON PARAMETROS
    var ObjetoTres = new miClaseDos("Miguel", 55);
    
    // CREAMOS CLASE TRES, AL IGUAL QUE LA CLASE DOS, 
    // SERÁ UNA EXTENCIÓN DE LA UNO Y CONTARÁ CON TRES PARAMETROS
    class miClaseTres extends miClaseUno{
        constructor(uno, dos, cuarto){
            super(uno, dos)
            this.cuatro = cuarto;
        }
    };
    // GUARDAMOS EN VARIABLE
    var ObjetoCuatro = new miClaseTres("Tomás", "Zapata", 75);
    </script>
    

    Ejemplo 3.1: Recupero parametro uno de ObjetoCuatro

    <script>
    // RECUPERAR DATOS
    document.write(ObjetoCuatro.uno);
    </script>
    

    Resultado: Tomás

    Ejemplo 3.2: Recupero parametro dos de ObjetoCuatro

    <script>
    // RECUPERAR DATOS
    document.write(ObjetoCuatro.dos);
    </script>
    

    Resultado: Zapata

    Ejemplo 3.3: Recupero parametro tres de ObjetoCuatro

    <script>
    // RECUPERAR DATOS
    document.write(ObjetoCuatro.tres);
    </script>
    

    Resultado: Hola a todos

    Ejemplo 3.4: Recupero parametro cuatro de ObjetoCuatro

    <script>
    // RECUPERAR DATOS
    document.write(ObjetoCuatro.cuatro);
    </script>
    

    Resultado: 75

    Document Object Model (DOM) 26/04/2023

    El DOM nos permite acceder a los elementos de nuestro ducumento

    <body>
        <p>Gato, perro, <b>caballo</b></p>
        <p>Sardina, atún, ballena</p>
        <p id="ejem">Gusano, culebra, caimán</p>
    </body>
    <script>
        //Variable con acceso a los elementos <p>
        var elementosP = document.getElementsByTagName("p");
            //Mostramos el contenido de la <p> como array
            //Muestra: Contenido de p1: Gato, perro, caballo
            document.write("Contenido de p1: " + elementosP[0].innerHTML + "<br>");
            //Muestra: Contenido de p2: Sardina, atún, ballena
            document.write("Contenido de p2: " + elementosP[1].innerHTML + "<br>");
            //Muestra: Contenido de p3: Gusano, culebra, caimán
            document.write("Contenido de p3: " + elementosP[2].innerHTML + "<br>");
        //Variable con acceso a los elementos <b>
        var elementosB = document.getElementsByTagName("b");
            //Mostramos el contenido de la <b> como array
            //Muestra: Contenido de b1: caballo
            document.write("Contenido de b1: " + elementosB[0].innerHTML + "<br>");
        //Variable con acceso a los index (id="")
        var indexado = document.getElementById("ejem");
            //Muestra: Contenido index id='ejem': Gusano, culebra, caimán
            document.write("Contenido index id='ejem': " + indexado.innerHTML);
    </script>
    

    Creando nodos en el DOM 27/04/2023

    Agregar nodo a nuestro documento

    • Gato, perro, caballo
    • Sardina, atún, ballena
    • Gusano, culebra, caimán
    <div>
        <div id="subTitulo"></div>
        <ul>
            <li>Gato, perro, caballo</li>
            <li>Sardina, atún, ballena</li>
            <li>Gusano, culebra, caimán</li>
        </ul>
    </div>
    
    <script>
    // Paso 1: Crear el elemento
    var elementoDiv = document.createElement("h2");
    // Paso 2: Crear un nodo de texto
    var contenidoDiv = document.createTextNode("Este es nuestro titular");
    // Paso 3: Añadir el nodo de texto al elemento HTML
    elementoDiv.appendChild(contenidoDiv);
    // Paso 4: Agregar atributos al elemento HTML
    elementoDiv.setAttribute("align", "center");
    // Paso 5: Agregar el elemento al documento
    document.getElementById("subTitulo").appendChild(elementoDiv);
    
    // Para colocarlo al final del body
    document.body.appendChild(elementoDiv);
    </script>
    

    Resultado:

    Este es nuestro titular

    • Gato, perro, caballo
    • Sardina, atún, ballena
    • Gusano, culebra, caimán

    Agregar nodos al DOM 27/04/2023

    1. Gato, perro, caballo
    2. Sardina, atún, ballena
    3. Gusano, culebra, caimán

    Como crear un elemento y con Nodo de texto

    <div>
        <ol id="listaZoo">
            <li>Gato, perro, caballo</li>
            <li>Sardina, atún, ballena</li>
            <li>Gusano, culebra, caimán</li>
        </ol>
    </div>
    <script>
    //Variables: Creamos el elemento y el Nodo de texto
    var elemento = document.createElement("li"),
        contenido = document.createTextNode("Nuevo item con su texto");
    //Agregamos el contenido al elemento
    elemento.appendChild(contenido);
    //Lo agregamos al final del body
    document.body.appendChild(elemento);
    </script>
    

    Posecionamos el elemento al final del body

    <script>
    //Lo agregamos al final del body
    document.body.appendChild(elemento);
    </script>
    
    1. Gato, perro, caballo
    2. Sardina, atún, ballena
    3. Gusano, culebra, caimán
  • Nuevo item con su texto
  • Posecionamos el elemento al final de la lista

    <script>
    // Variable: Contiene elemento padre tomando el index y
    // Mostramos al final de listaZoo
    var padre = document.getElementById("listaZoo");
    padre.appendChild(elemento);
    </script>
    
    1. Gato, perro, caballo
    2. Sardina, atún, ballena
    3. Gusano, culebra, caimán
    4. Nuevo item con su texto

    Posecionamos el elemento al final de la lista

    Los resultados de esta variable son idénticos al ejemplo anterior

    <script>
    // Variable: Contiene elemento padre tomando
    // como referencial el arreglo de los li como array
    // Mostramos al final de listaZoo
    var padre = document.getElementsByTagName("li")[0].parentNode;
    padre.appendChild(elemento);
    </script>
    
    1. Gato, perro, caballo
    2. Sardina, atún, ballena
    3. Gusano, culebra, caimán
    4. Nuevo item con su texto

    Posecionamos el elemento antes del primer elemento (li)

    <script>
    //Para mostrar en otra posición
    var padre = document.getElementsByTagName("li")[0].parentNode,
        //Quiero agregarlo antes de
        primerElem = document.getElementsByTagName("li")[0];
    //Requiere dos parametros: El elemento y Antes de que
    padre.insertBefore(elemento, primerElem);
    </script>
    
    1. Nuevo item con su texto
    2. Gato, perro, caballo
    3. Sardina, atún, ballena
    4. Gusano, culebra, caimán

    Posecionamos el elemento antes del tercer elemento (li)

    <script>
    //Para mostrar en otra posición
    var padre = document.getElementsByTagName("li")[0].parentNode,
        //Quiero agregarlo antes de
        tercerElem = document.getElementsByTagName("li")[2];
    //Requiere dos parametros: El elemento y Antes de que
    padre.insertBefore(elemento, tercerElem);
    </script>
    
    1. Gato, perro, caballo
    2. Sardina, atún, ballena
    3. Nuevo item con su texto
    4. Gusano, culebra, caimán

    Modificar Nodos de DOM 28/04/2023

    Utilizaremos como ejemplo la siguiente lista:

    1. Este es el item uno
    2. Este es el item dos
    <ol>
        <li id="lista">Este es el item uno</li>
        <li>Este es el item dos</li>
    </ol>
    

    1.- Accedemos al texto y ejecuta las etiquetas HTML

    <script>
        //Acceder a un elemento indexado
        var primerElemento = document.getElementById("lista");
        //Accedemos al texto y ejecuta las etiquetas HTML
        primerElemento.innerHTML = "Nuevo texto <b>Tironemota</b>";
    </script>
    

    Resultado:

    1. Nuevo texto Tironemota
    2. Este es el item dos

    2.- Accedemos al texto y nos muestra las etiquetas html como texto plano

    <script>
        //Acceder a un elemento indexado
        var primerElemento = document.getElementById("lista");
        //Accedemos al texto y nos muestra la etiquetas html como texto plano
        primerElemento.textContent = "Nuevo texto <b>Tironemota</b>";
    </script>
    

    Resultado:

    1. Nuevo texto <b>Tironemota</b>
    2. Este es el item dos

    3.- Agregar atributos (Debemos tener cuidado con la comillas)

    <script>
        //Acceder a un elemento indexado
        var primerElemento = document.getElementById("lista");
        //Agregar atributos (Debemos tener cuidado con la comillas)
        // Comillas simple dentro de comilla doble
        primerElemento.innerHTML = "Nuevo texto <b style='color:#F00'>Tironemota</b>";
        // O utilizamos escape de comillas
        primerElemento.innerHTML = "Nuevo texto <b style=\"color:#F00\">Tironemota</b>";
    </script>
    

    Resultado:

    1. Nuevo texto Tironemota
    2. Este es el item dos

    Reemplazar Nodos de DOM 28/04/2023

    Utilizaremos como ejemplo la siguiente lista:

    1. Este es el item uno
    2. Este es el item dos

    Creamos un elemento para reemplazar a otro elemento que es eliminado

    Opción 1.- Valida pero no es lo más correcto

    <script>
        //Creamos elemento y Nodo de texto
        var elemento = document.createElement("li"),
            contenido = document.createTextNode("Nuevo texto");
        //Agregamos el texto al elemento
        elemento.appendChild(contenido);
        //Acedemos al elemento padre
        var padre = document.getElementsByTagName("li")[0].parentNode;
        //Remplazamos elementos con replaceChild()
        //Contiene dos parametros: Primero (elemento agregar), Segundo (elemento eliminar)
        //Opción 1.- Valida pero no es lo más correcto
        padre.replaceChild(elemento, document.getElementsByTagName("li")[0]);
    </script>
    

    Opción 2.- Creas variable contenedora del elemento que desees eliminar

    <script>
        //Creamos elemento y Nodo de texto
        var elemento = document.createElement("li"),
            contenido = document.createTextNode("Nuevo texto");
        //Agregamos el texto al elemento
        elemento.appendChild(contenido);
        //Acedemos al elemento padre
        var padre = document.getElementsByTagName("li")[0].parentNode,
            //Opción 2.- Creas variable contenedora del elemento que deses eliminar
            referencia = document.getElementsByTagName("li")[0];
            //Remplazamos elementos con replaceChild()
            //Contiene dos parametros: Primero (elemento agregar), Segundo (elemento eliminar)
        padre.replaceChild(elemento, referencia);
    </script>
    

    Resultado:

    1. Nuevo texto
    2. Este es el item dos

    Eliminar Nodos de DOM 28/04/2023

    Utilizaremos como ejemplo la siguiente lista:

    1. Este es el item uno
    2. Este es el item dos

    Eliminamos el primer item de la lista

    <script>
        //Creamos elemento y Nodo de texto
        var elemento = document.createElement("li"),
            contenido = document.createTextNode("Nuevo texto");
        //Agregamos el texto al elemento
        elemento.appendChild(contenido);
        //Acedemos al elemento padre
        var padre = document.getElementsByTagName("li")[0].parentNode,
            //Accedemos al elemento que deseo eliminar
            referencia = document.getElementsByTagName("li")[0];
        padre.removeChild(referencia);
    </script>
    

    Resultado:

    1. Este es el item dos