Різниця між об'єктом Node та об'єктом Element?


301

Я повністю заплутаний між об'єктом Node та об'єктом Element. document.getElementById()повертає об'єкт Element, а document.getElementsByClassName() повертає об'єкт NodeList (колекція елементів чи вузлів?)

Якщо div є об’єктом елемента, то що робити з об’єктом div Node?

Що таке об’єкт вузла?

Об'єкт документа, об'єкт Елемент та текстовий об’єкт також є об'єктом Вузол?

Згідно з книгою Девіда Фланагана "Об'єкт документа, його об'єкти стихії та текстові об'єкти - всі об'єкти Вузла".

Отже, чому об’єкт може успадковувати властивості / методи об'єкта Element, а також об'єкт 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]

13
Існує 12 типів вузлів, один з елементів
Esailija

чи не всі ці 12 типів також є об'єктом елемента? як 1 = ELEMENT_NODE, 3 = TEXT_NODE, я думаю, що обидва також є об'єктом Element.
ПК

5
Ні, вони ні. Елемент - це лише один тип вузла.
Есаїлія

Відповіді:


480

A node- це загальна назва для будь-якого типу об'єктів в ієрархії DOM. A nodeможе бути одним із вбудованих елементів DOM, таких як, documentабо document.body, це може бути тег HTML, вказаний у HTML, наприклад, <input>або, <p>або це може бути текстовий вузол, який створюється системою, щоб утримувати блок тексту всередині іншого елемента . Отже, у двох словах, a node- це будь-який об’єкт DOM.

Це elementодин конкретний тип, nodeоскільки існує багато інших типів вузлів (текстові вузли, вузли коментарів, вузли документів тощо).

DOM складається з ієрархії вузлів, де кожен вузол може мати батьківську, списку дочірніх вузлів та nextSibling та попередньогоSibling. Ця структура утворює деревоподібну ієрархію. documentВузол матиме свій список дочірніх вузлів ( headвузли та bodyвузли). bodyВузол матиме свій список дочірніх вузлів (елементи верхнього рівня у вашій HTML сторінці) і так далі.

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

Елемент - це певний тип вузла, той, який можна безпосередньо вказати в HTML за допомогою тегу HTML і може мати властивості, такі як a idабо a class. можуть мати дітей тощо ... Є й інші типи вузлів, такі як вузли коментарів, текстові вузли тощо ... з різними характеристиками. Кожен вузол має властивість, .nodeTypeяка повідомляє про тип вузла. Тут ви можете побачити різні типи вузлів (схема від MDN ):

введіть тут опис зображення

Ви можете бачити, що ELEMENT_NODEце один конкретний тип вузла, де nodeTypeвластивість має значення 1.

Таким чином, document.getElementById("test")можна повернути лише один вузол, і він гарантовано буде елементом (певний тип вузла). Через це він просто повертає елемент, а не список.

Оскільки document.getElementsByClassName("para")може повернути більше одного об'єкта, дизайнери вирішили повернути a, nodeListоскільки це тип даних, який вони створили для списку більш ніж одного вузла. Оскільки це можуть бути лише елементи (лише елементи, як правило, мають назву класу), технічно це nodeListлише те , що в ньому є лише вузли типу елемента, і дизайнери могли скласти колекцію з іншим іменем, яка була elementList, але вони вирішили використовувати лише один тип колекції, в ній були лише елементи чи ні.


EDIT: HTML5 визначає HTMLCollectionперелік елементів HTML (не будь-який вузол, лише Elements). Кілька властивостей або методів у HTML5 тепер повертають HTMLCollection. Незважаючи на те, що він дуже схожий по інтерфейсу з a nodeList, тепер робиться відмінність у тому, що він містить лише елементи, а не будь-який тип вузла.

Відмінність між a nodeListі an HTMLCollectionмало впливає на те, як ви використовуєте його (наскільки я можу сказати), але дизайнери HTML5 тепер зробили це розмежування.

Наприклад, element.childrenвластивість повертає живий HTMLCollection.


2
Отже всі елементи - це вузли, але не всі вузли - це елементи ... правда? Я просто розмірковував, чи описати речі як вузли чи елементи у функціях JavaScript під час повторення певних речей.
Райан Вільямс

6
Я знаю, що відроджую 7-річну посаду, але я просто хотів сказати спасибі за це відмінне та ретельне пояснення! Здійснив повний сенс.
ОлександрХ

@AleksandrH - Радий, що це все ще корисно.
jfriend00

59

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


Про що <span data-a="1" >123</span>? цей проміжок є елементом, який має власний вузол. але чи має атрибут також власний вузол?
Рой Намір

Єдине, що я хочу уточнити, це те, що Node - це інтерфейс, а не клас. від якого успадковується ряд типів об’єктів API DOM. Це дозволяє аналогічно поводитися з тими видами; наприклад, успадкування одного і того ж набору методів або тестування аналогічним чином. Я знайшов це у посиланні Мозілла, на яке ви посилаєтесь. дякую за дорогоцінну відповідь
Ахмед Хашаба

8

Найкраще джерело інформації для всіх ваших проблем DOM

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

"Об'єкти, що реалізують Document, DocumentFragment, DocumentType, Element, Text, ProcessingInstruction або Comment interface (просто називаються вузлами), беруть участь у дереві."

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

"Вузоли елементів просто відомі як елементи."


7

Вузол: http://www.w3schools.com/js/js_htmldom_nodes.asp

Об'єкт Node являє собою один вузол у дереві документа. Вузол може бути вузлом елемента, вузлом атрибутів, текстовим вузлом або будь-яким іншим типом вузлів, поясненим у розділі Типи вузлів.

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

Об'єкт Element являє собою елемент у документі XML. Елементи можуть містити атрибути, інші елементи або текст. Якщо елемент містить текст, текст представляється у текстовому вузлі.

дублікат:


4

Вузол використовується для представлення тегів загалом. Поділяється на 3 типи:

Примітка атрибутів: це вузол, який всередині його має атрибути. Досвід:<p id=”123”></p>

Текстовий вузол: це вузол, який між відкриттям і закриттям має контентний текстовий вміст. Досвід:<p>Hello</p>

Element Node: це вузол, який всередині його має інші теги. Досвід:<p><b></b></p>

Кожен вузол може бути типів одночасно, не обов'язково лише одного типу.

Елемент - це просто елемент елемента.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.