Diferença entre o objeto Nó e o elemento Elemento?

Estou totalmente confuso entre o objeto Node e o elemento Element. document.getElementById()retorna o objeto Element enquanto document.getElementsByClassName() retorna o objeto NodeList (coleção de elementos ou nós?)

Se uma div é um Objeto de Elemento, o que acontece com o objeto div Node?

O que é um objeto de nó?

Objeto de documento, Objeto de elemento e Objeto de texto também são Objetos de nó?

De acordo com o livro de David Flanagan, 'O objeto Documento, Seus objetos de elemento e objetos de texto são todos objetos de Nó'.

Então, como é que um objeto pode herdar propriedades / métodos do objeto Element, bem como do objeto Node?

Se sim, acho que a classe Node e a classe Element estão relacionadas na árvore prototípica da herança.

 <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é o nome genérico para qualquer tipo de objeto na hierarquia DOM. A nodepode ser um dos elementos DOM internos, como documentor document.body, pode ser uma tag HTML especificada no HTML, como <input>or, <p>ou pode ser um nó de texto criado pelo sistema para reter um bloco de texto dentro de outro elemento . Então, em poucas palavras, a nodeé qualquer objeto DOM.

An elementé um tipo específico de, nodepois existem muitos outros tipos de nós (nós de texto, comentários, nós de documentos, etc.).

O DOM consiste em uma hierarquia de nós em que cada nó pode ter um pai, uma lista de nós filhos e um nextSibling e previousSibling. Essa estrutura forma uma hierarquia semelhante a uma árvore. O documentnó teria sua lista de nós filhos (o headnó e o bodynó). O bodynó teria sua lista de nós filhos (os elementos de nível superior na sua página HTML) e assim por diante.

Portanto, a nodeListé simplesmente uma lista de matrizes nodes.

Um elemento é um tipo específico de nó, que pode ser especificado diretamente no HTML com uma tag HTML e pode ter propriedades como a idou a class. pode ter filhos, etc ... Existem outros tipos de nós, como nós de comentários, nós de texto, etc ... com características diferentes. Cada nó tem uma propriedade .nodeTypeque relata que tipo de nó é. Você pode ver os vários tipos de nós aqui (diagrama do MDN ):

Você pode ver um ELEMENT_NODEé um tipo específico de nó em que a nodeTypepropriedade possui um valor 1.

Portanto, document.getElementById("test")só pode retornar um nó e é garantido que ele seja um elemento (um tipo específico de nó). Por isso, apenas retorna o elemento em vez de uma lista.

Como document.getElementsByClassName("para")podem retornar mais de um objeto, os designers optaram por retornar um nodeListporque esse é o tipo de dados que eles criaram para uma lista de mais de um nó. Como esses elementos podem ser apenas elementos (apenas elementos geralmente têm um nome de classe), é tecnicamente um nodeListque possui apenas nós do elemento type e os designers poderiam criar uma coleção com nome diferente elementList, mas optaram por usar apenas um tipo da coleção, continha apenas elementos ou não.

EDIT: HTML5 define um HTMLCollectionque é uma lista de elementos HTML (não qualquer nó, apenas elementos). Várias propriedades ou métodos no HTML5 agora retornam um HTMLCollection. Embora seja muito semelhante na interface a nodeList, agora é feita uma distinção, pois contém apenas elementos, não qualquer tipo de nó.

A distinção entre a nodeListe um HTMLCollectiontem pouco impacto em como você usa uma (até onde eu sei), mas os designers do HTML5 agora fizeram essa distinção.

Por exemplo, a element.childrenpropriedade retorna um HTMLCollection ativo.

Nodeé para a implementação de uma estrutura de árvore, por isso seus métodos são para firstChild, lastChild, childNodes, etc. É mais de uma classe para uma estrutura de árvore genérica.

E então, alguns Nodeobjetos também são Elementobjetos. Elementherda de Node. Elementobjetos na verdade representam os objetos especificados no arquivo HTML pelas tags como <div id="content"></div>. A Elementclasse definem propriedades e métodos, tais como attributes, id, innerHTML, clientWidth, blur(), e focus().

Alguns Nodeobjetos são nós de texto e não são Elementobjetos. Cada Nodeobjeto possui uma nodeTypepropriedade que indica que tipo de nó é, para documentos HTML:

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

Podemos ver alguns exemplos no 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

A última linha acima mostra que Elementherda de Node. (essa linha não funcionará no IE devido a __proto__. Será necessário usar o Chrome, Firefox ou Safari).

A propósito, o documentobjeto é o topo da árvore de nós, e documenté um Documentobjeto e também Documentherda Node:

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

Aqui estão alguns documentos para as classes Node e Element:
https://developer.mozilla.org/en-US/docs/DOM/Node
https://developer.mozilla.org/en-US/docs/DOM/Element

Melhor fonte de informação para todos os seus problemas no DOM

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

"Os objetos que implementam a interface Document, DocumentFragment, DocumentType, Element, Text, ProcessingInstruction ou Comment (simplesmente chamados de nós) participam de uma árvore."

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

"Nós de elemento são simplesmente conhecidos como elementos."

Nó: http://www.w3schools.com/js/js_htmldom_nodes.asp

O objeto Node representa um único nó na árvore de documentos. Um nó pode ser um nó de elemento, um nó de atributo, um nó de texto ou qualquer outro tipo de nó explicado no capítulo Tipos de nós.

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

O objeto Element representa um elemento em um documento XML. Os elementos podem conter atributos, outros elementos ou texto. Se um elemento contiver texto, o texto será representado em um nó de texto.

duplicado :

• Qual é a diferença entre um elemento e um nó no XML?
• Por que nós e elementos são diferentes em XML? Qual foi a justificativa?

O nó é usado para representar tags em geral. Dividido em 3 tipos:

Nota do atributo: é o nó que possui atributos dentro dele. Exp:<p id=”123”></p>

Nó de texto: é o nó que entre a abertura e o fechamento tem conteúdo de texto contínuo. Exp:<p>Hello</p>

Nó do elemento: é o nó que possui dentro de outras tags. Exp:<p><b></b></p>

Cada nó pode ser do tipo simultaneamente, não necessariamente apenas de um único tipo.

Elemento é simplesmente um nó de elemento.