Differenza tra oggetto Nodo e oggetto Elemento?

Sono totalmente confuso tra l'oggetto Node e l'oggetto Element. document.getElementById()restituisce l'oggetto Element mentre document.getElementsByClassName() restituisce l'oggetto NodeList (Collection of Elements o Nodes?)

Se un div è un oggetto Element, allora che dire dell'oggetto Node div?

Che cos'è un oggetto nodo?

L'oggetto documento, l'oggetto elemento e l'oggetto testo sono anche oggetti nodo?

Secondo il libro di David Flanagan "L'oggetto Document, gli oggetti Element e gli oggetti di testo sono tutti oggetti Node".

Quindi, come mai un oggetto può ereditare proprietà / metodi dell'oggetto Element e dell'oggetto Node?

Se sì, immagino che la Classe nodo e la Classe elemento siano correlate nell'albero prototipo dell'ereditarietà.

 <div id="test">
           <p class="para"> 123 </p>
           <p class="para"> abc </p>
 </div>
 <p id="id_para"> next </p>

document.documentElement.toString();    // [object HTMLHtmlElement]

var div = document.getElementById("test");
div.toString();                         // [object HTMLDivElement]                       

var p1 = document.getElementById("id_para");
p1.toString();                          // [object HTMLParagraphElement]

var p2 = document.getElementsByClassName("para");
p2.toString();                          //[object HTMLCollection]

A nodeè il nome generico per qualsiasi tipo di oggetto nella gerarchia DOM. A nodepotrebbe essere uno degli elementi DOM incorporati come documento document.body, potrebbe essere un tag HTML specificato nell'HTML come <input>o <p>o potrebbe essere un nodo di testo creato dal sistema per contenere un blocco di testo all'interno di un altro elemento . Quindi, in poche parole, a nodeè qualsiasi oggetto DOM.

Un elementè un tipo specifico di nodecome ci sono molti altri tipi di nodi (nodi di testo, nodi di commento, nodi di documento, ecc ...).

Il DOM è costituito da una gerarchia di nodi in cui ogni nodo può avere un genitore, un elenco di nodi figlio e un fratello successivo e un fratello precedente. Quella struttura forma una gerarchia simile ad un albero. Il documentnodo avrebbe il suo elenco di nodi figlio (il headnodo e il bodynodo). Il bodynodo avrebbe il suo elenco di nodi figlio (gli elementi di livello superiore nella tua pagina HTML) e così via.

Quindi, a nodeListè semplicemente un elenco simile a array di nodes.

Un elemento è un tipo specifico di nodo, che può essere specificato direttamente nell'HTML con un tag HTML e può avere proprietà come ido o class. può avere figli, ecc ... Esistono altri tipi di nodi come nodi di commento, nodi di testo, ecc ... con caratteristiche diverse. Ogni nodo ha una proprietà .nodeTypeche riporta che tipo di nodo è. Puoi vedere i vari tipi di nodi qui (diagramma da MDN ):

È possibile visualizzare un ELEMENT_NODEtipo di nodo particolare in cui la nodeTypeproprietà ha un valore di 1.

Quindi document.getElementById("test")può restituire solo un nodo ed è garantito che sia un elemento (un tipo specifico di nodo). Per questo motivo restituisce solo l'elemento anziché un elenco.

Poiché document.getElementsByClassName("para")può restituire più di un oggetto, i progettisti hanno scelto di restituire un nodeListperché è il tipo di dati che hanno creato per un elenco di più di un nodo. Dal momento che questi possono essere solo elementi (solo gli elementi in genere hanno un nome di classe), è tecnicamente un nodeListche contiene solo nodi di tipo elemento e i progettisti avrebbero potuto creare una raccolta con un nome diverso che era un elementList, ma hanno scelto di usare solo un tipo di raccolta che contenesse o meno solo elementi.

EDIT: HTML5 definisce un HTMLCollectionche è un elenco di elementi HTML (non alcun nodo, solo elementi). Un certo numero di proprietà o metodi in HTML5 ora restituiscono un HTMLCollection. Sebbene sia molto simile nell'interfaccia a nodeList, ora viene fatta una distinzione in quanto contiene solo elementi, non alcun tipo di nodo.

