Разница между объектом 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]
6 ответов
node является общим именем для любого типа объекта в иерархии DOM. node может быть одним из встроенных элементов DOM, таких как document или же document.body, это может быть тег HTML, указанный в HTML, такой как <input> или же <p> или это может быть текстовый узел, созданный системой для хранения блока текста внутри другого элемента. Итак, в двух словах, node это любой объект DOM.
element это один конкретный тип node поскольку существует много других типов узлов (текстовые узлы, узлы комментариев, узлы документов и т. д.).
DOM состоит из иерархии узлов, где каждый узел может иметь родителя, список дочерних узлов, а также nextSibling и previousSibling. Эта структура образует древовидную иерархию. document узел будет иметь свой список дочерних узлов (head узел и body узел). body узел будет иметь свой список дочерних узлов (элементов верхнего уровня на вашей HTML-странице) и так далее.
Итак, nodeList это просто массив, как список nodes,
Элемент - это определенный тип узла, который может быть непосредственно указан в HTML с помощью тега HTML и может иметь свойства, такие как id или class, может иметь детей и т. д. Существуют другие типы узлов, такие как узлы комментариев, текстовые узлы и т. д. с другими характеристиками. У каждого узла есть свойство .nodeType который сообщает, какой это тип узла. Здесь вы можете увидеть различные типы узлов (диаграмма из MDN):
Вы можете увидеть ELEMENT_NODE это один конкретный тип узла, где nodeType свойство имеет значение 1,
Так document.getElementById("test") может вернуть только один узел, и он гарантированно будет элементом (конкретным типом узла). Из-за этого он просто возвращает элемент, а не список.
поскольку document.getElementsByClassName("para") может вернуть более одного объекта, дизайнеры решили вернуть nodeList потому что это тип данных, которые они создали для списка из более чем одного узла. Поскольку это могут быть только элементы (только элементы обычно имеют имя класса), технически это nodeList который имеет только узлы типа элемента в нем, и дизайнеры могли бы сделать коллекцию с другим именем, которая была elementList, но они решили использовать только один тип коллекции, независимо от того, были ли в ней только элементы или нет.
РЕДАКТИРОВАТЬ: HTML5 определяет HTMLCollection который представляет собой список элементов HTML (не любой узел, только элементы). Ряд свойств или методов в HTML5 теперь возвращают HTMLCollection, Хотя это очень похоже на интерфейс nodeListтеперь делается различие в том, что он содержит только элементы, а не какой-либо тип узла.
Различие между nodeList и HTMLCollection имеет мало влияния на то, как вы его используете (насколько я могу судить), но разработчики HTML5 уже сделали это различие.
Например, element.children свойство возвращает живой HTMLCollection.
Node для реализации древовидной структуры, поэтому его методы для firstChild, lastChild, childNodesи т. д. Это скорее класс для общей древовидной структуры.
А потом некоторые Node объекты также Element объекты. Element наследуется от Node, Element objects фактически представляет объекты, указанные в файле 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
"Объекты, реализующие интерфейс Document, DocumentFragment, DocumentType, Element, Text, ProcessingInstruction или Comment (просто называемые узлами), участвуют в дереве".
"Узлы элементов просто известны как элементы".
Узел: http://www.w3schools.com/js/js_htmldom_nodes.asp
Объект Node представляет один узел в дереве документа. Узлом может быть узел элемента, узел атрибута, текстовый узел или любой другой из типов узлов, описанных в главе "Типы узлов".
Элемент: http://www.w3schools.com/js/js_htmldom_elements.asp
Объект Element представляет элемент в документе XML. Элементы могут содержать атрибуты, другие элементы или текст. Если элемент содержит текст, текст представляется в текстовом узле.
дубликат:
Узел используется для представления тегов в целом. Делится на 3 типа:
Атрибут Примечание: это узел, который внутри имеет свои атрибуты. Опыт: <p id=”123”></p>
Текстовый узел: это узел, который между открытием и закрытием имеет контекстное текстовое содержимое. Опыт: <p>Hello</p>
Элемент Node: это узел, внутри которого есть другие теги. Опыт: <p><b></b></p>
Каждый узел может быть типами одновременно, не обязательно только одного типа.
Элемент - это просто элементный узел.
Документ DOM - это иерархический набор узлов. У каждого узла может быть родитель и / или потомок.
Понять разницу между узлом DOM и элементом легко, если вы понимаете, что такое узел.
У узлов есть типы, одним из которых является тип элемента. Элемент представлен тегом в HTML-документе.