Hvordan få element etter type i javascript

Det er flere måter å få eller hente et element i JavaScript, inkludert GetElementById () og GetElementByClass (). Har du imidlertid noen gang tenkt på å få typen element? I så fall, så la oss fortelle deg at JavaScript tilbyr QueryStectorAll () eller getElementsByTagName () -metoder som kan brukes til det spesifiserte formålet.

Denne oppskrivningen vil forklare metodene for å få elementer etter type i JavaScript.

Hvordan få element etter type i javascript?

For å få elementer etter type, bruk følgende metoder:

• querySelectorAll () -metode
• getElementsByTagName () -metode

La oss sjekke ut hver av de nevnte metodene en etter en!

Metode 1: Få element etter type ved bruk av QueryRectorAll () -metode

“QuerySelectorAll ()”Er en JavaScript forhåndsdefinert dokumentmetode som returnerer elementobjektene som samsvarer med de spesifiserte velgerne. QuerySelectorAll () og QuerySector () -metodene fungerer på samme måte, men hovedforskjellen er at QuerySelectorAll () får alle elementene matchet med velgeren mens QuerySector () -metoden bare returnerer først samsvarende elementobjekt.

Syntaks
Følg den gitte syntaksen for å få elementet etter type ved hjelp av spørringselectorAll () -metoden:

dokument.QuerySelectorAll (Selectors);

Her, "velger”Er den typen hvis elementer du vil få for eksempel“inngang”Eller“input [type = tekst]”. Den vil finne ut alle elementene som er matchet med den spesifiserte velgeren og returnerer til DOM. Du kan passere flere velgere atskilt med komma.

Eksempel 1: Få ett element etter type
I det følgende eksemplet vil vi lage et inngangsfelt “tekst”Med ID“Navn”Og verdi”John”Og en overskrift:

Få element etter type = input [type = tekst]

Lag også tre inngangstype "radio”Ved å tilordne ID -er og verdier:

Html

CSS

JavaScript

Opprett deretter en knapp ved å feste “ved trykk”Hendelse som vil utløse den brukerdefinerte metoden som heter“elementGetType ()”:

Klikk

I en JavaScript -fil, først, ring "QuerySelectorAll ()”Metode ved å passere en velger”input [type = tekst]”Som vil returnere alle elementene av denne typen. Deretter definerer du en "elementGetType ()”Metode der en varsel () -metode skriver ut meldingen med verdien av den spesifiserte velgeren:

var elementTypeselector = dokument.querySelectorAll ('input [type = text]');
funksjon ElementGetType ()
Alert ("HTML Element Input Type -teksten inneholder" + ElementTypeselector [0].verdi);

Utgangen vises “John”I varslingsmelding som er verdien av tekstfeltet for inngangstype:

Eksempel 2: Få alle elementer etter type
Nå, få alle elementene i inngangstypen ved å passere “inngang”Som et argument i“QuerySelectorAll ()”Metode:

var elementTypeselector = dokument.QuerySelectorAll ('Input');

Skriv ut verdiene til “inngang”Valg inkludert“tekst”Og“radio”På konsoll:

konsoll.logg (elementTypeselector [0].Verdi, elementTypeselector [1].Verdi, elementTypeselector [2].Verdi, elementTypeselector [3].verdi);

Produksjon

Metode 2: Få element etter type ved hjelp av getElementsByTagName () Metode

Det er en annen JavaScript forhåndsdefinert metode som heter “getElementsByTagName ()”Som returnerer elementobjektene hvis tagnavn samsvarer med det spesifiserte navnet.

Syntaks
Bruk følgende syntaks for å bruke metoden GetElementBytagName ():

dokument.getElementsByTagName (navn);

Her, “Navn”Er tagnavnet til en HTML -attributt.

Eksempel
I dette eksemplet vil vi få verdien av elementet etter type ved å bruke "getElementsByTagName ()”Metode, hvor vi vil passere tagnavnet”inngang”For å få verdiene til elementet til å matche det spesifiserte tagnavnet og lagre det i en variabel”elementTypeselector”. Deretter definerer du en "elementGetType ()”Funksjon, der for -loopen vil iterere til lengden på velgeren og sjekke typen av velgeren; Hvis det er lik "Radio", kan du kalle Alert () -metoden for å skrive ut verdiene til radioelementet:

var elementTypeselector = dokument.getElementsByTagName ('input');
funksjon ElementGetType ()
for (la i = 0; i < elementTypeSelector.length; i++)
if (elementTypeselector [i].type == 'radio')
Alert ("HTML Element Input Type Radio inneholder" + ElementTypeselector [i].verdi);

Utgangen viser alle verdiene på inngangstypen radio:

Vi har gitt alle løsningene for å få elementer etter type JavaScript.

Konklusjon

For å få elementene etter type, bruk JavaScript forhåndsdefinerte metoder inkludert, QuerySectorAll () -metode eller GetElementSByTagName () -metoden. Den eneste forskjellen mellom dem begge er at GetElementsByTagName () bare hentet elementer hvis definerte tagnavn samsvarer med den medfølgende taggen mens QuerySectorAll, som velger alle elementer. I denne oppskrivningen har vi forklart de forskjellige tilnærmingene for å få elementer etter type JavaScript.