DOM, classlist y eventos (click)
Resumen
El 4to día costó! Por falta de tiempo, aprendí poquitos temas pero cumpliendo (tarde, pero cumplí!). Ya empezamos a introducirnos en el concepto de DOM y le damos más dinamismo a nuestras páginas.
No entro mucho en detalle, pero quiero abarcar todos los temas aprendidos y por aprender, para luego ver más en profundidad métodos y/o conceptos nuevos en práctica pura.
Podrás ver la lista de los 100 días en este enlace.
DOM
DOM (Document Object Model) es un arbol de nodos de HTML (una estructura jerárquica). Dentro del body en nuestro HTML, podemos construir estos nodos para interactuar con ellos desde JS:
...
<body>
<h1 id='title'>Esto es un título</h1>
<p class='parr'>Esto es un parrafo copado</p>
<div>
<p>Esto es un parrafo copado dentro de un div</p>
<p class='parr'>Esto es un parrafo copado dentro de un div</p>
</div>
</body>
...
const titulo = document.getElementById('title');
console.log(titulo); // <h1 id='title'>Esto es un título</h1>
titulo.innerHTML = 'Esto es un titulo modificado';
const parrafos = document.getElementsByClassName('parr');
console.log(parrafos);
const parrafitos = document.getElementsByTagName('p');
console.log(parrafitos)
-
getElementById: Obtenemos solo un elemento a través de unid. -
getElementsByClassName: Obtenemos elementos por unaclass. -
getElementsByTagName: Obtenemos elementos por un tag.
Con innerHTML editamos el contenido de nuestro elemento HTML.
Para clases y tags, veremos en la consola que obtenemos una especie de arrays que se las conoce como HTML Collections. En estos "arrays de HTML", tenemos métodos que podemos utilizar para interactuar un poco más con el DOM, uno de ellos es length:
<body>
<h1 id='itemCount'></h1>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</body>
const liCount = document.getElementsByTagName('li').length;
const result = document.getElementById('itemCount');
result.innerHTML = `Hay ${liCount} items en la lista!`;
Usamos los métodos length e innerHTML. Con length puedo obtener el largo del HTML Collections y lo muestro en el tag h1 por id.
Obtener los elementos por tag no es muy práctico porque falla muy fácilmente agregando otro li que no quiero tener en cuenta. Así que lo mejor (en la mayoría de lo casos) es usar getElementById.
Classlist
Podemos agregar y eliminar el clases a un elemento HTML de esta manera:
<!-- HTML -->
<body>
<div id="algo" class="cosito"></div>
</body>
// CSS
.cosito{
width: 300px;
height: 300px;
background-color: blue;
transition: 1s all;
}
.socotroco{
background-color: red;
transition: 1s all;
}
Y desde consola del inspector, hacemos:
const coso = document.getElementById('algo');
coso.classList; // Acá nos debería mostrar las clases que tiene nuestro div, que debería ser "cosito"
classList nos muestra las clases que contiene un elemento HTML. Utilizando el método add agrega una clase. Con remove eliminamos una clase. Y con toggle agrega o elimina una clase
coso.classList.add('socotroco'); // Agrega la clase
coso.classList.remove('socotroco'); // Elimina la clase
coso.classList.toggle('socotroco'); // Agrega la clase
coso.classList.toggle('socotroco'); // Elimina la clase
Eventos
Los eventos son interacciones que realizan los humanos en nuestra página en "algo". Puede ser sobre un botón, al hacer click derecho, tecla Enter, etc.
Editando el HTML de ClassList, en la propiedad onclick le damos una función:
<body>
<div id="algo" class="cosito"></div>
<button onclick="toggleSocotroco()">Apretame</button>
</body>
Y usando el mismo css, podemos armar nuestro código de JS usando la función declarada:
const coso = document.getElementById('algo');
function toggleSocotroco(){
coso.classList.toggle('socotroco');
}
Si ven con antención, la variable coso está declarada fuera de la función. Esto es porque existe un concepto llamado scope, o sea, todas las variable que declaremos afuera de una función, la podemos utilizar dentro de una función.
Día 4/100
Top comments (0)