100 días de código en Javascript... 1era parte

En este post veremos algunos ejemplos de código en Javascript.

1. Si quieres obtener un elemento mediante su id debes hacerlo de esta forma:

const item = document.getElementById("item");

2. Si quieres obtener un arreglo (inicia en 0) de elementos debes hacer esto:

var items = document.getElementsByTagName("tag");

/*Arreglo de h1*/
var cabezas = document.getElementsByTagName("h1");

//Si necesitas obtener el primer elemento h1:
console.log(cabezas[0]);

//Si quieres obtener su tamaño:
console.log("Tam:",cabezas.length);

3. Si quieres acceder a un item mediante su id o clase debes hacer esto:

//Acceder a un elemento mediante un id
const item1 = document.querySelector("#item1");


//Acceder a un elemento mediante su clase
const item2 = document.querySelector(".item2");

4. Si quieres obtener todos los elementos con una clase en particular debes hacer esto:

//Obtener todos las etiquetas p con la clase 'intro'
var misParrafos = document.querySelectorAll("p.intro");

5. Si quieres colocar un texto en un elemento debes hacer esto:

var texto = document.getElementById("identificador");

//Colocar texto:
texto.textContent = "Hola, mundo" ;

6. Si quieres colocar contenido HTML en otro elemento:

//Mediante su id
var contenedor1 = document.getElementById("contenedor1");
contenedor.innerHTML = "<h1>Hola, mundo</h1>";

//Con querySelector, accediendo a su clase
var contenedor2 = document.querySelector(".contenedor2");

contenedor2.innerHTML = "<p>Ciao</p>";


//Con querySelector, accediendo a su id
var contenedor3 = document.querySelector("#contenedor3");

contenedor3.innerHTML = "<p>Arrivaderci</p>";

7. Si quieres recargar una página HTML en un tiempo determinado:

setTimeout(window.location.reload(),3000);

8. Si quieres recargar la página usando un botón:

const btn = document.getElementById("btn");

btn.addEventListener("click",()=>{
 window.location.reload();
});

9. Cargar contenido DOM:

document.addEventListener("DOMContentLoaded", function(event) {
   /*Cargar contenido JS en Página HTML
     equivalente a:
   $(document).ready(function() {});
    */
});

10. Crear evento en un elemento (click, dblclick, mouseout, mouseover, etc.):

const btn = document.getElementById("btn");
btn.addEventListener('click',()=>{
    //Hacer algo
});

11. Si quieres abrir una página HTML externa:

var abrirVentana=function(){
  window.open("ventana.html","Ventana HTML","width=400, height=250");
};

const btn = document.getElementById("btn");
btn.addEventListener("click",()=>{
  abrirVentana();
});

12. Ocultar elemento:

const btn = document.getElementById("btn");
const contenedor = document.querySelector("#contenedor");

//Ocultar
btn.addEventListener("click",()=>{
  contenedor.style.display = "none";
});

13. Mostrar elemento (el estilo del elemento debe ser style="display:none"):

const btn = document.getElementById("btn");
const contenedor = document.querySelector("#contenedor");

//Mostrar
btn.addEventListener("click",()=>{
  contenedor.style.display = "";
});

14. Aplicar CSS desde Javascript:

document.addEventListener("DOMContentLoaded", function(event) {
console.log('%c Codemonkey Junior','color:#E6E6E6;background-color:#2F0B3A;');

//1. Aplicar estilo desde JS
const titulo = document.getElementById("titulo");
titulo.style.backgroundColor = "black";
titulo.style.color = "gray";
titulo.style.textAlign = "center";

});

15.Si quieres obtener un atributo de un elemento, por ejemplo su clase (class):

var cabeza = document.getElementsByTagName("h1")[0].getAttribute("class"); 
const contenedor = document.getElementById("contenedor");
const btn =document.querySelector("#btn");


btn.addEventListener("click",() =>{
contenedor.innerHTML = cabeza;
});

16. Si quieres crear una variable constante:

/*Las variables constantes (const) no pueden alterar su valor*/
const print = console.log;
const label = document.getElementById("identificador");
const TAM = 100;

17. Si quieres crear un nuevo elemento y colocarlo dentro de otro:

var parrafo = document.createElement("p");
var texto = document.createTextNode("Nuevo parrafo.");
parrafo.appendChild(texto);

const contenedor = document.getElementById("contenedor");
element.appendChild(parrafo);

18. Si quieres cerrar la ventana actual:

window.close();

19. Si quieres obtener la URL completa de la página en la que estas:

const URL = window.location.href;
const btn = document.getElementById("btn");

btn.addEventListener("click", ()=>{
   alert("URL es: "+URL);
});

Links:
https://codemonkeyjunior.blogspot.com/2014/06/javascript-aspectos-basicos.html 
https://codemonkeyjunior.wordpress.com/2017/09/22/javascript-uso-de-prototype/
https://www.w3schools.com/js/default.asp