JavaScript Indoloro

// Seleccionar Elementos

// getElementById

let elemento = document.getElementById("cabecera");

elemento.id;    // devuelve la ID

elemento.className;    // devuelve la clase

elemento.textContent;    // devuelve el texto que tenga

elemento.innerText;    // también devuelve el texto que tenga

elemento.innerText = "Nuevo texto";    // modifica el texto que tenga

elemento.style.color = "#fc0";  // cambia propiedades css



// getElementsbyClassName

let enlaces = getElementsbyClassName("enlace"); // nos devuelve todos los elementos de clase "enlace" en HTMLCollection



// querySelector

const encabezado = document.querySelector("#encabezado");

const encabezado = document.querySelector("#principal a:first-child");  // podemos usar todo tipo de selectores CSS

let imagen = document.querySelector("img");     // si hay varias imágenes, nos devuelve la primera



// se pueden usar conjuntamente:

let listaEnlaces = document.getElementById("principal").querySelector(".navegacion").getElementsbyClassName("enlace");



// getElementByTagName   (llamar a una <etiqueta> HTML)

let links = document.getElementsByTagName("a");

links[23].color = "#fcc";

let enlaces = Array.from(links);

enlaces.forEach(function(enlace){

    console.log(enlace.textContent);

})



// querySelectorAll

const enlaces = document.querySelectorAll("#principal .enlace");

console.log(enlaces);   // Devuelve un NodeList con los enlaces

enlaces[1].style.color = "red";

<!-- CÓDIGO HTML -->

<nav id="principal" class="menu">

    <a class="enlace" href="#">Enlace 1</a>

    <a class="enlace" href="#">Enlace 2</a>

    <a class="enlace" href="#">Enlace 3</a>

    <a class="enlace" href="#">Enlace 4</a>

    <a class="enlace" href="#">Enlace 5</a>

</nav>

// CÓDIGO JAVASCRIPT

const navegacion = document.querySelector("#principal");



navegacion.childNodes;  // devuelve los nodos. Incluye incluso hasta los espacios entre etiquetas

navegacion.children;    // No devuelve los espacios en blanco, como sí lo hace childNodes

navegacion.children[0].nodeName     // devuelve el tipo de nodo  (nos diría "A" o "NAV", que es un enlace <a> o <nav> )

navegacion.children[0].nodeType     // devuelve el tipo de nodo:

//  1 = Elementos

//  2 = Atributos

//  3 = Text Node

//  8 = Comentarios

//  9 = Documentos

// 10 = Doctype



// Se pueden anidar .children varias veces, y acceder a propiedades

navegacion.children[1].children[0].textContent = "nuevo texto";



// Acceder al primer y último elemento:

navegacion.lastElementChild

navegacion.firstElementChild



// Contar número de hijos

navegacion.childElementCount;  // Devuelve un número



const enlaces = document.querySelectorAll(".enlace");

enlaces[0];     // primer enlace

enlaces[0].parentNode;     // sube un nivel --> va al nav#principal

enlaces[0].parentElement;     // RECOMENDADO: igualmente sube un nivel --> va al nav#principal

enlaces[0].parentElement.parentElement;     // Sube otro nivel por encima del nav  



const cursos = document.querySelectorAll(".card");

cursos[0];

cursos[0].parentElemnt.parentElemnt.parentElemnt.children[0].textContent = "Hola";



// volviendo a los enlaces:

const enlaces = document.querySelectorAll(".link");

enlaces[4].previousSibiling;    // devuelve el espacio en blanco (nodo)

enlaces[4].previousElementSibiling  // devuelve el elemento previo al mismo nivel

enlaces[4].previousElementSibiling.previousElementSibiling  // devuelve el elemento previo al previo al mismo nivel

enlaces[0].nextElementSibiling  // el elemento siguiente

// CREAR Elementos

const enlace = document.createElement("a");     // Creamos un elemento <a>

enlace.className = "enlace";                    // le añadimos una clase

        enlace.classList.add("enlace");                 // le añadimos una clase (mmétodo 2)

enlace.id = "nuevoId";                          // añador ID;

enlace.setAttribute("href","#");                // Añadir atributos

enlace.textContent = "Nuevo Enlace";            // Añadir texto

enlace.appendChild(document.createTextNode("Nuevo Enlace"));    // Añadir nodo de texto (método 2)



// Agregar al HTML

document.querySelector(".contenedor").appendChild(enlace);



// REEMPLAZAR UN ELEMENTO POR OTRO

const nuevoEncabezado = document.createElement("h2");   // creo elemento

nuevoEncabezado.id = "encabezado";  // le doy una id

nuevoEncabezado.appendChild(document.createTextNode("Este es el nuevo encabezado"));    // añadimos un nodo de texto

    // reemplazando

const anterior = document.querySelector("#encabezado");

const elementoPadre = document.querySelector("#lista-cursos");

elementoPadre.replaceChild(nuevoEncabezado, anterior);



// ELIMINAR ELEMENTOS DEL DOM

const enlaces = document.querySelectorAll(".enlace");

const navegacion = document.querySelector("nav#principal");



enlaces[0].remove();    // Eliminamos el primer elemento desde sí mismo

navegacion.removeChild(enlaces[0]);     // Eliminar desde el padre



// OBTENER UNA CLASE css

const primerLi = document.querySelector(".enlace");

let elemento;

elemento = primerLi.className;          // devuelve la primera clase

elemento = primerLi.classList;          // devuelve todas las clases

