Разница между объектом Node и объектом Element?
я полностью запутался между объектом узла и объектом элемента.
document.getElementById() возвращает объект элемента в то время как document.getElementsByClassName()
возвращает объект NodeList (коллекцию элементов или узлов?)
Если div является объектом элемента, то как насчет объекта узла div?
что такое объект узла?
являются ли объект документа, объект элемента и текстовый объект также объектом узла?
согласно книге Дэвида Фланагана " объект документа, его объекты элементов и текстовые объекты все объекты узла".
Так как объект может наследовать свойства/методы объекта элемента, а также элемента узла?
Если да, я предполагаю, что класс узла и класс элемента связаны в прототипном дереве наследования.
<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]
5 ответов
A node - Это общее имя для любого типа объекта в иерархии DOM. А node может быть одним из встроенных элементов DOM, такие как document или document.body, это может быть HTML-тег, указанный в HTML, например <input> или <p> или это может быть текстовый узел, созданный системой для хранения блока текста внутри другого элемента. Итак, в двух словах, a node - любой объект DOM.
An element является одним из конкретных типов node как есть много других типов узлы (текстовые узлы, Узлы комментариев, узлы документов и т. д...).
DOM состоит из иерархии узлов, где каждый узел может иметь родителя, список дочерних узлов и nextSibling и previousSibling. Эта структура образует древовидную иерархию. The document узел будет иметь свой список дочерних узлов (head узел и body узел). The body узел будет иметь свой список дочерних узлов (элементы верхнего уровня на вашей HTML-странице) и так далее.
Итак, a nodeList - это просто массив, как список nodes.
элемент-это определенный тип узла, который может быть непосредственно указан в HTML с тегом HTML и может иметь такие свойства, как id или class. могут иметь детей, и т. д... Существуют и другие типы узлов, такие как узлы комментариев, текстовые узлы и т. д... с различными характеристиками. Каждый узел имеет свойство .nodeType который сообщает, какой тип узла это. Здесь вы можете увидеть различные типы узлов (диаграмма из MDN):
вы можете увидеть ELEMENT_NODE является одним конкретным типом узла, где nodeType свойство имеет значение 1.
так document.getElementById("test") может возвращать только один узел, и он гарантированно будет элементом (определенный тип узла). Потому что он просто возвращает элемент, а не список.
С document.getElementsByClassName("para") может вернуть более одного объекта, дизайнеры решили вернуть nodeList потому что это тип данных, который они создали для списка из нескольких узлов. Поскольку это могут быть только элементы (только элементы обычно имеют имя класса), технически это nodeList в нем есть только узлы типа element, и дизайнеры могли бы сделать коллекцию с другим именем, которая была elementList, но они решили использовать только один тип коллекции, независимо от того, были ли в ней только элементы или нет.
EDIT: в HTML5 определяет HTMLCollection, который представляет собой список HTML Элементы (не любой узел, только элементы). Ряд свойств или методов в HTML5 теперь возвращают HTMLCollection. Хотя он очень похож в интерфейсе на nodeList, различие теперь сделано в том, что он содержит только элементы, а не какой-либо тип узла.
различие между nodeList и HTMLCollection мало влияет на то, как вы его используете (насколько я могу судить), но дизайнеры HTML5 теперь сделали это различие.
например,element.children собственность возвращает live HTMLCollection.
Node предназначен для реализации древовидной структуры, поэтому его методы предназначены для firstChild, lastChild, childNodes, etc. Это скорее класс для общей древовидной структуры.
а потом Node объекты Element объекты. Element наследует от Node. Element объекты фактически представляют объекты, указанные в HTML-файле тегами, такими как <div id="content"></div>. The Element класс определяет свойства и методы, такие как attributes, id, innerHTML, clientWidth, blur() и focus().
некоторые Node объекты являются текстовыми узлами, а не Element объекты. Каждый и Document наследует от Node а также:
> Document.prototype.__proto__ === Node.prototype
true
вот некоторые документы для узла и элемента classes:
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
"в дереве участвуют объекты, реализующие документ, DocumentFragment, DocumentType, Element, Text, ProcessingInstruction или Comment interface (просто называемые узлами)."
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
объект элемента представляет элемент в XML-документе. Элементы могут содержать атрибуты, другие элементы или текст. Если элемент содержит текст, то текст представлен в текстовом узле.
дублирую :
узел используется для представления тегов в целом. Делятся на 3 типа:
атрибут Примечание: это узел, который внутри имеет атрибуты.
Exp:<p id=”123”></p>
Text Node: является узлом, который между Открытием и закрытием его имеет текстовое содержимое contian.
Exp:<p>Hello</p>
узел элемента: узел, который внутри его имеет другие теги.
Exp:<p><b></b></p>
каждый узел может быть одновременно, не обязательно только одного типа.
элемент просто узел элемента.