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.