La distinzione tra a nodeListe an HTMLCollectionha scarso impatto sul modo in cui ne usi uno (per quanto posso dire), ma i progettisti di HTML5 hanno ora fatto questa distinzione.

Ad esempio, la element.childrenproprietà restituisce un HTMLCollection live.

Node è per implementare una struttura ad albero, quindi i suoi metodi sono per firstChild , lastChild, childNodes, ecc E 'più di una classe di una struttura ad albero generico.

E poi, alcuni Nodeoggetti sono anche Elementoggetti. Elementeredita da Node. Elementoggetti in realtà rappresenta gli oggetti come specificato nel file HTML dai tag come <div id="content"></div>. La Elementclasse definisce proprietà e metodi come attributes, id, innerHTML, clientWidth, blur(), e focus().

Alcuni Nodeoggetti sono nodi di testo e non sono Elementoggetti. Ogni Nodeoggetto ha una nodeTypeproprietà che indica che tipo di nodo è, per i documenti HTML:

1: Element node
3: Text node
8: Comment node
9: the top level node, which is document

Possiamo vedere alcuni esempi nella console:

> document instanceof Node
  true

> document instanceof Element
  false

> document.firstChild
  <html>...</html>

> document.firstChild instanceof Node
  true

> document.firstChild instanceof Element
  true

> document.firstChild.firstChild.nextElementSibling
  <body>...</body>

> document.firstChild.firstChild.nextElementSibling === document.body
  true

> document.firstChild.firstChild.nextSibling
  #text

> document.firstChild.firstChild.nextSibling instanceof Node
  true

> document.firstChild.firstChild.nextSibling instanceof Element
  false

> Element.prototype.__proto__ === Node.prototype
  true

L'ultima riga sopra mostra che Elementeredita da Node. (quella linea non funzionerà in IE a causa di __proto__. Dovrà usare Chrome, Firefox o Safari).

A proposito, l' documentoggetto è la parte superiore dell'albero del nodo, ed documentè un Documentoggetto ed Documenteredita daNode :

> Document.prototype.__proto__ === Node.prototype
  true

Ecco alcuni documenti per le classi Node ed Element:
https://developer.mozilla.org/en-US/docs/DOM/Node
https://developer.mozilla.org/en-US/docs/DOM/Element

La migliore fonte di informazioni per tutti i tuoi problemi DOM

http://www.w3.org/TR/dom/#nodes

"Gli oggetti che implementano l'interfaccia Document, DocumentFragment, DocumentType, Element, Text, ProcessingInstruction o Comment (chiamati semplicemente nodi) partecipano a un albero."

http://www.w3.org/TR/dom/#element

"I nodi dell'elemento sono semplicemente conosciuti come elementi."

Nodo: http://www.w3schools.com/js/js_htmldom_nodes.asp

L'oggetto Nodo rappresenta un singolo nodo nella struttura del documento. Un nodo può essere un nodo elemento, un nodo attributo, un nodo di testo o qualsiasi altro tipo di nodo spiegato nel capitolo Tipi di nodo.

Elemento: http://www.w3schools.com/js/js_htmldom_elements.asp

L'oggetto Element rappresenta un elemento in un documento XML. Gli elementi possono contenere attributi, altri elementi o testo. Se un elemento contiene testo, il testo viene rappresentato in un nodo di testo.

duplicare :

• Qual è la differenza tra un elemento e un nodo in XML?
• Perché nodi ed elementi sono diversi in XML? Qual era la logica?

Il nodo viene utilizzato per rappresentare i tag in generale. Diviso in 3 tipi:

Nota sull'attributo: è un nodo che al suo interno ha degli attributi. eXp:<p id=”123”></p>

Nodo testo: è un nodo che tra l'apertura e la chiusura ha un contenuto di testo contian. eXp:<p>Hello</p>

Element Node: è il nodo che al suo interno ha altri tag. eXp:<p><b></b></p>

Ogni nodo può essere tipi contemporaneamente, non necessariamente solo di un singolo tipo.

L'elemento è semplicemente un nodo elemento.