Finn element ved innhold ved hjelp av JavaScript

Mens du håndterer dataene i bulk, kan det være en mulighet for tvetydighet i å lokalisere elementet mot det inneholdte innholdet mens du får tilgang til det. I et slikt tilfelle blir det utfordrende å sjekke ut hvert av elementene. For eksempel å integrere elementet med en bestemt del av innholdet. I slike situasjoner, å finne elementer ved innhold ved hjelp av JavaScript -hjelpemidler for å få tilgang til dataene praktisk.

Denne bloggen vil diskutere tilnærmingene for å finne elementer ved innhold ved hjelp av JavaScript.

Hvordan finne elementer ved innhold ved hjelp av JavaScript?

For å finne elementer ved innhold ved hjelp av JavaScript, er følgende tilnærminger i kombinasjon med "QuerySelectorAll ()”Metode og“Tekstkonkurranse”Eiendom:

• “inkluderer ()”Metode.
• “fra()”Og“kamp()”Metoder.

Tilnærming 1: Finn element ved innhold i JavaScript ved bruk av inkluderer () -metode

“QuerySelectorAll ()”Metode henter alle elementene som samsvarer med en CSS -velger (er) og returnerer en nodeliste. Mens tekstinnholdet gir tekstinnholdet i den aktuelle noden, og Include () -metoden returnerer "ekte”Hvis den spesifiserte strengen er inkludert i en bestemt streng.

Disse tilnærmingene kan brukes i kombinasjon for å få tilgang til “div”Element, få tilgang til den medfølgende teksten og legg elementet til en null -matrise ved fornøyd tilstand.

Syntaks

dokument.QuerySelectorAll (Selectors)

I den gitte syntaks:

• “velgere”Tilsvarer en eller flere enn en CSS -velger.

streng.Inkluderer (verdi)

Her vil den inkluderer () -metoden søke etter de gitte “verdi”I den tilknyttede“streng”.

Eksempel

La oss gå gjennom følgende demonstrasjon:

Linux hint

Utfør følgende trinn som gitt i ovennevnte kodebit:

• I det første trinnet, spesifiser "div”Element som har det oppgitt innhold i tekstform.
• I JS -koden, initialiser strengverdien som må matches for tekstinnholdet i "div”Element.
• Etter det, erklærer et tomt utvalg som heter “inkludere”.
• I neste trinn, bruk "QuerySelectorAll ()”Metode og“for ... av”Loop for å hente“div”Element med tag og iterere gjennom det henholdsvis.
• Nå, bruk “Tekstkonkurranse”Eiendom og“inkluderer ()”Metode i kombinasjon for å sjekke om den initialiserte strengverdien er inkludert i“div”Element.
• I så fall vil elementet bli lagt til det opprettet “null”Array via“trykk()”Metode.

Produksjon

Fra output ovenfor er det tydelig at elementet skyves inn i matrisen ved fornøyd tilstand.

Tilnærming 2: Finn element ved innhold i JavaScript ved hjelp av Array.fra () og match () metoder

“Array.fra()”Metode returnerer en matrise fra et objekt som har lengden på matrisen som parameter. “kamp()”Metode samsvarer med en streng med et vanlig uttrykk. Disse metodene kan implementeres på samme måte for å få tilgang til elementet ved å matche innholdet i den aktuelle strengverdien med elementets tekstinnhold.

Syntaks

Array.Fra (objekt, kart, verdi)

I den ovennevnte syntaks:

• “gjenstand”Peker på objektet som skal konverteres til en matrise.
• “kart”Tilsvarer kartfunksjonen som må kartlegges på hvert element.
• “verdi”Er verdien som skal brukes som“ dette ”for kartfunksjonen.

streng.kamp (kamp)

I den gitte syntaks:

• “kamp”Henviser til verdien som kreves for å bli søkt.

Eksempel

La oss oversikt over det undergitte eksemplet:

Dette er JavaScript -relaterte ting

Utfør følgende trinn i kodelinjene ovenfor:

• På samme måte, inkluder "

  ”Element.

• I JavaScript -koden initialiser på samme måte den oppgitte strengverdien.
• I neste trinn, bruk "fra()”Metode med“QuerySelectorAll ()”Metode som parameter, som vil hente“

  ”Element med taggen, og den tidligere metoden vil konvertere resultatet til en matrise.

• Etter det, initialiser en “null”Array. Bruk også “finne()”Metode for å iterere gjennom matrisen som ble returnert i forrige trinn.
• “Tekstkonkurranse”Eiendom og“kamp()”Metoden samsvarer med verdien av den spesifiserte strengen med teksten som er inneholdt i det tilgangede elementet.
• Etter den fornøyde tilstanden, "

  ”Element vil bli lagt til den opprettede null -arrayen, som diskutert før.

Produksjon

Ovennevnte utgang indikerer at ønsket krav er oppfylt.

Konklusjon

Den kombinerte “QuerySelectorAll ()”Metode og“Tekstkonkurranse”Eiendom kan brukes med“inkluderer ()”Metode eller“Array.fra()”Og“kamp()”Metoder for å finne elementer ved innhold ved hjelp av JavaScript. Denne opplæringen forklarte hvordan du finner elementer ved innhold ved hjelp av JavaScript ved hjelp av forskjellige eksempler.