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 con
querySelector()
quien nos permite seleccionar ya sea por "ID" , "Clase" o "Etiqueta"
En nuestro ejemplo escribiremos un HTML básico 3 parrafos (uno ID, otro con clase y uno sin selector.).
<!-- 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>Este es una etiqueta parrafo</P>
<P class="soyClase">Este es un parrafo con una clase</P>
<P id="soyId">Este es un parrafo con un ID</P>
<!-- Elemento que vamos a seleccionar -->
<script type="text/javascript" src="apuntes.js"></script>
</body>
</html>
<!-- #Apuntesnavarrete -->
y en nuestro archivo JavaScript con las siguiente lineas seleccionamos cada párrafo
document.querySelector("P") //Entre comillas la etiqueta
//Cuando es una clase utilizamos el . como en CSS
document.querySelector(".soyClase") //Entre comillas la clase
//Cuando es un ID utilizamos el # como en CSS
document.querySelector("#soyId")//Entre comillas el identificador
ya estan seleccionados , pero.. esto no nos reflejara nada , ya que aun no hacemos nada con estas partes del DOM
Guardaremos cada parrafo en una variable "Let" y después la mostraremos en consola (Console.log)
y nuestro código JavaScript quedaría así.
let etiqueta = document.querySelector("P")
let esID = document.querySelector(".soyClase")
let esclass = document.querySelector("#soyId")
console.log(etiqueta)
console.log(esclass)
console.log(esID)
y Así se vera en consola.
Nos muestra los párrafos , inclusive con sus etiquetas e identificador.
Y si los mostramos con un alert() ?
let etiqueta = document.querySelector("P")
let esID = document.querySelector(".soyClase")
let esclass = document.querySelector("#soyId")
alert(etiqueta)
alert(esclass)
alert(esID)
Nos muestra cada elemento del Dom en un object , ¿porque muestra este texto?.. lo veremos mas adelante , lo que nos interesa ahora es la manipulación del elemento
Podemos mostrar el texto que trae nuestros elementos con .innerHTML
-Nuestro JavaScript quedaría así
let etiqueta = document.querySelector("P")
let esID = document.querySelector(".soyClase")
let esclass = document.querySelector("#soyId")
alert(etiqueta.innerHTML)
alert(esclass.innerHTML)
alert(esID.innerHTML)
En consola ahora se vería así
Hemos logrado proyectar en un alert() el texto que tiene cada párrafo , Muy bien ahí.
Recuerda un detalle muy importante, querySelector() solo va a mostrar un elemento , sin importar cuantas etiquetas , selectores o ID haya , solo mostrara al primero de estos.
para manipular varios elementos de esta forma tendríamos que usar querySelectorAll().
Recuerda estudiar las distintas formas de manipular elementos del DOM y el que distingue cada una de ellas.
Déjanos tus comentarios , dudas o cualquier cosa que quieras compartirnos
No hay comentarios:
Publicar un comentario