Come eseguire il loop tramite elementi HTML senza usare il ciclo forea in JavaScript?
BENE! Il ciclo attraverso gli elementi HTML è un compito molto comune, quindi JavaScript offre più approcci che possono essere utilizzati a questo scopo (i.e. Loop attraverso elementi).
Questo articolo spiegherà come loop tramite elementi HTML senza usare il ciclo foreach () in JavaScript e a questo proposito coprirà gli approcci di seguito:
- Looping attraverso elementi HTML usando JavaScript per loop
- Looping tramite elementi HTML usando JavaScript per loop/istruzioni
- Looping attraverso elementi HTML usando JavaScript mentre loop
Quindi iniziamo!
Looping attraverso elementi HTML usando JavaScript per loop
In JavaScript, uno degli approcci più frequentemente utilizzati per loop attraverso elementi HTML è per loop.
Esempio: ciclo attraverso l'elemento
In questo programma, passeremo tramite elementi di etichetta HTML utilizzando JavaScript per loop:
Html
Ecco il riepilogo del file HTML:
- Creato due tag "etichetta" i.e. Nome e cognome.
- Utilizzato il
Tag per aggiungere pause di riga. - Creato due campi di input e un pulsante.
JavaScript
var traverse_element = documento.getElementsByTagName ("etichetta");per (var i = 0; i < traverse_Element.length; i++)
console.log ("elemento corrente", traverse_element [i]);
Il file JavaScript ha eseguito le seguenti attività:
- Utilizzato il metodo "getElementsByTagName" per ottenere la raccolta dell'elemento specificato (i.e. Elemento etichetta nel nostro caso).
- Utilizzato il per loop per iterare gli elementi HTML.
- Utilizzato la proprietà di lunghezza per ottenere il numero di elementi HTML da iterate/attraversate.
- Stampato l'elemento corrente utilizzando la console.Metodo log ().
Produzione:
L'output ha chiarito che il per loop ha attraversato tutto elementi.
Looping tramite elementi HTML usando JavaScript per loop/istruzioni
Il Loop For of è una nuova aggiunta in JavaScript introdotto nelle ultime versioni di ES6. Ci consente di iterare sugli oggetti iterabili come array, stringhe, set e così via.
Esempio: ciclo attraverso l'elemento
In questo programma, passeremo attraverso gli elementi dei pulsanti HTML utilizzando JavaScript per loop:
Html
I file HTML rimarranno gli stessi dell'esempio precedente.
JavaScript
var traverse_element = documento.getElementsByTagName ("pulsante");per (elemento di traverse_element)
console.log (elemento);
Questa volta abbiamo utilizzato le dichiarazioni per lottare attraverso tutti gli elementi:
Ecco come viene utilizzato il ciclo per attraversare elementi HTML.
Looping attraverso elementi HTML usando JavaScript mentre loop
Possiamo usare il javascript durante il ciclo per iterare attraverso gli elementi HTML. L'esempio seguente ti guiderà su come utilizzare il ciclo "mentre" per iterare attraverso gli elementi HTML:
Esempio: ciclo attraverso tutti gli elementi
In questo programma, passeremo attraverso tutti gli elementi HTML usando JavaScript durante loop:
var traverse_element = documento.getElementsByTagName ("*");var counter = 0;
mentre (contatore < traverse_Element.length)
console.log (traverse_element [i]);
contatore ++;
In questo programma di esempio, abbiamo passato il metodo "*" al metodo "getElementByTagname ()" per iterare attraverso tutti gli elementi HTML. Successivamente, abbiamo utilizzato la proprietà di lunghezza entro il ciclo while per ottenere il numero di elementi HTML da iterare/attraversate.
Questo è il modo in cui possiamo eseguire il loop tramite elementi HTML senza usare il metodo foreach () in JavaScript.
Conclusione
JavaScript offre molteplici approcci diversi da Forech Loop che possono essere utilizzati per loop tramite elementi HTML come Loop, per loop e durante loop. Durante il ciclo di elementi HTML, il metodo "getElementsByTagName" può essere utilizzato per ottenere la raccolta dell'elemento specificato. Questo post ha spiegato il funzionamento di diversi approcci per loop attraverso elementi HTML in JavaScript.