PWA

Node vs Element

• 3 minuty

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.

Baner promujący artykuł

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.
Uproszczony diagram ukazujący relacje między Node a Element.

Co zawiera Node?

W przyrodzie istnieje 12 typów NODE-ów. Poniżej ich lista:

  1. ELEMENT_NODE - document.createElement
  2. ATTRIBUTE_NODE - document.createAttribute
  3. TEXT_NODE - document.createTextNode
  4. CDATA_SECTION_NODE - document.createCDATASection
  5. ENTITY_REFERENCE_NODE
  6. ENTITY_NODE
  7. PROCESSING_INSTRUCTION_NODE - document.createProcessingInstruction
  8. COMMENT_NODE - document.createComment
  9. DOCUMENT_NODE
  10. DOCUMENT_TYPE_NODE
  11. DOCUMENT_FRAGMENT_NODE - document.createDocumentFragment
  12. 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.