Bardzo często początkujący programiści pracujący z DOM-em, mają problem z odróżnieniem Element-u od Node-a. Chciałbym wytłumaczyć prostymi słowami jaka jest różnica.

Różnice
- Node
- Node to jest dowolny element, komentarz, pusty znak, węzeł CDATA a nawet fragment dokumentu.
- Element
- Element jest to Node o typie 1 oraz nazwie systemowej ELEMENT_NODE.
Co zawiera Node?
W przyrodzie istnieje 12 typów NODE-ów. Poniżej ich lista:
-
ELEMENT_NODE -
document.createElement
-
ATTRIBUTE_NODE -
document.createAttribute
-
TEXT_NODE -
document.createTextNode
-
CDATA_SECTION_NODE -
document.createCDATASection
- ENTITY_REFERENCE_NODE
- ENTITY_NODE
-
PROCESSING_INSTRUCTION_NODE -
document.createProcessingInstruction
-
COMMENT_NODE -
document.createComment
- DOCUMENT_NODE
- DOCUMENT_TYPE_NODE
-
DOCUMENT_FRAGMENT_NODE -
document.createDocumentFragment
- NOTATION_NODE
Mięso
Dla przykładu dodam trochę kodu, który rozjaśni sprawę:
document.createComment('my comment') instanceof Node // true
document.createComment('my comment') instanceof Element // false
document.createComment('my comment') instanceof Comment // true
document.createElement('style') instanceof Node // true
document.createElement('style') instanceof Element // true
document.createElement('style') instanceof HTMLElement // true
document.createElement('style') instanceof HTMLStyleElement // true
document.createTextNode('piw paw!') instanceof Node // true
document.createTextNode('piw paw!') instanceof Element // false
document.createTextNode('piw paw!') instanceof Text // true
document.createDocumentFragment() instanceof Node // true
document.createDocumentFragment() instanceof Element // false
document.createDocumentFragment() instanceof DocumentFragment // true
document.createAttribute('a') instanceof Attr // true
Błąd w mojej bibliotece pklib
W bibliotece pklib znajduje się metoda isNode która sprawdza, czy dany obiekt, przesłany jako parametr, jest obiektem typu node.
Niestety wykorzystuje ona "Duck typing" zamiast wykorzystać operator
instanceof
- dlatego też biblioteka
NIE DZIAŁA poprawnie!
Przykładowy kod:
var $div = document.createElement("div");
pklib.dom.isElement($div); // true - wszystko jest zgadza...
pklib.dom.isNode($div); // false - no i tu jest zonk!
Jak możesz zobaczyć w przykładzie funkcja isNode
nie
zwraca poprawnej wartości gdy podajemy jako parametr
HTMLElement, który jest przecież elementem pochodnym
Node-a.
Ta biblioteka ma wiele błędów. Dlatego uznaje ją jako DEPRECATED i proszę drogi czytelniku o nie używanie jej - no chyba, że chcesz przetestować jak źle działa 😄.
Podsumowanie
Mam nadzieje, że szybko wyjaśniłem Ci jaka jest różnica między
Node-a.
W razie pytań zostaw komentarz.
Ze swojego doświadczenia polecam MDN, gdzie jest dobra dokumentacja.