Разница между объектом Node и объектом Element?

Я полностью запутался между объектом Node и объектом Element. document.getElementById()возвращает объект Element, в то время как document.getElementsByClassName() возвращает объект NodeList (коллекция элементов или узлов?)

Если div - это объектный элемент, то как насчет div-объекта Node?

Что такое объект узла?

Являются ли объект документа, объект элемента и текстовый объект также объектом Node?

Согласно книге Дэвида Фланагана «Объект документа, его элементы и текстовые объекты являются объектами узла».

Так почему же объект может наследовать свойства / методы объекта Element, а также объекта Node?

Если да, я думаю, что Node Class и Element Class связаны в прототипе дерева наследования.

 <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- это общее имя для любого типа объекта в иерархии DOM. A nodeможет быть одним из встроенных элементов DOM, таких как documentили document.body, это может быть тег HTML, указанный в HTML, такой как <input>или, <p>или это может быть текстовый узел, который создается системой для хранения блока текста внутри другого элемента. , Итак, в двух словах, это nodeлюбой объект DOM.

Это elementодин конкретный тип, nodeпоскольку существует много других типов узлов (текстовые узлы, узлы комментариев, узлы документов и т. Д.).

DOM состоит из иерархии узлов, где каждый узел может иметь родителя, список дочерних узлов, а также nextSibling и previousSibling. Эта структура образует древовидную иерархию. У documentузла будет свой список дочерних узлов ( headузел и bodyузел). У bodyузла будет свой список дочерних узлов (элементов верхнего уровня на вашей HTML-странице) и так далее.

Итак, a nodeList- это просто список, похожий на массив nodes.

Элемент - это определенный тип узла, который может быть непосредственно указан в HTML с помощью тега HTML и может иметь свойства, такие как idили class. может иметь детей и т. д. Существуют другие типы узлов, такие как узлы комментариев, текстовые узлы и т. д. с другими характеристиками. У каждого узла есть свойство, .nodeTypeкоторое сообщает, какой это тип узла. Вы можете увидеть различные типы узлов здесь (диаграмма из MDN ):

Вы можете видеть, что ELEMENT_NODEэто один конкретный тип узла, где nodeTypeсвойство имеет значение 1.

Таким образом, document.getElementById("test")можно вернуть только один узел, и он гарантированно будет элементом (узлом определенного типа). Из-за этого он просто возвращает элемент, а не список.

Поскольку document.getElementsByClassName("para")может возвращать более одного объекта, дизайнеры решили вернуть a, nodeListпотому что это тип данных, который они создали для списка из более чем одного узла. Так как это могут быть только элементы (только элементы обычно имеют имя класса), технически он nodeListимеет только узлы типа элемента в нем, и дизайнеры могли создать коллекцию с другим именем, которая была elementList, но они решили использовать только один тип коллекции, имеет ли она только элементы или нет.

РЕДАКТИРОВАТЬ: HTML5 определяет, HTMLCollectionкоторый является списком элементов HTML (не любой узел, только элементы). Ряд свойств или методов в HTML5 теперь возвращают HTMLCollection. Хотя он очень похож по интерфейсу на a nodeList, теперь делается различие в том, что он содержит только элементы, а не какой-либо тип узла.

Различие между a nodeListи an HTMLCollectionмало влияет на то, как вы его используете (насколько я могу судить), но разработчики HTML5 уже сделали это различие.

Например, element.childrenсвойство возвращает активную коллекцию HTMLCollection.

Nodeдля реализации древовидной структуры, так что его методы для firstChild, lastChild, childNodesи т.д. Это более одного класса для общей структуры дерева.

И затем, некоторые Nodeобъекты также являются Elementобъектами. Elementнаследует от Node. ElementОбъекты фактически представляют объекты, указанные в файле HTML с помощью тегов, таких как <div id="content"></div>. ElementКласса определяют свойства и методы , такие как attributes, id, innerHTML, clientWidth, blur(), и focus().

Некоторые Nodeобъекты являются текстовыми узлами и не являются Elementобъектами. У каждого Nodeобъекта есть nodeTypeсвойство, указывающее тип узла для документов HTML:

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

Мы можем увидеть некоторые примеры в консоли:

> 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

Последняя строка выше показывает, что Elementнаследуется от Node. (эта строка не будет работать в IE из-за __proto__. Нужно будет использовать Chrome, Firefox или Safari).

Кстати, documentобъект является вершиной дерева узлов и documentявляется Documentобъектом, а также Documentнаследуется от Node:

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

Вот несколько документов для классов Node и Element:
https://developer.mozilla.org/en-US/docs/DOM/Node
https://developer.mozilla.org/en-US/docs/DOM/Element

Лучший источник информации для всех ваших проблем DOM

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

«Объекты, реализующие интерфейс Document, DocumentFragment, DocumentType, Element, Text, ProcessingInstruction или Comment (просто называемые узлами), участвуют в дереве».

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

«Узлы элементов просто известны как элементы».

Узел: http://www.w3schools.com/js/js_htmldom_nodes.asp

Объект Node представляет отдельный узел в дереве документа. Узлом может быть узел элемента, узел атрибута, текстовый узел или любой другой тип узла, описанный в главе «Типы узлов».

Элемент: http://www.w3schools.com/js/js_htmldom_elements.asp

Объект Element представляет элемент в документе XML. Элементы могут содержать атрибуты, другие элементы или текст. Если элемент содержит текст, текст представляется в текстовом узле.

дубликат:

• В чем разница между элементом и узлом в XML?
• Почему узлы и элементы отличаются в XML? Каково было обоснование?

Узел используется для представления тегов в целом. Делится на 3 типа:

Атрибут Примечание: это узел, который внутри имеет свои атрибуты. Опыт:<p id=”123”></p>

Текстовый узел: это узел, который между открытием и закрытием имеет контекстное текстовое содержимое. Опыт:<p>Hello</p>

Элемент Node: это узел, внутри которого есть другие теги. Опыт:<p><b></b></p>

Каждый узел может быть типами одновременно, не обязательно только одного типа.

Элемент - это просто элементный узел.