Javascript Obtener Elemento Por Id

| | | |

Entonces, ¿desea seleccionar un elemento en una página web en JavaScript? Esa es la especialidad del método getElementById, el llamado rey del elemento getters en JavaScript.

getElementById le permite seleccionar un elemento en funciòn de su ID. Es un nombre de método bastante autoexplicativo cuando lo piensas.

En esta guìa, vamos a hablar sobre qué es getElementById, còmo funciona, y cuándo debe usarlo en su còdigo. Veremos un ejemplo de un " Mostrar / ocultar " botòn de texto en nuestra demostraciòn document.getElementById.

¬°Vamos a sumergirnos!

¿Qué es getElementById?

getElementById () es un método de documento que selecciona un elemento del DOM HTML en una página seg√∫n el atributo de ID de elemento que ha especificado.

Considere el siguiente còdigo:

En nuestro còdigo HTML, hemos definido un elemento "button" que tiene el ID mainButton. Nuestro còdigo JavaScript recuperará este componente utilizando el método getElementById ().

Este método es √∫til si desea recuperar un solo elemento en una página. Si piensa en aprender HTML y CSS, sabrá que los ID deben ser √∫nicos. Esto hace que getElementById () sea perfecto para recuperar elementos individuales.

Puede optar por usar este método si ha asignado un ID a un elemento. En lugar de usar un getter más amplio como querySelector o getElementByClass, que devuelve el primer objeto de elemento que cumple con un criterio particular, puede recuperar un elemento usando getElementById ().

getElementById () es un método com√∫n utilizado para recuperar un elemento en una página web. & nbsp;

Lo que necesita saber sobre getElementById

Antes de profundizar en un ejemplo, vamos a hablar sobre los errores que los principiantes suelen cometer al utilizar este método.

Siempre es frustrante cuando está aprendiendo algo nuevo y no funciona, asì que hablemos sobre los errores comunes que puede cometer mientras aprende el truco de getElementById () .

Primero, getElementById () distingue entre may√∫sculas y min√∫sculas. Si bien el término ID generalmente se escribe con may√∫scula en la programaciòn, debe usar el Id en may√∫sculas y min√∫sculas cuando utilice este método. De lo contrario, este método no funcionará.

En segundo lugar, el ID que especifique no debe incluir un signo de almohadilla (hashtag). Considere este còdigo:

Este ejemplo puede parecer que recuperará el elemento con el ID mainButton, pero ese no es el caso. Solo debe especificar el ID del elemento que desea recuperar:

Ahora que está fuera del camino, podemos revisar un ejemplo.

Còmo usar getElementById

Cuando navega por la web, puede encontrar etiquetas que digan " Leer más & rdquo ;. Una página web puede mostrar algunas frases de un fragmento de texto y luego le pedirá que presione ese botòn para que pueda ver el resto del texto.

Vamos a crear esa funciòn utilizando getElementB yId () getter. Puede ver el còdigo final de este tutorial en GitHub .

Creaciòn de la interfaz

Comencemos creando una interfaz sencilla utilizando HTML y CSS. Cree un nuevo archivo llamado index.html y pegue el siguiente còdigo:

En este documento, hemos definido un cuadro que contiene informaciòn sobre el método getElementById (). Nuestro cuadro contiene un tìtulo, dos párrafos de texto y una etiqueta HTML de extensiòn que usaremos para revelar el √∫ltimo párrafo.

Abra un archivo llamado styles.css y pegue este còdigo:

Este El còdigo le da a nuestra página algo de color para hacerla más atractiva visualmente. Cuando abras la página web, verás lo siguiente:

Captura de pantalla 2020 07 02 A las 10.02.21

Hay un problema: nuestro " Leer más " La etiqueta no hace nada y nuestro √∫ltimo párrafo de texto sigue siendo visible. Eso se debe a que a√∫n no hemos agregado nuestro còdigo JavaScript. Escribamos la funcionalidad JavaScript para nuestra página web.

A√±adiendo còdigo JavaScript

Empecemos seleccionando los elementos con los que vamos a trabajar. Los elementos que debemos seleccionar son nuestra etiqueta "span" (que contiene nuestro texto " Leer más ") y el párrafo que queremos alternar entre mostrar y ocultar.

Cree un archivo llamado scripts.js y pegue este còdigo:

En nuestro còdigo, hemos usado getElementById () para recuperar nuestro párrafo del documento DOM. selecciona el objeto de documento hiddenText y lo oculta. A continuaciòn, crearemos una funciòn que alterna nuestro texto:

Empezamos seleccionando el elemento con el ID hiddenText. Esto se refiere al párrafo de texto que queremos que aparezca o desaparezca cuando " Leer más " se hace clic.

Hemos escrito una declaraciòn if que verifica si ese párrafo es visible. Si no está visible, & nbsp; el valor display del el párrafo se establecerá en block, que lo hará aparecer; de lo contrario, el valor de display del párrafo se establecerá en none, y asì desaparecerá.

Nuestro còdigo a√∫n no está terminado. A continuaciòn, vamos a crear un detector de eventos que se activará cuando hagamos clic en nuestro texto " Leer más ":

Este còdigo selecciona el texto Leer más en nuestra página. Luego configura un detector de eventos que activará nuestro toggleText () método cuando el " Leer más " se hace clic en el texto.

Ahora, abramos nuestra página web e intentemos hacer clic en el texto Leer más:

Captura de pantalla 2020 07 02 a las 10.04.07

¬°Nuestro còdigo es funcional! Al hacer clic en el botòn " Leer más " texto, aparece el texto. Cuando hace clic en él nuevamente, el texto desaparece.

Conclusiòn

El getter getElementById () le permite recuperar un elemento basado en su ID de un página web.

¿Estás buscando un desafìo? Utilice el captador getElementById () para cambiar el valor de " Leer más " a " Leer menos " cuando el texto es visible. Para ir más allá, puede agregar algunas imágenes a la página y crear un botòn que oculte todas esas imágenes cuando se hace clic en el botòn.

Ahora está listo para comenzar a usar el getElementById () ¬°getter como un codificador profesional!

Shop

Learn programming in R: courses

$

Best Python online courses for 2022

$

Best laptop for Fortnite

$

Best laptop for Excel

$

Best laptop for Solidworks

$

Best laptop for Roblox

$

Best computer for crypto mining

$

Best laptop for Sims 4

$

Latest questions

NUMPYNUMPY

psycopg2: insert multiple rows with one query

12 answers

NUMPYNUMPY

How to convert Nonetype to int or string?

12 answers

NUMPYNUMPY

How to specify multiple return types using type-hints

12 answers

NUMPYNUMPY

Javascript Error: IPython is not defined in JupyterLab

12 answers


Wiki

Python OpenCV | cv2.putText () method

numpy.arctan2 () in Python

Python | os.path.realpath () method

Python OpenCV | cv2.circle () method

Python OpenCV cv2.cvtColor () method

Python - Move item to the end of the list

time.perf_counter () function in Python

Check if one list is a subset of another in Python

Python os.path.join () method