Ż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 Usuń
• Element LI numer 2 Usuń
• Element LI numer 3 Usuń
• Element LI numer 4 Usuń

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:

Pokaż w konsoli ilości elementów