Relacje między elementami

Wiemy już, że elementy na stronie tworzą hierarchiczne drzewo.
Aby operować na takich obiektach, musimy dobrze opanować sztukę "spacerowania" po nich.
Możemy je wybierać za pomocą querySelector czy querySelectorAll (i podobnych), ale czasami to za mało.

Każdy element na stronie tworzy tak zwany węzeł. Takimi węzłami są nie tylko elementy, ale także tekst w nich zawarty.

Relacje między węzłami

Przeanalizujmy przykładowy kawałek html:


<div class="test-cnt">
    <p id="text">
        Mała
        <strong style="color:red">Ala</strong>
        miała
        <span style="color:blue">kota</span>
    </p>
</div>

Składa się on z węzłów. Węzłami są kawałki tekstu, ale i elementy, z których złożony jest html. Znając ich położenie, w łatwy sposób możemy się po nich poruszać.


const p = document.querySelector("p");

//właściwości pobierające elementy html
p.parentElement //wskazuje na nadrzędny element - div.test-cnt
p.firstElementChild //pierwszy element w #text
p.lastElementChild //ostatni element w #text
p.children //[strong, span] - kolekcja dzieci elementu #text
p.children[0] //wskazuje na 1 element - <strong style="color:red">Ala</strong>
p.nextElementSibling //następny brat-element
p.previousElementSibling //poprzedni brat-element

//właściwości pobierające węzły
p.parentNode //wskazuje na nadrzędny węzeł - div.test-cnt
p.firstChild //pierwszy node - w naszym przypadku to tekst "Mała "
p.lastChild //ostatni node - "" - html jest sformatowany, wiec ostatnim nodem jest znak nowej linii
p.childNodes //[text, strong, text, span] - kolekcja wszystkich dzieci - nodów
p.childNodes[0] //"Mała"
p.nextSibling //następny węzeł
p.previousSibling //poprzedni węzeł

Mała Ala miała kota

W większości przypadków będzie nas interesować odwoływanie się do elementów html, dlatego głównymi właściwościami, które nas interesują są:

element.parentElement rodzic elementu lub null
element.nextElementSibling następny element (brat) lub null
element.previousElementSibling poprzedni element (brat) lub null
element.children dzieci elementu lub pusta kolekcja
element.firstElementChild
element.children[0]
pierwsze dziecko elementu lub null
element.lastElementChild
element.children[element.children.length-1]
ostatnie dziecko elementu lub null

Funkcja closest

Metoda element.closest("selektor-css") idąc w górę drzewa odnajduje najbliższy element który pasuje do selektora:


<div class="module">
    <div class="module-content">
        <div>
            <button class="button">Kliknij</button>
        </div>
    </div>
</div>

const btn = document.querySelector(".button")
btn.addEventListener("click", e => {
    const module = btn.parentElement.parentElement.parentElement;
    //lub
    const module = btn.closest(".module");
});

Pisząc nasze skrypty powinniśmy starać się robić to w taki sposób, by były jak najbardziej uniwersalne. Sztywne poruszanie się po drzewie zakładając, że musimy 3x przejść do rodzica danego elementu nie jest za bardzo uniwersalne. Struktura HTML może się zmienić, dlatego jeżeli dana sytuacja pozwala - zamiast wielu parentElement o wiele lepiej użyć jednego closest().

Wszelkie prawa zastrzeżone. Jeżeli chcesz używać jakiejś części tego kursu, skontaktuj się z autorem.
Aha - i ta strona korzysta z ciasteczek.