Cómo ocultar elementos usando el nombre de clase en JavaScript
En este artículo, se ha explorado el uso de GetElementByClassName () para ocultar los elementos de una página web.
Los siguientes son los puntos que se han cubierto en este artículo junto con los códigos de ejemplo:
- Introducción a GetElementByClassName () Método de JavaScript
- Propiedades de JavaScript utilizadas para ocultar elementos
- Ocultar un elemento único de una página web utilizando el método getElementByClassName ()
- Ocultar múltiples elementos asociados a una clase específica
- Ocultar todos los nodos infantiles de un elemento asociado a una clase específica
- Ocultar solo nodos infantiles específicos de un elemento asociado a una clase específica
getElementsByClassName ()
Una de las funciones importantes y básicas de JavaScript que se ocupa de los elementos presentes en una página web es getElementsByClassName (). Esta función proporciona un flujo HTML de elementos asociados con un nombre de clase especificado.
Sintaxis
La sintaxis de este método se proporciona a continuación:
En la declaración de código anterior, se ha mostrado la sintaxis del método getElementByClassName ().
Aquí, el método getElementsByClassName () devuelve un elemento presente en índice 0, asociado con la clase Aves En la variable declarada arroyo.
Como el propósito básico y la sintaxis de GetElementsByClassName () se han explicado anteriormente. Ahora intentemos ocultar elementos de página web utilizando esta función.
¿Cuáles son las propiedades de JavaScript que se utilizan para ocultar elementos??
Antes de saltar hacia la tarea, veamos las dos propiedades de estilo a través de las cuales los elementos se pueden ocultar en una página web. Estas dos propiedades se describen a continuación:
visibilidad = 'oculto': Esta propiedad se usa solo para ocultar los elementos y no elimina el espacio vinculado a ese elemento
Display = 'Ninguno': Esta propiedad se usa para ocultar los elementos y también elimina el espacio vinculado a ese elemento
Usaremos ambas propiedades en diferentes escenarios para que sea fácil descubrir el funcionamiento y las diferencias prácticas de estas dos propiedades.
Cómo ocultar un solo elemento de una página web usando el método getElementByClassName ()?
El fragmento que se detalla a continuación muestra la creación de una página web con un encabezado, un poco de texto, una lista de pájaros y una lista de animales junto con un botón para hacer clic.
Html
Esconde pájaros de la lista
Haga clic en el botón para ocultar el elemento por nombre de clase
Gorrión
Paloma
León
Ciervo
Loro
Búho
Lobo
Caballo
La siguiente imagen muestra el código de arriba con un poco de descripción.
Guarde el código y ejecute el archivo; Aparecerá una página web similar en la pantalla de su navegador como se muestra a continuación.
Escribamos un script para ocultar un solo elemento de esta página web. El escenario es que al hacer clic en el botón dado, solo el nombre del primer pájaro debe estar oculto de la pantalla, y el resto de los nombres de pájaros y animales deben permanecer en la pantalla.
Js
const stipt = documento.GetElementsByClassName ('Bird') [0];
arroyo.estilo.visibilidad = 'oculto';
Un fragmento con la breve descripción del código anterior se proporciona a continuación.
Guarde el archivo y ejecutarlo. El navegador mostrará la siguiente página web. En la siguiente imagen dada, se puede ver que cuando el Haga clic para esconderse el botón se presiona gorrión cual es el objeto de la clase pájaro presente en índice [0] se convierte en oculto Pero el espacio vinculado a este objeto sigue ahí:
Cómo ocultar múltiples elementos de una página web utilizando el método getElementByClassName ()?
Para ocultar múltiples elementos asociados con la clase pájaro, Solo el JavaScript necesita ser actualizado; El resto del código HTML para la página web seguirá siendo el mismo. Actualizar el guion código con el código que se proporciona a continuación:
functionHideElement ()const allbirds = documento.getElementsByClassName ('pájaro');
para (constante const de Allbirds)
arroyo.estilo.display = 'ninguno';
;
A continuación se proporciona un fragmento con la breve descripción del código anterior:
En el código anterior, se puede ver que en lugar de usar la propiedad de visibilidad para ocultar los elementos, la propiedad de visualización se ha utilizado para el propósito mencionado anteriormente. Guarde este script de código y ejecútelo:
En el código anterior, el clic en el Haga clic para esconderse El botón ocultará todos los nombres de los pájaros junto con sus espacios vinculados.
Cómo ocultar los nodos de los niños de un elemento de una página web asociada con una clase utilizando el método GetElementByClassName ()?
Para ocultar los nodos infantiles de un elemento de una página web, primero realice cambios en el código HTML y cree algunos nodos de niños:
Esconde pájaros de la lista
Haga clic en el botón para ocultar el elemento por nombre de clase
Gorrión
Paloma
Búho
León
Ciervo
Lobo
Después de actualizar el código HTML, realice cambios en el script también. La propiedad que se usa para ocultar todos los nodos de los niños de una clase es visibilidad Propiedad con el valor oculto.
functionHideElement ()const stipt = documento.GetElementsByClassName ('Bird') [0];
arroyo.estilo.visibilidad = 'oculto';
Al guardar y ejecutar el archivo con las alteraciones anteriores. La siguiente página web aparecerá en la pantalla. Al hacer clic en el botón, los nodos infantiles de la clase Bird se ocultarán a la pantalla, pero el espacio vinculado con esos nodos de niños permanecerá en la pantalla como se muestra a continuación porque se ha utilizado la propiedad de visibilidad en lugar de la propiedad de la pantalla.
Cómo ocultar nodos de niños específicos de un elemento de una página web asociada con una clase utilizando el método GetElementByClassName ()?
Para ocultar los nodos de niños específicos que tienen elementos específicos dentro de una clase, primero hagamos cambios en el código HTML y creemos diferentes nodos de niños en la clase pájaro con diferente elementos:
Cuervo
Gorrión
Paloma
Águila
Búho
Después de la alteración en el código HTML, actualice también el script con el siguiente código de script:
functionHideElement ()const stipt = documento.getElementsByClassName ('pájaro');
para (deje n en flujo [0].Nodos infantiles)
if (stream [0].Nodos de niños [N].NodeName === 'H1' || transmisión [0].Nodos de niños [N].NodeName === 'H4')
transmisión [0].Nodos de niños [N].estilo.display = 'ninguno';
A continuación, la instantánea proporciona una breve descripción del código de script anterior.
Al ejecutar el código anterior, aparecerá una página web similar en la pantalla. Cuando se presiona el botón de clic todo el nodos de niños de clase pájaro estará oculto junto con su espacio ocupado:
Conclusión
Para ocultar los elementos en un JavaScript, se pueden usar dos propiedades de estilo que son visibilidad y mostrar. El getElementsByClassName () El método se utiliza para obtener el elemento en el código JavaScript. El artículo proporciona varias formas a través de las cuales el getElementsByClassName () se usa para ocultar un solo elemento, múltiples elementos, nodos infantiles de una clase y nodos específicos de una clase.