document.getElementById(), id | Uzyskujemy dostęp do elementu drzewa DOM - listy zadań

Na razie nasz UI (czyli to, co widzimy w przeglądarce - HTML, który napisaliśmy w poprzednim kursie) jest absolutnie statyczny. Owszem, mamy listę zadań, ale są one zakodowane w HTMLu i nie możemy z nimi nic zrobić jako użytkownicy.

Chcemy pobrać zadania z localStorage, co już udało się nam zrobić w kursie JavaScript, i wyświetlić właśnie te zadania! Żeby to zrobić, musimy uzyskać dostęp do naszej listy HTML <ul> z poziomu kodu JavaScript.

Możemy to zrobić na kilka sposobów, ale posłużymy się metodą document.getElementById().

Metoda document.getElementById(), jak sama nazwa wskazuje, pozwala na uzyskanie dostępu do elementu drzewa DOM (czyli dowolnego znacznika) o określonym id.

Nasza lista HTML nie ma przypisanego id, więc musimy najpierw je dodać do kodu w pliku HTML, który stworzyliśmy w poprzednim kursie. W tagu otwierającym <ul> dodaj id="tasks-list" w ten sposób:

<!-- ... wcześniejszy kod HTML -->

<ul id="tasks-list">
  <li>zrobić kawę <button>usuń</button></li>
  <li>wypić jogurt <button>usuń</button></li>
  <li>sprawdzić maila <button>usuń</button></li>
</ul>

<!-- ... dalszy kod HTML -->

Każdy tag może mieć unikalne id, dzięki czemu możemy precyzyjnie uzyskać do niego dostęp z poziomu kodu JavaScript. id powinno mieć opisową nazwę, podobnie jak nazwy zmiennych czy funkcji, w związku z tym naszą listę zadań nazwaliśmy "tasks-list".

Teraz, zapisz zmiany w pliku HTML, odśwież przeglądarkę i otwórz konsolę.

Możesz z ciekawości przejść do zakładki Elements, by zobaczyć kod HTML Twojej strony - jak widzisz, przeglądarka "osadziła" nasz niekompletny kod w szablon pliku HTML, o czym wspominałem wcześniej. W tej zakładce możesz mieć podgląd drzewa DOM dowolnej strony www, ale także dodatkowej zawartości pliku HTML, jak np. skryptów JavaScript.

Powróćmy teraz do konsoli i spróbujmy uzyskać dostęp do listy zadań za pomocą document.getElementById() na razie z poziomu konsoli:

const tasksList = document.getElementById("tasks-list");

console.log(tasksList);

Jak widzisz, w konsoli wyświetlił Ci się wycinek drzewa DOM, zawierający listę <ul>, którą można rozwinąć i zobaczyć wszystkie elementy listy <li>. Z kolei możesz teraz wpisać w konsoli po prostu tasksList. i zobaczysz, że po kropce wyświetli Ci się długa lista dostępnych metod, które możesz zastosować do danego węzła (node) DOM, np. tasksList.children, który wyświetli Ci tablicę zawierającą wszystkie "dzieci" danego węzła.

To wszystko oznacza, że właśnie poprawnie uzyskałeś/aś dostęp do HTMLa/ elementu DOM za pomocą właściwości id, przypisałeś/aś ten element (listę) do JavaScriptowej zmiennej (a dokładniej stałej) tasksList, w związku z czym możesz teraz manipulować tym węzłem - dodawać/ usuwać elementy listy (oraz robić całe mnóstwo innych rzeczy!).