Ottieni Element per ID corrispondente alla stringa parzialmente usando JavaScript

Le pagine Web con funzionalità multiple richiedono generalmente codici lunghi. In tal caso, allocare un'identità comune o una parte di essa a più elementi aiuta lo sviluppatore in larga misura. Ad esempio, allocando una parte dell'ID, che è la stessa in tutti gli elementi, per accedervi allo stesso tempo. In tali casi, ottenere un elemento mediante ID abbinando parzialmente la stringa in JavaScript è di grande aiuto nel semplificare la complessità del codice.

Questo blog discuterà dell'approccio per ottenere elemento mediante ID corrispondente alla stringa parzialmente in JavaScript.

Come ottenere/recuperare un elemento da id corrispondendo parzialmente in stringa in javascript?

L'elemento può essere recuperato mediante ID abbinando parzialmente la stringa in JavaScript usando "documento.QuerySelectorAll ()" metodo. Questo metodo prende tutti gli elementi che corrispondono a un selettore (i) CSS e restituisce un elenco di nodi.

Sintassi

documento.QuerySelectorAll (selettori)

Nella sintassi sopra:

"selettori"Fare riferimento a uno o più selettori CSS.

Esempio 1: Ottieni elemento abbinando parzialmente l'ID dall'inizio

In questo esempio, il "documento.QuerySelectorAll ()"Il metodo può essere utilizzato per recuperare l'elemento specificando il suo ID stringa dall'inizio e non dall'ID completo:

Eseguire i seguenti passaggi nello snippet del codice sopra:

• In primo luogo, specificare il “"Elemento specificando la sua fonte tramite"src"Attributo e il dichiarato"id".
• Successivamente, nel codice JavaScript, accedi all'elemento specificato con "id"Dall'inizio usando il"QuerySelectorAll ()" metodo.
• Notare che "^"Abbina l'inizio.
• Infine, visualizza l'elemento recuperato dal suo ID stringa parziale dall'inizio sulla console.

Produzione

Nell'output sopra, si può osservare che l'elemento corrispondente e il suo ID sono visualizzati sulla console.

Esempio 2: Ottieni elemento abbinando parzialmente l'ID dalla fine

In questo esempio, il "documento.QuerySelectorAll ()"Il metodo può essere applicato allo stesso modo per ottenere l'elemento abbinando parzialmente l'ID stringa dalla fine:

Implementa i seguenti passaggi nelle righe precedenti del codice:

• Ricorda l'approccio discusso per aver incluso l'immagine che ha dichiarato "id".
• Nel codice JS, accedi al ""Elemento specificando il suo ID dalla fine usando il"QuerySelectorAll ()" metodo.
• Nota che il "$"Nel codice corrisponde all'ID dalla fine.
• Infine, visualizzare l'elemento corrispondente sulla console.

Produzione

L'output di cui sopra indica che viene raggiunto il requisito desiderato.

Esempio 3: Ottieni elemento abbinando parzialmente l'ID contenuto

In questa dimostrazione, l'elemento corrispondente verrà recuperato abbinando parzialmente l'ID stringa da una qualsiasi delle posizioni:

Nel codice sopra:

• Allo stesso modo, includi l'immagine dichiarata che ha il assegnato "id".
• Nel codice JavaScript, accedi all'elemento abbinando parzialmente il "id"Avere il valore della stringa indicato in esso.
• Notare che "*"Abbina l'ID da qualsiasi posizione.
• Infine, visualizza l'elemento recuperato.

Produzione

L'elemento recuperato nell'output sopra verifica il specificato "id"È abbinato all'ID dell'elemento da una qualsiasi delle posizioni.

Conclusione

IL "documento.QuerySelectorAll ()"Il metodo può essere utilizzato per recuperare un elemento dal suo ID abbinando la stringa parzialmente usando JavaScript. Questo metodo può essere implementato per abbinare parzialmente la stringa contenuta in un ID dall'inizio, dalla fine o da qualsiasi posizione per recuperare un elemento. Questo tutorial ha spiegato come recuperare un elemento mediante ID abbinando una stringa parzialmente in JavaScript.