¿Diferencia entre objeto de nodo y objeto de elemento?

Estoy totalmente confundido entre el objeto Node y el objeto Element. document.getElementById()devuelve el objeto Element mientras document.getElementsByClassName() devuelve el objeto NodeList (¿Colección de elementos o nodos?)

Si un div es un objeto elemento, ¿qué pasa con el objeto div Node?

¿Qué es un objeto de nodo?

¿Son el objeto documento, el objeto Elemento y el Objeto de texto también objeto Nodo?

Según el libro de David Flanagan 'El objeto de documento, sus objetos de elemento y los objetos de texto son todos objetos de nodo'.

Entonces, ¿cómo es que un objeto puede heredar propiedades / métodos del objeto Element y del objeto Node?

En caso afirmativo, supongo que la clase de nodo y la clase de elemento están relacionadas en el árbol de herencia prototípico.

 <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 nodees el nombre genérico para cualquier tipo de objeto en la jerarquía DOM. A nodepodría ser uno de los elementos DOM integrados como documento document.body, podría ser una etiqueta HTML especificada en el HTML como <input>o <p>podría ser un nodo de texto creado por el sistema para contener un bloque de texto dentro de otro elemento . Entonces, en pocas palabras, a nodees cualquier objeto DOM.

Un elementes un tipo específico nodeya que hay muchos otros tipos de nodos (nodos de texto, nodos de comentarios, nodos de documentos, etc.).

El DOM consiste en una jerarquía de nodos donde cada nodo puede tener un padre, una lista de nodos hijos y un nextSibling y previousSibling. Esa estructura forma una jerarquía en forma de árbol. El documentnodo tendría su lista de nodos secundarios (el headnodo y el bodynodo). El bodynodo tendría su lista de nodos secundarios (los elementos de nivel superior en su página HTML) y así sucesivamente.

Entonces, a nodeListes simplemente una lista tipo matriz nodes.

Un elemento es un tipo específico de nodo, uno que puede especificarse directamente en el HTML con una etiqueta HTML y puede tener propiedades como an ido a class. puede tener hijos, etc. Hay otros tipos de nodos, como nodos de comentarios, nodos de texto, etc. con diferentes características. Cada nodo tiene una propiedad .nodeTypeque informa qué tipo de nodo es. Puede ver los diversos tipos de nodos aquí (diagrama de MDN ):

Puede ver que un ELEMENT_NODEes un tipo particular de nodo donde la nodeTypepropiedad tiene un valor de 1.

Por document.getElementById("test")lo tanto , solo puede devolver un nodo y se garantiza que sea un elemento (un tipo específico de nodo). Por eso solo devuelve el elemento en lugar de una lista.

Como document.getElementsByClassName("para")puede devolver más de un objeto, los diseñadores optaron por devolver un nodeListporque ese es el tipo de datos que crearon para una lista de más de un nodo. Dado que estos solo pueden ser elementos (solo los elementos suelen tener un nombre de clase), técnicamente es un elemento nodeListque solo tiene nodos de elemento de tipo y los diseñadores podrían haber hecho una colección con un nombre diferente que era un elementList, pero eligieron usar solo un tipo de colección si tenía solo elementos o no.

EDITAR: HTML5 define HTMLCollectionuna lista de elementos HTML (no cualquier nodo, solo elementos). Varias propiedades o métodos en HTML5 ahora devuelven un HTMLCollection. Si bien es muy similar en interfaz a a nodeList, ahora se hace una distinción en que solo contiene Elementos, no ningún tipo de nodo.

La distinción entre nodeListay HTMLCollectiontiene poco impacto en cómo se usa uno (por lo que puedo decir), pero los diseñadores de HTML5 ahora han hecho esa distinción.

Por ejemplo, la element.childrenpropiedad devuelve una colección HTMLC en vivo.

Nodees para la implementación de una estructura de árbol, por lo que sus métodos son para firstChild, lastChild, childNodes, etc. Es más de una clase de una estructura de árbol genérico.

Y luego, algunos Nodeobjetos también son Elementobjetos. Elementhereda de Node. ElementEn realidad, los objetos representan los objetos especificados en el archivo HTML mediante etiquetas como <div id="content"></div>. La Elementclase define las propiedades y métodos, tales como attributes, id, innerHTML, clientWidth, blur(), y focus().

Algunos Nodeobjetos son nodos de texto y no son Elementobjetos. Cada Nodeobjeto tiene una nodeTypepropiedad que indica qué tipo de nodo es, para documentos HTML:

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

Podemos ver algunos ejemplos en la consola:

> 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

La última línea de arriba muestra que Elementhereda de Node. (esa línea no funcionará en IE debido a __proto__que deberá usar Chrome, Firefox o Safari).

Por cierto, el documentobjeto es la parte superior del árbol de nodos, y documentes un Documentobjeto, y también Documenthereda de Node:

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

Aquí hay algunos documentos para las clases Nodo y Elemento:
https://developer.mozilla.org/en-US/docs/DOM/Node
https://developer.mozilla.org/en-US/docs/DOM/Element

La mejor fuente de información para todos sus problemas DOM

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

"Los objetos que implementan la interfaz Document, DocumentFragment, DocumentType, Element, Text, ProcessingInstruction o Comment (simplemente llamados nodos) participan en un árbol".

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

"Los nodos de elementos se conocen simplemente como elementos".

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

El objeto Node representa un nodo único en el árbol del documento. Un nodo puede ser un nodo de elemento, un nodo de atributo, un nodo de texto o cualquier otro de los tipos de nodo explicados en el capítulo Tipos de nodo.

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

El objeto Element representa un elemento en un documento XML. Los elementos pueden contener atributos, otros elementos o texto. Si un elemento contiene texto, el texto se representa en un nodo de texto.

duplicar :

• ¿Cuál es la diferencia entre un elemento y un nodo en XML?
• ¿Por qué los nodos y elementos son diferentes en XML? ¿Cuál fue la razón?

El nodo se usa para representar etiquetas en general. Dividido en 3 tipos:

Nota de atributo: es un nodo que dentro de él tiene atributos. Exp:<p id=”123”></p>

Nodo de texto: es un nodo que entre la apertura y el cierre tiene contenido de texto contian. Exp:<p>Hello</p>

Nodo de elemento: es un nodo que dentro de él tiene otras etiquetas. Exp:<p><b></b></p>

Cada nodo puede ser tipos simultáneamente, no necesariamente solo de un tipo único.

Elemento es simplemente un nodo de elemento.