Obtener elemento por ID coincidiendo parcialmente con cadena usando JavaScript

Las páginas web que tienen múltiples funcionalidades generalmente requieren códigos largos. En tal caso, la asignación de una identidad común o una parte de ella a múltiples elementos ayuda al desarrollador en gran medida. Por ejemplo, asignar una parte de la identificación, que es la misma en todos los elementos, para acceder a ellos al mismo tiempo. En tales casos, obtener un elemento por ID haciendo coincidir parcialmente la cadena en JavaScript es de gran ayuda para simplificar la complejidad del código.

Este blog discutirá el enfoque para obtener el elemento por identificación al igualar parcialmente la cadena en JavaScript.

Cómo obtener/buscar un elemento por identificación por una cadena parcialmente coincidente en JavaScript?

El elemento se puede obtener mediante ID haciendo coincidir parcialmente la cadena en JavaScript usando el "documento.QuerySelectorAll ()" método. Este método obtiene todos los elementos que coinciden con un selector (s) CSS y devuelven una lista de nodos.

Sintaxis

documento.QuerySelectorAll (selectores)

En la sintaxis anterior:

"selectores"Consulte uno o más selectores CSS.

Ejemplo 1: Obtener elemento haciendo coincidir parcialmente la ID desde el inicio

En este ejemplo, el "documento.QuerySelectorAll ()El método "se puede utilizar para obtener el elemento especificando su ID de cadena desde el inicio y no la ID completa:

Realice los siguientes pasos en el fragmento de código anterior:

• En primer lugar, especifique el ""Elemento especificando su fuente a través del"SRC"Atributo y el declarado"identificación".
• Después de eso, en el código JavaScript, acceda al elemento especificado por su "identificación"Desde el principio usando el"QuerySelectorAll ()" método.
• Tenga en cuenta que "^"Coincide con el comienzo.
• Finalmente, muestre el elemento obtenido por su ID de cadena parcial desde el inicio en la consola.

Producción

En la salida anterior, se puede observar que el elemento correspondiente y su ID se muestran en la consola.

Ejemplo 2: Obtener elemento haciendo coincidir parcialmente la ID desde el final

En este ejemplo, el "documento.QuerySelectorAll ()El método "se puede aplicar también para obtener el elemento haciendo coincidir parcialmente la ID de cadena desde el final:

Implemente los siguientes pasos en las líneas de código anteriores:

• Recuerde el enfoque discutido para incluir la imagen que tiene la declarada "identificación".
• En el código JS, acceda al incluido ""Elemento especificando su ID desde el final usando el"QuerySelectorAll ()" método.
• Tenga en cuenta que el "ps"En el código coincide con la identificación desde el final.
• Por último, muestre el elemento correspondiente en la consola.

Producción

La salida anterior indica que se logra el requisito deseado.

Ejemplo 3: Obtener elemento haciendo coincidir parcialmente la identificación contenida

En esta demostración, el elemento correspondiente se obtendrá coincidiendo parcialmente con la ID de cadena desde cualquiera de las posiciones:

En el código anterior:

• Del mismo modo, incluya la imagen indicada que tiene la asignada "identificación".
• En el código JavaScript, acceda al elemento haciendo coincidir parcialmente el "identificación"Tener el valor de cadena establecido en él.
• Tenga en cuenta que "*"Coincide con la identificación desde cualquier posición.
• Finalmente, muestre el elemento recuperado.

Producción

El elemento recuperado en la salida anterior verifica que el especificado "identificación"Se combina con la identificación del elemento desde cualquiera de las posiciones.

Conclusión

El "documento.QuerySelectorAll ()El método "se puede utilizar para obtener un elemento mediante su ID al hacer coincidir la cadena mediante JavaScript. Este método se puede implementar para que coincida parcialmente con la cadena contenida en una ID desde el inicio, el final o desde cualquier posición para obtener un elemento. Este tutorial explicó cómo obtener un elemento por ID al hacer coincidir una cadena parcialmente en JavaScript.