Habitualmente lo que interesa es ejecutar el código JavaScript después de que los elementos del DOM ya estén escritos en la página para luego poder interactuar con esas etiquetas, ids y clases desde el código JavaScript. Veamos posibles soluciones para conseguir esto.
- Poner el script justo antes de que se cierre el body. Antes del fin de etiqueta
</body>. Esto no es muy aconsejable ya que lo indicado es que la llamada a los script se sitúen en el head. - Usar
document.onloadtal y como se cuenta en la entrada: Comenzar la ejecución de un programa en Javascript al ir a una página - Usar una función jQuery que llama al código JavaScript. Esta es la opción que vamos a tratar en este post.
Puede ver el código corriendo en:
HTML
Disponemos de una lista de frutas con tres clases.
<li class="rojas"><li class="citricos"><li class="cucurbitaceas"><li class="dulces">
Llamamos en el head al código JavaScript usando un sistema propio de jQuery. Observe las dos líneas en el
head. Primero llamamos al script js que contiene la versión 3.4.1 de jQuery. Seguidamente llamamos a nuestro script denominado dom5.js.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>lanzar el JS desde el head</title>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="dom5.js"></script>
</head>
<body>
<h1>Frutas</h1>
<ul>
<li class="rojas">Cereza</li>
<li class="citricos">Mandarina</li>
<li class="rojas">Frambuesa</li>
<li class="cucurbitaceas">Sandia</li>
<li class="dulces">Uvas</li>
<li class="rojas">Fresa</li>
<li class="citricos">Naranja</li>
<li class="dulces">Higos</li>
<li class="citricos">Pomelo</li>
<li class="rojas">Moras</li>
<li class="dulces">Piña</li>
<li class="cucurbitaceas">Melón</li>
</ul>
</section>
</body>
</html> JavaScript
Usando jQuery lo que hacemos es envolver todo el código JavaScript dentro de una función del tipo:
$(function() {
//código js
});
En el código JS lo que hacemos es establecer el color del fondo según cada uno de los cuatro tipos de clases que hemos definido. Esto nos permite establecer cuatro formas diferentes de trabajar con clases, para ilustrar diferentes formas de trabajar con el DOM.
- trabajando con
getElementsByClassNameyfor(..of..) - trabajando con
getElementsByClassNameyforclásico - trabajando con
querySelectorAllyforEachcon función anónima - trabajando con
querySelectorAllyforEachcon función de flecha
Podemos consultar una página que nos habla de querySelectorAll:
$(function() {
'use strict'
//trabajando con getElementsByClassName y FOR(OF)
var claseRojas = document.getElementsByClassName("rojas");
for(var roja of claseRojas){
roja.style.background="pink";
};
//trabajando con getElementsByClassName y FOR clásico
var claseDulces=document.getElementsByClassName('dulces');
for(var i=0;i<claseDulces.length;i++){
claseDulces[i].style.backgroundColor="#00FF00";//verde
};
//trabajando con querySelectorAll y una clase (ver el .)
var claseCitricos=document.querySelectorAll(".citricos");
claseCitricos.forEach(function(item,index){
item.style.background="cyan";
console.log(index+": "+item.textContent);
});
//trabajando con querySelectorAll y forEach con función de flecha
var claseCucur=document.querySelectorAll(".cucurbitaceas");
claseCucur.forEach(item => item.style.background="yellow");
}); ¿Qué método prefieres de los cuatro para trabajar con clases?
No hay comentarios:
Publicar un comentario