Los elementos del DOM (Etiquetas HTML por lo general) ,se pueden seleccionar dentro de JavaScript
para realizar algunas acciones, en esta ocasión lo aremos por su clase.
getElementsByTagName()
En nuestro ejemplo escribiremos un HTML básico y un parrafo
<!-- 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>Esto es un parrafo</P>
<!-- Elemento que vamos a seleccionar -->
<script type="text/javascript" src="apuntes.js"></script>
</body>
</html>
<!-- #Apuntesnavarrete -->
y en nuestro archivo JavaScript , con la siguiente linea seleccionamos a la etiqueta "P"
document.getElementsByTagName("P")
ya esta seleccionado , pero.. esto no nos reflejara nada , ya que aun no hacemos nada con esa parte del DOM
Guardaremos el elemento en una variable "Let" y después la mostraremos en consola (Console.log)
y nuestro código JavaScript quedaría así.
//entre comillas escribimos la etiqueta
let NombredeVariable = document.getElementsByTagName("P")
console.log(NombredeVariable)
y Así se vera en consola.
Nos muestra una Colección HTML que incluye nuestro párrafo , PEROOO , a diferencia de nuestro
articulo pasado con getElementsById , este nos muestra encapsulado en una colección tipo array nuestro párrafo (aunque solo tengamos 1 )
¿Que hacemos para seleccionarlo y poder manipularlo?
Pues lo que aremos será seleccionar el índice de este párrafo , al ser único llevara el índice 0 , pues es el primer párrafo que escribimos en nuestro documento HTML.
let NombredeVariable = document.getElementsByTagName("P")[0]
Y si lo mostramos ahora en consola?
Código JavaScript completo
let NombredeVariable = document.getElementsByTagName("P")[0]
console.log(NombredeVariable)
Nos muestra ahora el párrafo en la consola
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 , ¿Por qué se muestra así?.. 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 etiqueta y su indice
let NombredeVariable = document.getElementsByTagName("P")[0]
//Mostramos el texto dentro de la etiqueta
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 etiqueta
//y entre corchetes su Indice
let NombredeVariable = document.getElementsByTagName("P")[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;
¿Qué pasa cuando tenemos varias etiquetas del mismo tipo?
¿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>Primer parrafo</P>
<P>segundo parrafo</P>
<P>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 etiqueta
let NombredeVariable = document.getElementsByTagName("P")
console.log(NombredeVariable)
nos muestra de nuevo el mismo código HTMLCollection con un array que contiene todos nuestros párrafos.
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 etiqueta
let NombredeVariable = document.getElementsByTagName("P")
//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, class,etiqueta y varios a la 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