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

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

Если div является объектом Element, то что относительно div Node object?

Что такое объект Node?

Объект document, объект Element и текстовый объект также являются Node объектом?

В соответствии с книгой Дэвида Фланагана "Объект Document, его Элементные объекты и текстовые объекты - это все Node объекты".

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

Если да, я думаю, Node Класс и класс элемента связаны в прототипах дерева наследования.

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

Ответы

Ответ 1

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

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

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

Итак, a nodeList представляет собой просто массивный список nodes.

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

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

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

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

EDIT: HTML5 определяет HTMLCollection, который представляет собой список элементов HTML (а не node, только Elements). Ряд свойств или методов в HTML5 теперь возвращает HTMLCollection. Хотя он очень похож в интерфейсе с nodeList, теперь делается различие в том, что он содержит только элементы, а не любой тип node.

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

Например, свойство element.children возвращает живой HTMLCollection.

Ответ 2

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, которое указывает, какой тип node он есть, для документов 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 является вершиной дерева node, а 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

Ответ 3

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

Объект Node представляет собой одиночный Node в дереве документов. A Node может быть элементом node, атрибутом node, текстом node или любым другим типом Node, описанным в главе Node Types.

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

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

дубликат:

Ответ 4

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

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

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

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

"Элементные узлы просто известны как элементы."

Ответ 5

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

Примечание атрибута: node, внутри которого есть атрибуты. Exp: <p id="123"></p>

Текст Node: есть node, который между открытием и закрытием имеет текстовый контент. Exp: <p>Hello</p>

Элемент node: есть node, который внутри имеет другие теги. Exp: <p><b></b></p>

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

Элемент - это просто элемент node.