Żywe kolekcje
Mamy przykładowa listę z kilkoma elementami:
<ul class="list">
<li class="list-el">
Element LI numer 1
<button class="button button-del">Usuń</button>
</li>
<li class="list-el">
Element LI numer 2
<button class="button button-del">Usuń</button>
</li>
<li class="list-el">
Element LI numer 3
<button class="button button-del">Usuń</button>
</li>
<li class="list-el">
Element LI numer 4
<button class="button button-del">Usuń</button>
</li>
</ul>
- Element LI numer 1
- Element LI numer 2
- Element LI numer 3
- Element LI numer 4
Pobieramy jej elementy na kilka sposobów:
const li1 = document.querySelectorAll("li.list-el");
const li2 = document.getElementsByTagName("li");
const li3 = document.getElementsByClassName("list-el");
console.log("querySelectorAll: ", li1.length);
console.log("getElementsByTagName: ", li2.length);
console.log("getElementsByClassName: ", li3.length);
Usuń jakieś elementy za pomocą powyższych przycisków, a następnie klikając w poniższy przycisk sprawdź w konsoli długości poszczególnych kolekcji: