Differenza tra oggetto nodo e oggetto elemento?

Question

Sono totalmente confuso tra oggetto Nodo e oggetto Elemento. document.getElementById() ritorna elemento oggetto mentre document.getElementsByClassName() rendimenti NodeList oggetto (Raccolta di elementi o nodi?)

Se un div è un elemento oggetto poi che dire oggetto Node div?

Che cos'è un oggetto Node?

L'oggetto documento, l'oggetto Elemento e l'oggetto testo sono anch'essi oggetti nodo?

Come per il libro di David Flanagan "L'oggetto Document, i suoi oggetti elemento e gli oggetti di testo sono tutti oggetti nodo".

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

Se sì, suppongo che la classe del nodo e la classe dell'elemento siano correlate nell'albero di ereditarietà prototipo.

<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] 

Answer 1

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

Un element è uno specifico tipo di node in quanto vi sono molti altri tipi di nodi (nodi di testo, nodi di commento, nodi di documenti, ecc.).

Il DOM è costituito da una gerarchia di nodi in cui ciascun nodo può disporre di un padre, un elenco di nodi figlio e un successivo di Sibilla e precedente. Quella struttura forma una gerarchia ad albero. Il nodo document dovrebbe avere il proprio elenco di nodi secondari (il nodo head e il nodo body). Il nodo body dovrebbe avere il proprio elenco di nodi figli (gli elementi di livello superiore nella pagina HTML) e così via.

Quindi, uno nodeList è semplicemente un elenco di tipo array di nodes.

Un elemento è un tipo specifico di nodo, uno che può essere specificato direttamente nell'HTML con un tag HTML e può avere proprietà come id o class. può avere figli, ecc. Ci sono altri tipi di nodi come nodi di commento, nodi di testo, ecc. con caratteristiche diverse. Ogni nodo ha una proprietà .nodeType che segnala quale tipo di nodo è. È possibile vedere i vari tipi di nodi here (diagramma da MDN):

si può vedere un ELEMENT_NODE è un particolare tipo di nodo in cui la proprietà nodeType 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 semplicemente l'elemento anziché una lista.

Poiché document.getElementsByClassName("para") può restituire più di un oggetto, i progettisti hanno scelto di restituire un nodeList perché questo è 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 uno nodeList che contiene solo nodi di tipo elemento ei designer potrebbero aver creato una raccolta con un nome diverso che era elementList, ma hanno scelto di utilizzare solo un tipo di raccolta, se avesse o meno elementi in essa contenuti.

---

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

La distinzione tra uno nodeList e uno HTMLCollection ha un impatto minimo su come si utilizza uno (per quanto posso dire), ma i progettisti di HTML5 hanno fatto questa distinzione.

Ad esempio, la proprietà element.children restituisce un HTMLCollection attivo.

Answer 2

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

L'oggetto Node rappresenta un singolo nodo nell'albero del documento. Un nodo può essere un nodo di elemento, un nodo di attributo, un nodo di testo o qualsiasi altro dei tipi 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.

duplicato:

• What's the difference between an element and a node in XML?
• Why are Nodes and Elements different in XML? What was the rationale?

Answer 3

migliore fonte di informazione per tutti i vostri guai 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

"nodi degli elementi sono semplicemente chiamati elementi."

Answer 4

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

E quindi, alcuni oggetti Node sono anche oggetti Element.Element eredita da Node. Gli oggetti Element rappresentano effettivamente gli oggetti come specificato nel file HTML dai tag come <div id="content"></div>. La classe Element definisce proprietà e metodi come attributes, id, innerHTML, clientWidth, blur() e focus().

Alcuni oggetti Node sono nodi di testo e non sono oggetti Element. Ogni oggetto Node ha una proprietà nodeType che indica il 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 Element eredita da Node. (quella linea non funzionerà in IE a causa di __proto__. Sarà necessario utilizzare Chrome, Firefox o Safari).

proposito, l'oggetto document è la cima dell'albero nodo e document è un oggetto Document e Document eredita da Node così:

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

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

Answer 5

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

Attributo Nota: è il nodo che al suo interno ha attributi. Exp: <p id=”123”></p>

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

Elemento nodo: è 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 di elemento.