Trova l'elemento per contenuto usando JavaScript

Mentre si occupano dei dati in blocco, può esserci una possibilità di ambiguità nel localizzare l'elemento rispetto al contenuto contenuto durante l'accesso a esso. In tal caso, controllare ciascuno degli elementi diventa impegnativo. Ad esempio, integrare l'elemento con un particolare pezzo di contenuto. In tali situazioni, trovare elementi per contenuti utilizzando JavaScript AIDS nell'accesso ai dati comodamente.

Questo blog discuterà degli approcci per trovare elementi da parte dei contenuti utilizzando JavaScript.

Come trovare elementi mediante contenuto usando JavaScript?

Per trovare elementi per contenuto usando JavaScript, i seguenti approcci sono in combinazione con "QuerySelectorAll ()Metodo e il "TextContent" proprietà:

• "Include ()" metodo.
• "da()" E "incontro()"Metodi.

Approccio 1: Trova elemento per contenuto in javascript usando il metodo Include ()

IL "QuerySelectorAll ()"Il metodo prende tutti gli elementi che corrispondono a un selettore CSS e restituisce un elenco di nodi. Mentre il textcontent fornisce il contenuto di testo del nodo particolare e il metodo include () ritorna "VERO"Se la stringa specificata è inclusa in una stringa particolare.

Questi approcci possono essere applicati in combinazione per accedere al "div"Elemento, accedi al testo incluso e aggiungi l'elemento a un array nullo sulla condizione soddisfatta.

Sintassi

documento.QuerySelectorAll (selettori)

Nella sintassi data:

• "selettori"Corrisponde a uno o più di un selettore CSS.

corda.Include (valore)

Qui, il metodo Include () cercherà il dato "valore"In The Associated"corda".

Esempio

Passiamo attraverso la seguente dimostrazione:

Suggerimento Linux

Eseguire i seguenti passaggi come indicato nello snippet del codice sopra:

• Nel primo passaggio, specificare il "div"Elemento con il contenuto dichiarato in forma di testo.
• Nel codice JS, inizializza il valore stringa che deve essere abbinato per il contenuto di testo all'interno del "div"Elemento.
• Dopodiché, dichiara un array vuoto chiamato "includere".
• Nel passaggio successivo, applica il "QuerySelectorAll ()Metodo e il "per ... di"Loop per recuperare il"div"Elemento per tag e iterazione attraverso di esso, rispettivamente.
• Ora, applica il "TextContent"Proprietà e"Include ()"Metodo in combinazione per verificare se il valore della stringa inizializzato è incluso in"div"Elemento.
• In tal caso, l'elemento verrà aggiunto al creato "nullo"Array tramite il"spingere()" metodo.

Produzione

Dall'uscita sopra, è evidente che l'elemento viene spinto nell'array sulla condizione soddisfatta.

Approccio 2: Trova elemento per contenuto in JavaScript usando Array.Da () e match () metodi

IL "Vettore.da()"Il metodo restituisce un array da un oggetto con la lunghezza dell'array come parametro. IL "incontro()"Il metodo corrisponde a una stringa con un'espressione regolare. Questi metodi possono essere implementati allo stesso modo per accedere all'elemento abbinando il contenuto del particolare valore di stringa con il contenuto di testo dell'elemento.

Sintassi

Vettore.da (oggetto, mappa, valore)

Nella sintassi sopra data:

• "oggetto"Punti all'oggetto da convertire in un array.
• "carta geografica"Corrisponde alla funzione mappa che deve essere mappata su ciascun elemento.
• "valore"È il valore da utilizzare come" questo "per la funzione della mappa.

corda.Match (Match)

Nella sintassi data:

• "incontro"Si riferisce al valore necessario per essere cercati.

Esempio

Panoramiamo l'esempio di seguito:

Questa è roba correlata a JavaScript

Eseguire i seguenti passaggi nelle righe precedenti del codice:

• Allo stesso modo, includi il “

  "Elemento.

• Nel codice JavaScript, allo stesso modo, inizializza il valore della stringa indicato.
• Nel passaggio successivo, applica il "da()Metodo "con il"QuerySelectorAll ()"Metodo come parametro, che prenderà il"

  "Elemento dal suo tag e il precedente metodo convertirà il risultato in un array.

• Dopodiché, inizializza un "nullo" vettore. Inoltre, applica il "Trovare()"Metodo per iterare attraverso l'array restituito nel passaggio precedente.
• IL "TextContent"Proprietà e"incontro()"Il metodo corrisponderà al valore della stringa specificata con il testo contenuto nell'elemento accessibile.
• Sulla condizione soddisfatta, il "

  "L'elemento verrà aggiunto all'array null creato, come discusso in precedenza.

Produzione

L'output di cui sopra indica che il requisito desiderato è soddisfatto.

Conclusione

Il combinato "QuerySelectorAll ()Metodo e il "TextContentLa proprietà "può essere applicata con il"Include ()Metodo o "Vettore.da()" E "incontro()"Metodi per trovare elementi per contenuto usando JavaScript. Questo tutorial ha spiegato come trovare elementi per contenuto usando JavaScript con l'aiuto di diversi esempi.