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 los identificadores "ID" con
getElementById()
En nuestro ejemplo escribiremos un HTML básico y un parrafo con un Identificador.
<!-- 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 id="parrafo">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 el ID párrafo
document.getElementById("parrafo") //Entre comillas el nombre del ID
ya esta seleccionado , pero.. esto no nos reflejara nada , ya que aun no hacemos nada con esa parte del DOM
Guardaremos el archivo en una variable "Let" y después la mostraremos en consola (Console.log)
y nuestro código JavaScript quedaría así.
//Entre comillas el nombre del ID
let NombredeVariable = document.getElementById("parrafo")
console.log(NombredeVariable)
y Así se vera en consola.
Nos muestra el párrafo completo , inclusive con sus etiquetas e identificador.
Y si lo mostramos con un alert() ?
//Entre comillas el nombre del ID
let NombredeVariable = document.getElementById("parrafo")
alert(NombredeVariable)
Nos muestra el elemento del Dom en un mensaje , ¿porque muestra este texto?.. lo veremos mas adelante , lo que nos interesa ahora es la manipulación del elemento
Podemos ahora mostrar incluso el texto solo que trae nuestro elemento ID parrafo con .innerHTML
-Nuestro JavaScript quedaría así
//Entre comillas el nombre del ID
let NombredeVariable = document.getElementById("parrafo")
//Mostramos el texto dentro del ID guardado
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í.
//Entre comillas el nombre del ID
let NombredeVariable = document.getElementById("parrafo")
//El parrafo escuchara el evento click
// y despues ejecutara una funcion
NombredeVariable.addEventListener("click",function(){
//la cual en esta ocacion 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 y probando cosas , pero eso es todo por el momento de este articulo básico de " Seleccionar elemento del DOM por su "ID"
Recuerda estudiar también las demás formas de seleccionar eventos del DOM (Clases, 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.
No hay comentarios:
Publicar un comentario