Hvordan sløyfe gjennom HTML -elementer uten å bruke foreach -sløyfe i JavaScript?

Hver gang vi tenker på å sløyfe gjennom HTML -elementer, avleder tankene våre mot foreach () -sløyfen. Men hva om vi må sløyfe gjennom HTML-elementene uten å bruke for-hver-loop i JavaScript? Har vi noen annen tilnærming for looping gjennom HTML -elementer i JavaScript?

Vi vil! Looping gjennom HTML -elementer er en veldig vanlig oppgave, så JavaScript tilbyr flere tilnærminger som kan brukes til dette formålet (i.e. Sløyfe gjennom elementer).

Denne oppskrivningen vil forklare hvordan du kan sløyfe gjennom HTML-elementer uten å bruke foreach () -løyfe i JavaScript, og i denne forbindelse vil den dekke de nedenfor-listede tilnærmingene:

• Looping gjennom HTML-elementer ved hjelp av JavaScript for-loop
• Looping gjennom HTML-elementer ved hjelp av JavaScript for-of Loop/Statements
• Looping gjennom HTML -elementer ved hjelp av JavaScript mens Loop

Så la oss komme i gang!

Looping gjennom HTML-elementer ved hjelp av JavaScript for-loop

I JavaScript er en av de mest brukte tilnærmingene til å sløyfe gjennom HTML-elementer for loop.

Eksempel: sløyfe gjennom elementet

I dette programmet vil vi sløyfe gjennom HTML-etikettelementer ved å bruke JavaScript for-loop:

Html

Fornavn:





Etternavn:





Ok

Her er sammendraget av HTML -filen:

• Opprettet to "etikett" -merker i.e. Fornavn og etternavn.
• Benyttet
  Tagger for å legge til linjeskift.
• Opprettet to inngangsfelt og en knapp.

JavaScript

var traverse_element = dokument.getElementsByTagName ("Label");
for (var i = 0; i < traverse_Element.length; i++)
konsoll.Logg ("Current Element", Traverse_Element [i]);

JavaScript -filen utførte følgende oppgaver:

• Benyttet metoden “getElementsBytagname” for å få samlingen av det spesifiserte elementet (i.e. etikettelement i vårt tilfelle).
• Brukte for-loop for å iterere HTML-elementene.
• Benyttet lengdeegenskapen for å få antall HTML -elementer som skal itereres/krysses.
• Trykket det gjeldende elementet ved hjelp av konsollen.Log () Metode.

Produksjon:

Utgangen avklarte at for-loopen krysset gjennom alle elementer.

Looping gjennom HTML-elementer ved hjelp av JavaScript for-of Loop/Statements

For-of Loop er et nytt tillegg i JavaScript introdusert i de siste versjonene av ES6. Det lar oss iterere over de iterable objektene som matriser, strenger, sett og så videre.

Eksempel: sløyfe gjennom elementet

I dette programmet vil vi sløyfe gjennom HTML-knappelementer ved å bruke JavaScript for-of Loop:

Html

HTML -filer vil forbli de samme som i forrige eksempel.

JavaScript

var traverse_element = dokument.getElementsByTagName ("Button");
for (element av traverse_element)
konsoll.logg (element);

Denne gangen benyttet vi av uttalelser for å sløyfe gjennom alle elementene:

Slik brukes for-av-loopen til å krysse HTML-elementer.

Looping gjennom HTML -elementer ved hjelp av JavaScript mens Loop

Vi kan bruke JavaScript mens Loop for å iterere gjennom HTML -elementene. Det undergitte eksemplet vil guide deg om hvordan du bruker "mens" -løkken for å iterere gjennom HTML-elementene:

Eksempel: sløyfe gjennom alle elementene

I dette programmet vil vi sløyfe gjennom alle HTML -elementene som bruker JavaScript mens Loop:

var traverse_element = dokument.getElementsByTagName ("*");
var counter = 0;
mens (teller < traverse_Element.length)
konsoll.log (traverse_element [i]);
teller ++;

I dette eksempelprogrammet passerte vi “*” til metoden “getElementBytagName ()” for å iterere gjennom alle HTML -elementene. Deretter benyttet vi lengdeegenskapen i Mens Loop for å få antall HTML -elementer for å bli iterert/krysset.

Slik kan vi sløyfe gjennom HTML -elementer uten å bruke foreach () -metoden i JavaScript.

Konklusjon

JavaScript tilbyr flere andre tilnærminger enn Foreach Loop som kan brukes til å sløyfe gjennom HTML-elementer som for Loop, for-of Loop, og mens Loop. Mens du looping gjennom HTML -elementer, kan metoden “getElementsbytagname” brukes til å få samlingen av det spesifiserte elementet. Dette innlegget forklarte arbeidet med flere tilnærminger for å sløyfe gjennom HTML -elementer i JavaScript.