JS - node properties

Poznajemy properties klasy Node (czyli węzła). Do dzieła.

n.parentNode: zwraca rodzica-węzeł.

n.parentElement: zwraca rodzica-element, jeżeli rodzic nie jest elementem, zwraca null.

n.isConnected: zwraca bool, czy węzeł został podłączony, czy nie. Przykład z MDN:

let test = document.createElement("p");
console.log(test.isConnected); // Returns false
document.body.appendChild(test);
console.log(test.isConnected); // Returns true

Tutaj mamy createElement, ale Element jest także węzłem. Równie dobrze moglibyśmy użyć:

createTextNode
createAttribute
createComment
createDocumentFragment

I też sprawdzić, czy został podłączony. Ponadto być może pamiętamy connectedCallback z lekcji o web componentach:

class AnchorScroll extends HTMLAnchorElement {
    connectedCallback(){
        this.addEventListener("click", function(e){
            e.preventDefault();
            const anchor = this.getAttribute('href');
            document.querySelector(anchor).scrollIntoView({
                behavior: 'smooth'
            });
        });
    }
}

customElements.define('custom-anchor', AnchorScroll, {extends: 'a'});

Jak pamiętamy, to w domu jesteśmy.

n.textContent: zawartość tekstowa węzła

n.childNodes: dzieci – wszystkie dzieci, nie tylko elementy, a zarazem tylko bezpośrednie dzieci, nie potomkowie. Dla przypomnienia:

<ul id="myUl">
        Just text node
        <li>Text node in li <span>text node in span</span></li>
        <li>Li 2 text node</li>
</ul>

Tu mamy 5 dzieci:

text node – just tex node + \n
element li
text node – \n
element li
text node \n

Span to dziecko firstElementChild, czili li, text node in span to firstChild – dziecko spana, Li 2 text node to firstChild (tekstowy, nie elementowy) elementu li

n.firstChild: pierwsze dziecko (nieważne czy element, czy tekst, czy komentarz) danego węzła

n.lastChild: ostatnie dziecko węzła. W przypadku naszej listy Just text node to pierwsze dziecko, zaś ostatnim jest… nie, nie element li, text node „\n”, tak!

n.nextSibling: następny braciszek, dla Just text node jest to element li

n.previousSibling: poprzedni braciszek, dla pierwszego li jest to Just text node, dla drugiego li jest to pierwszy li

n.nodeValue: głupota, nie używać w ciemno, gdy nie znamy typu node, bo może oznaczać różne rzeczy w zależności od typu

n.nodeName: rodzaj węzła w postaci stringa

n.nodeType: rodzaj węzła w postaci liczbowej

n.ownerDocument: dokument do którego należy węzeł.

JS – node properties