Diferencia entre el objeto Node y el objeto Element?

Question

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

Si un div es un elemento de objeto a continuación, ¿qué pasa con objeto Node div?

¿Qué es un objeto nodo?

¿El objeto del documento, el objeto del elemento y el objeto del texto son también objeto del nodo?

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

Entonces, ¿cómo puede un objeto heredar propiedades/métodos del objeto Element así como del objeto Node?

En caso afirmativo, creo 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] 

Answer 1

A node es el nombre genérico para cualquier tipo de objeto en la jerarquía DOM. Un node podría ser uno de los elementos DOM integrados como document o document.body, podría ser una etiqueta HTML especificada en el HTML como <input> o <p> o 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, un node es cualquier objeto DOM.

Un element es un tipo específico de node ya que hay muchos otros tipos de nodos (nodos de texto, nodos de comentario, nodos de documento, etc.).

El DOM consta de una jerarquía de nodos donde cada nodo puede tener un elemento principal, una lista de nodos secundarios y nextSibling y previousSibling. Esa estructura forma una jerarquía de árbol. El nodo document tendría su lista de nodos secundarios (el nodo head y el nodo body). El nodo body tendría su lista de nodos secundarios (los elementos de nivel superior en su página HTML) y así sucesivamente.

Por lo tanto, un nodeList es simplemente una lista tipo array de nodes.

Un elemento es un tipo específico de nodo, uno que se puede especificar directamente en el HTML con una etiqueta HTML y puede tener propiedades como id o 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 .nodeType que informa qué tipo de nodo es. Se puede ver los diversos tipos de nodos aquí (diagrama de MDN):

se puede ver un ELEMENT_NODE es un tipo particular de nodo en el que la propiedad nodeType tiene un valor de 1.

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

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

---

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

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

Por ejemplo, la propiedad element.children devuelve una HTMLCollection en vivo.

Answer 2

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

El objeto nodo representa un solo nodo en el árbol de documento. Un nodo puede ser un nodo de elemento, un nodo de atributo, un nodo de texto o cualquier otro tipo de nodo explicado 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.

duplicado:

• 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

mejor fuente de información para todas sus aflicciones DOM

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

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

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

"nodos de elementos se conoce simplemente como elementos".

Answer 4

Node es 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 objetos Node también son objetos Element.Element hereda de Node. Element objetos realmente representa los objetos como se especifica en el archivo HTML por las etiquetas como <div id="content"></div>. La clase Element define propiedades y métodos como attributes, id, innerHTML, clientWidth, blur() y focus().

Algunos objetos Node son nodos de texto y no son objetos Element. Cada objeto Node tiene una propiedad nodeType que indica el tipo de nodo que es, para los 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 anterior muestra que Element hereda de Node. (Esa línea no funcionará en IE debido a __proto__. Necesitará usar Chrome, Firefox o Safari).

Por cierto, el objeto document es la parte superior del árbol de nodos, y document es un objeto Document y Document hereda de Node así:

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

Aquí hay algunos documentos para el nodo y elemento clases:
https://developer.mozilla.org/en-US/docs/DOM/Node
https://developer.mozilla.org/en-US/docs/DOM/Element

Answer 5

nodo se utiliza para representar las etiquetas en general. Dividido en 3 tipos:

Nota de atributo: es un nodo que tiene atributos en su interior. Exp: <p id=”123”></p>

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

Element Node: es un nodo que tiene otras etiquetas. Exp: <p><b></b></p>

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

Elemento es simplemente un nodo de elemento.