Jak zapętlić elementy HTML bez użycia pętli Foreach w JavaScript?

Ilekroć myślimy o zapętlaniu się przez elementy HTML, nasze umysły skierowują w kierunku pętli foreach (). Ale co, jeśli będziemy musieli zapętlić elementy HTML bez użycia pętli w JavaScript w JavaScript? Czy mamy inne podejście do zapętlania za pośrednictwem elementów HTML w JavaScript?

Dobrze! Pętlanie elementów HTML jest bardzo powszechnym zadaniem, więc JavaScript oferuje wiele podejść, które można użyć do tego celu (i.mi. Pętla przez elementy).

Ten zapis wyjaśni, jak zapętlić elementy HTML bez użycia pętli foreach () w JavaScript i pod tym względem obejmie podejścia poniżej listy:

• Pętanie przez elementy HTML za pomocą JavaScript for Loop
• Pętanie za pomocą elementów HTML za pomocą JavaScript dla pętli/instrukcji
• Zapętlanie elementów HTML za pomocą JavaScript podczas pętli

Więc zacznijmy!

Pętanie przez elementy HTML za pomocą JavaScript for Loop

W JavaScript jednym z najczęściej stosowanych podejść do zapętlania elementów HTML jest pętla.

Przykład: pętla przez element

W tym programie zapętwamy elementy etykiety HTML za pomocą JavaScript for Loop:

Html

Imię:





Nazwisko:





OK

Oto podsumowanie pliku HTML:

• Utworzył dwa tagi „etykiety” i.mi. Imię i nazwisko.
• Wykorzystał
  tagi, aby dodać przerwy linii.
• Utworzył dwa pola wejściowe i przycisk.

JavaScript

var traverse_element = dokument.getElementsBaTagname („etykieta”);
dla (var i = 0; i < traverse_Element.length; i++)
konsola.log („bieżący element”, traverse_element [i]);

Plik JavaScript wykonał następujące zadania:

• Wykorzystał metodę „getElementsBaTagname”, aby uzyskać zbiór określonego elementu (i.mi. element etykiety w naszym przypadku).
• Wykorzystywał pętlę, aby iterować elementy HTML.
• Wykorzystał właściwość długości, aby uzyskać liczbę elementów HTML, aby zostać iterowana/przemierzona.
• Wydrukował bieżący element za pomocą konsoli.Metoda log ().

Wyjście:

Wyjście wyjaśniło, że za pętla przemierzyła się przez wszystkie elementy.

Pętanie za pomocą elementów HTML za pomocą JavaScript dla pętli/instrukcji

FOR-OF Loop to nowy dodatek w JavaScript wprowadzony w najnowszych wersjach ES6. Pozwala nam iterować nad iteracyjnymi obiektami, takimi jak tablice, struny, zestawy i tak dalej.

Przykład: pętla przez element

W tym programie zapętwamy elementy przycisków HTML za pomocą JavaScript for-of-of-of-of-Loop:

Html

Pliki HTML pozostaną takie same jak w poprzednim przykładzie.

JavaScript

var traverse_element = dokument.getElementsBaTagName („przycisk”);
dla (element traverse_element)
konsola.log (element);

Tym razem wykorzystaliśmy formy do zapętlenia wszystkich elementów:

W ten sposób pętla jest używana do przemierzania elementów HTML.

Zapętlanie elementów HTML za pomocą JavaScript podczas pętli

Możemy użyć JavaScript podczas pętli do iteracji przez elementy HTML. Poniższy przykład podany poprowadzi Cię, jak korzystać z pętli „While”, aby iterować za pośrednictwem elementów HTML:

Przykład: pętla przez wszystkie elementy

W tym programie zapętwamy wszystkie elementy HTML za pomocą JavaScript podczas pętli:

var traverse_element = dokument.getElementsBaTagname („*”);
var licznik = 0;
When (licznik < traverse_Element.length)
konsola.log (traverse_element [i]);
licznik ++;

W tym przykładowym programie przekazaliśmy metodę „*” do metody „getElementByTagname ()”, aby iterować wszystkie elementy HTML. Następnie wykorzystaliśmy właściwość długości w pętli While, aby uzyskać liczbę elementów HTML do iterowanych/przemierzonych.

W ten sposób możemy zapętlić elementy HTML bez użycia metody foreach () w JavaScript.

Wniosek

JavaScript oferuje wiele podejść innych niż pętla foreach, które można użyć do pętli za pośrednictwem elementów HTML, takich jak pętla, pętla i poby. Podczas zapętlania elementów HTML można zastosować metodę „getElementsBaTagname” do uzyskania kolekcji określonego elementu. W tym poście wyjaśniono działanie kilku podejść do zapętlania za pośrednictwem elementów HTML w JavaScript.