elemento = primerLi.classList.add("nueva-clase");       // añade una clase

elemento = primerLi.classList.remove("nueva-clase");    // elimina una clase





// LEER Atributos

primerLi.getAttribute("href");      // nos da el enlace



// AÑADIR/MODIFICAR ATRIBUTOS

primerLi.setAttribute("href","#");      // especificamos el enlace a #



// ELIMINAR ATRIBUTOS

primerLi.removeAttribute("data-id");



// COMPROBAR SI TIENE ATRIBUTOS

primerLi.hasAttribute("data-id");   // boolean

// EVENT LISTENERS

document.querySelector("#submit-buscador").addEventListener("click", function(e){

    e.preventDefault();         // Previene el submit de su comportamiento

    alert(`has echo click, 

            pero no habrá submit

            `);                                   

});



// Se puede hacer de otro modo:

document.querySelector("#submit-buscador").addEventListener("click", pulsarBoton);

function pulsarBoton(e) {

    e.preventDefault();

    console.log("Desde la función ejecutarBoton");





    // Veamos más sobre ese "e" (evento)

    let elemento = e;



    console.log(elemento);  // Devuelve un MouseEvent con mucha información

    elemento.type;      // que tipo de evento (click en este caso)

    elemento.target     // elemento sobre el que se ha hecho click

    elemento.target.id     

    elemento.target.innerText;     

    elemento.target.innerText = "texto cambiado";     

}



// ###################################################

// MOUSE EVENT Listeners

let caja = document.querySelector("#buscador");

function obtenerEvento(e) {

    console.log(e.type);

}

// CLICK

caja.addEventListener("click",obtenerEvento);

// DOBLE CLICK

caja.addEventListener("dblclick",obtenerEvento);

// Mouse Enter

caja.addEventListener("mouseenter",obtenerEvento);

// Mouse Leave

caja.addEventListener("mouseleave",obtenerEvento);

// Mouse Over

caja.addEventListener("mouseover",obtenerEvento);

// Mouse Out (similar a mouseleave)

caja.addEventListener("mouseout",obtenerEvento);

// Mouse Down

caja.addEventListener("mousedown",obtenerEvento);

// Mouse Up

caja.addEventListener("mouseup",obtenerEvento);



// ###################################################

// EVENT LISTENERS PARA INPUTS

let el = document.getElementByTagName("input");

function obtenerEvento(e) {

    console.log(el.value);

    console.log(e.type);

}

// KEYDOWN

el.addEventListener("keydown",obtenerEvento);   // pulsar una tecla

// KEYUP

el.addEventListener("keyup",obtenerEvento);   // dejar de presionar (soltar) una tecla

// KEYPRESS

el.addEventListener("keypress",obtenerEvento);   // tecla presionada

// FOCUS

el.addEventListener("focus",obtenerEvento);   // entrar en el foco

// BLUR

el.addEventListener("blur",obtenerEvento);   // perder el foco (pulsar fuera despues de estar en un input); típico en validación

// CUT

el.addEventListener("cut",obtenerEvento);   // cortar texto

// COPY

el.addEventListener("copy",obtenerEvento);   // copiar texto

// PASTE

el.addEventListener("paste",obtenerEvento);   // pegar texto

// INPUT

el.addEventListener("input",obtenerEvento);   // abarca todos los event listeners anteriores

// CHANGE

el.addEventListener("change",obtenerEvento);   // avisa cuando se cambia en un elemento <select>

Event Bubbling

<div class="contenedor">

    <div class="caja caja1">

        ESTA ES LA CAJA SUPERIOR

        <div class="caja caja2">

            ésta está dentro



            <div class="caja caja3">

                ésta es la más profunda

            </div>

        </div>

    </div>

</div>

let caja1 = document.querySelector(".caja1");

let caja2 = document.querySelector(".caja2");

let caja3 = document.querySelector(".caja3");



caja1.addEventListener("click",mostrarEvento);

caja2.addEventListener("click",mostrarEvento);

caja3.addEventListener("click",mostrarEvento);



// FORMA EN LA QUE SE SOLAPAN

function mostrarEvento(e){

    let cajaClickada = e.target.className;

    console.log(cajaClickada);

    console.log(e.type);

}



// FORMA BUENA!!

function mostrarEvento(e){

    e.stopPropagation();

    let cajaClickada = e.target.className;

    console.log(cajaClickada);

    console.log(e.type);

}



// DELEGATION

document.body.addEventListener("click",eliminarElemento);

function eliminarElemento(e) {

    e.preventDefault();

    // Filtramos (delegamos) las acciones según el elemnto sobre el que se ha hecho click

    if(e.target.classList.contains("borrar-curso")) {

        console.log("borrar");

    } else {

        console.log("No borrar");

    }

    if(e.target.classList.contains("agregar-curso")) {

        console.log("Curso Agregado");

    }

}

// LocalStorage

// LocalStorage persiste después de cerrar el navegador

localStorage.setItem("nombre","Pablo");



// Alñadir a Sesion Storage: No persiste al cerrar el navegador

sessionStorage.setItem("edad",38);



// Borrar algo del local storage

localStorage.removeItem("nombre");



// Obtener valor

localStorage.setItem("color","azul");   //setItem agrega o modifica un valor

localStorage.getItem("color")



// Borrar todo el localstorage

localStorage.clear();

    // Objetos

    // Clases

    // Ajax y XMLHTTPRequest

    // JavaScript Asíncrono o Async JS

    // Fetch API

    // Arrow Functions

    // Async Await