Pues lo que aremos será seleccionar el índice de este párrafo , al ser único lo aremos directo al llamarlo y llevara el indice 0 , pues es el primer parrafo que escribimos dentro de esa clase .
Y si lo mostramos ahora en consola?
Codigo Javscript
let NombredeVariable = document.getElementsByClassName("soyunParrafo")[0]
console.log(NombredeVariable)
Nos muestra ahora el párrafo seleccionado en la consola con todo y su clase y texto
y si lo mostramos en un alert , que pasara?
//Entre comillas el nombre de la clase
let NombredeVariable = document.getElementsByClassName("soyunParrafo")[0]
alert(NombredeVariable)
Nos muestra el elemento del Dom en un objeto , ¿porque se muestra asi?.. eso lo veremos mas adelante a profundidad para no confundirte ahora, lo que nos interesa ahora es la manipulación del elemento
Podemos mostrar el texto que trae nuestro elemento ? claro con la propiedad .innerHTML
-Nuestro JavaScript quedaría así
//Entre comillas el nombre de la clase y su índice
let NombredeVariable = document.getElementsByClassName("soyunParrafo")[0]
//Mostramos el texto dentro de la clase
alert(NombredeVariable.innerHTML)
En consola ahora se vería así
Hemos logrado proyectar en un alert() el texto que tiene nuestro párrafo , Muy bien ahí.
Vamos a subir la complejidad
Utilizaremos el escucha de eventos addEventlistener()
ahora al dar clic en el elemento podremos mostrar un mensaje , tranquilo si no comprendes aun del todo , ya tienes lo básico que viniste aprender aquí.
Trata de seguirnos
En nuestro archivo JavaScript agregaremos el escucha de evento que actuara al dar click y mostrara una función , el código quedara así.
JavaScript
//Entre comillas el nombre de la clase y su índice despues
let NombredeVariable = document.getElementsByClassName("soyunParrafo")[0]
//El parrafo escuchara el evento click
// y despues ejecutara una funcion
NombredeVariable.addEventListener("click",function(){
//la cual en esta ocasión es un alert
alert("has echo click")
})
En nuestra pagina web damos clic sobre el texto del párrafo "Esto es un parrafo" y nos mostrara lo siguiente.
Podríamos seguir implementando eventos, pero primero queremos tocar esta duda que talvez algunos tengan , muchas veces identificamos a muchos elementos del DOM con la misma clase, es por eso que getElementsByClassName nos devuelve una colección .
¿Que hacemos cuando tenemos esto?
HTML
<!-- Seleccionar elemento en el DOM-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Apuntes Navarrete</title>
</head>
<body>
<!-- Elemento que vamos a seleccionar -->
<P class="soyunParrafo">Primer parrafo</P>
<P class="soyunParrafo">segundo parrafo</P>
<P class="soyunParrafo">tercer parrafo</P>
<!-- Elemento que vamos a seleccionar -->
<script type="text/javascript" src="apuntes.js"></script>
</body>
</html>
<!-- #Apuntesnavarrete -->
Primero vamos a ejecutar el JavaScript normal donde seleccionaremos toda la colección y la mostraremos en consola.
//entre comillas escribimos la clase
let NombredeVariable = document.getElementsByClassName("soyunParrafo")
console.log(NombredeVariable)
nos muestra de nuevo el mismo codigo HTMLCollection.
pero y si ahora llamamos a todos los párrafos por sus índices? ,esta vez agregaremos los índices hasta llamar a la variable
Javascript
//entre comillas escribimos la clase
let NombredeVariable = document.getElementsByClassName("soyunParrafo")
//Imprimimos el primer parrafo - indice 0
console.log(NombredeVariable[0])
//Imprimimos el segundo parrafo - indice 1
console.log(NombredeVariable[1])
//Imprimimos el tercer parrafo - indice 2
console.log(NombredeVariable[2])
y nos mostrara en consola los párrafos
Podríamos seguir implementando y probando cosas , pero eso es todo por el momento de este articulo básico de " Seleccionar elementos del DOM por su "Clase"
Recuerda estudiar también las demás formas de seleccionar eventos del DOM (ID, name,etiqueta y varios ala vez)
Recuerda también estudiar mas sobre el evento Escucha addEventListener
el cual puede escuchar clic , doble clic , pasar por encima el mouse y muchas otras.
También las distintas formas de recorrer coleciones , arrays y objetos.
no olvides dejarnos tus comentarios , tus dudas o sugerencias para otros articulos.
No hay comentarios:
Publicar un comentario