JS - Node, Element, HTMLElement

Poznajemy różne typy nodes oraz różnicę między node a element i HTMLElement. Do dzieła.

Klasa node posiada properties nodeName oraz nodeType (to drugie zwraca enum liczbowy). Oba zwracają rodzaj node (węzła):

Attr – atrybut
CData section
Comment – komentarz
Document – dokument
DocumentFragment – dokument fragment (znamy to)
Element – element HTML albo XML
Text- węzeł tekstowy

Różnica pomiędzy node a elementem jest taka, że węzłem jest wszystko, komentarz, tekst (wewnątrz tagu lub na zewnątrz), sam dokument, fragment dokumentu, atrybut, CData, mamy też typ dokumentu (to już sobie darowałem) i chyba coś jeszcze.

Element:

ma swój tag
ma swoje atrybuty
ma swoje dzieci
ma classlist, attributes i inne takie

Node (węzeł):

ma swój textContent, to jego metoda
jeżeli nie jest elementem, to nie ma atrybutów, tagu , tagName, klasy i tak dalej

Rzućmy okiem na ten przykład:

<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>
    <script defer>
        let ul = document.querySelector("#myUl");
        console.log(ul.childNodes);
    </script>

Ul ma 5 childNodes:

Węzeł tekstowy – just text node
Element li
Węzeł tekstowy – newline (enter)
Element li
Węzeł tekstowy – newline (enter)

A teraz:

<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>
    <script defer>
        let ul = document.querySelector("#myUl");
        console.log(ul.children);
    </script>

Dzieci ma ten ul 2:

element li
element li

Ok, zobaczmy węzły-dzieci (childNodes) elementów-dzieci (children) tego ul:

<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>
    <script defer>
        let ul = document.querySelector("#myUl");
        for(let child of ul.children){
            console.log(child.childNodes);
        }
    </script>

Pierwszy 2, drugi 1. Tego się spodziewaliśmy?

Pierwsze dziecko, childNodes:
- Węzeł tekstowy, Text node in li
- Element span
Drugie dziecko, childNodes:
- Węzeł tekstowy, Li 2 text node

Ok, a dzieci dzieci?

<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>
    <script defer>
        let ul = document.querySelector("#myUl");
        for(let child of ul.children){
            console.log(child.children);
        }
    </script>

Pierwszy 1 dziecko (span), drugi zero dzieci, bo zero elementów HTML tam.

Ok, taki skrypt:

<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>
    <script defer>
        let ul = document.querySelector("#myUl");

        console.log("Child elements count: " + ul.childElementCount); //2
        console.log("Child nodes count: " +ul.childNodes.length); //5
    </script>

Mam nadzieję, że nas nie dziwi. O HTMLElement w następnej lekcji, można się na razie domyślić, że to element, ale ściśle HTML (XML odpada).

JS – Node, Element, HTMLElement