Mostrando entradas con la etiqueta elemento del DOM. Mostrar todas las entradas
Mostrando entradas con la etiqueta elemento del DOM. Mostrar todas las entradas

martes, 20 de julio de 2021

JavaScript.- Elementos del DOM acceder por querySelector()

 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

en No hay comentarios:
Etiquetas: , , ,

Javascript .- Elementos del DOM acceder por getElementsByTagName

  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.

en No hay comentarios:
Etiquetas: , , , ,

viernes, 16 de julio de 2021

JavaScript .- Elementos del DOM acceder por getElementsByClassName

 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.

getElementsByClassName()

En nuestro ejemplo escribiremos un HTML básico y un párrafo con una clase

<!-- 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">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 los elementos de la clase "soyunParrafo"

document.getElementsByClassName("soyunParrafo")//Entre comillas el nombre de la clase

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 el nombre de la clase
let NombredeVariable = document.getElementsByClassName("soyunParrafo") 
console.log(NombredeVariable)

y Así se vera en consola.


  Nos muestra una Colección HTML que incluye nuestro párrafo con su nombre de clase, PEROOO , a diferencia de nuestro articulo pasado con getElementsById , este nos muestra encapsulado en una colección nuestro párrafo (aunque este sea solo 1) 

¿Que hacemos para seleccionarlo y poder manipularlo?

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 .

let NombredeVariable = document.getElementsByClassName("soyunParrafo")[0] 

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.

en No hay comentarios:
Etiquetas: , , , ,

JavaScript.- Elementos del DOM acceder por getElementsByID

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.


en No hay comentarios:
Etiquetas: , , ,
Suscribirse a: Entradas (Atom)

Oxidative Stress and Sports

 Oxidative stress occurs when there is an imbalance in the body between free radicals and antioxidants. Free radicals are molecules with unp...