JS - Element properties

Poznajemy (niektóre) properties klasy Element i zestawiamy to z tym, co już wiemy o klasie Node. Lekcja niezbędna, aby poznać JS dogłębnie.

e.id: id elementu. Powinno być unikalne, ale raz, że możemy to sami zepsuć, dwa cloneNode deep copy może nam zduplikować ID (cloneNode to metoda klasy Node, które jest nieświadome takich wynalazków, jak id, już teraz powinniśmy coraz lepiej ogarniać co jak gdzie i dlaczego).

e.tagName: nazwa tagu

e.attributes: atrybuty elementu

e.classList: obiekt classList z fajnym api fajnymi metodami (add, remove, toggle, has)

e.className: cała klasa jednym stringiem, tak jak jest w HTML zapisana

e.childElementCount: ilość dzieci, tylko elementy są brane pod uwagę

e.children: tablica dzieci-elementów

e.firstElementChild: pierwsze dziecko-element

e.lastElementChild: ostatnie dziecko-element

e.nextElementSibling: następny braciszek-element

e.previousElementSibling: poprzedni braciszek-element

e.innerHTML/e.outerHTML: zakładam że to znamy oraz ogarniamy, że n.textContent pochodzi od klasy node

Element ma też dużo aria properties, ale nie będziemy ich tutaj wszystkich omawiać. Zamiast tego rzucimy sobie 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>

I teraz rozpisujemy to na czynniki pierwsze:

ul.childElementCount: 2
ul.childNodes.length: 5
ul.firstElement: Just text node
ul.firstElementChild: li
ul.lastElementChild: li
ul.lastElement: „\n” (text node)

JS – Element properties