Różnica między obiektem Węzeł a obiektem Element?

301

Jestem całkowicie zdezorientowany między obiektem Węzeł a obiektem Element. document.getElementById()zwraca obiekt Element, podczas gdy document.getElementsByClassName() zwraca obiekt NodeList (Kolekcja elementów czy węzłów?)

Jeśli div jest obiektem Element, to co z obiektem Div Node?

Co to jest obiekt węzłowy?

Czy obiekt dokumentu, obiekt elementu i obiekt tekstowy są również obiektem węzła?

Zgodnie z książką Davida Flanagana „Obiekt dokumentu, jego obiekty elementowe i obiekty tekstowe są obiektami Node”.

Dlaczego więc obiekt może dziedziczyć właściwości / metody obiektu Element, a także obiektu Węzeł?

Jeśli tak, myślę, że klasa węzłów i klasa elementów są powiązane w prototypowym drzewie dziedziczenia.

 <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]
PK
źródło
13
Istnieje 12 rodzajów węzłów, z których jeden jest jednym z nich
Esailija,
czy wszystkie te 12 typów nie są również Obiektami? jak 1 = ELEMENT_NODE, 3 = TEXT_NODE, myślę, że oba są również przedmiotem elementu.
PK 2'12
5
Nie, nie są. Element jest tylko jednym typem węzła.
Esailija,

Odpowiedzi:

480

A nodeto ogólna nazwa dowolnego typu obiektu w hierarchii DOM. Może nodeto być jeden z wbudowanych elementów DOM, takich jak documentlub document.body, może to być znacznik HTML określony w kodzie HTML, takim jak <input>lub, <p>lub może to być węzeł tekstowy, który jest tworzony przez system do przechowywania bloku tekstu w innym elemencie . Krótko mówiąc, a nodejest dowolnym obiektem DOM.

Jest elementto jeden szczególny typ, nodeponieważ istnieje wiele innych typów węzłów (węzły tekstowe, węzły komentarzy, węzły dokumentów itp.).

DOM składa się z hierarchii węzłów, w której każdy węzeł może mieć element nadrzędny, listy węzłów podrzędnych oraz nextSibling i previousSibling. Ta struktura tworzy drzewiastą hierarchię. documentWęzeł będzie mieć swoją listę węzłów podrzędnych (The headwęzłów oraz bodywęzeł). bodyWęzeł będzie mieć swoją listę węzłów podrzędnych (górne elementy poziom twojej strony HTML) i tak dalej.

A nodeListto po prostu lista tablicowa nodes.

Element to określony typ węzła, który można bezpośrednio określić w kodzie HTML za pomocą znacznika HTML i może mieć właściwości takie jak a idlub a class. mogą mieć dzieci itp. Istnieją inne typy węzłów, takie jak węzły komentarzy, węzły tekstowe itp. o różnych właściwościach. Każdy węzeł ma właściwość, .nodeTypektóra informuje, jaki jest typ węzła. Tutaj możesz zobaczyć różne typy węzłów (schemat z MDN ):

wprowadź opis zdjęcia tutaj

Możesz zobaczyć, że ELEMENT_NODEjest to jeden szczególny typ węzła, w którym nodeTypewłaściwość ma wartość 1.

document.getElementById("test")Może więc zwrócić tylko jeden węzeł i na pewno jest to element (określony typ węzła). Z tego powodu zwraca element, a nie listę.

Ponieważ document.getElementsByClassName("para")może zwrócić więcej niż jeden obiekt, projektanci postanowili zwrócić a, nodeListponieważ jest to typ danych, który utworzyli dla listy więcej niż jednego węzła. Ponieważ mogą to być tylko elementy (tylko elementy zwykle mają nazwę klasy), technicznie jest to, nodeListże zawiera tylko węzły elementu typu, a projektanci mogli stworzyć kolekcję o innej nazwie elementList, ale zdecydowali się użyć tylko jednego typu kolekcji, czy miał w niej tylko elementy, czy nie.


EDYCJA: HTML5 definiuje HTMLCollectionktóra jest listą elementów HTML (nie żadnego węzła, tylko elementy). Szereg właściwości lub metod w HTML5 teraz zwraca an HTMLCollection. Chociaż jest bardzo podobny w interfejsie do a nodeList, teraz wprowadza się rozróżnienie, ponieważ zawiera tylko elementy, a nie dowolny typ węzła.

Rozróżnienie między a nodeListi a HTMLCollectionma niewielki wpływ na to, jak go używasz (o ile wiem), ale projektanci HTML5 wprowadzili to rozróżnienie.

Na przykład element.childrenwłaściwość zwraca aktywną kolekcję HTMLCollection.

jfriend00
źródło
2
Więc wszystkie elementy są węzłami, ale nie wszystkie węzły są elementami ... prawda? Właśnie zastanawiałem się, czy opisywać rzeczy jako węzły czy elementy w funkcjach JavaScript podczas iteracji przez pewne rzeczy.
Ryan Williams
6
Wiem, że wskrzeszam 7-letni post, ale chciałem tylko podziękować za to doskonałe i dokładne wyjaśnienie! Zupełnie sensowne.
AleksandrH
@AleksandrH - Cieszę się, że wciąż jest przydatny.
jfriend00
59

Nodejest za wdrożenie struktury drzewa, więc jej metody są za firstChild, lastChild, childNodes, itd. To jest bardziej dla klasy ogólnej strukturze drzewa.

Niektóre Nodeobiekty są również Elementobiektami. Elementdziedziczy po Node. Elementobiekty faktycznie reprezentują obiekty określone w pliku HTML przez znaczniki takie jak <div id="content"></div>. ElementKlasy określenia właściwości i metod, takich jak attributes, id, innerHTML, clientWidth, blur(), i focus().

Niektóre Nodeobiekty są węzłami tekstowymi i nie są Elementobiektami. Każdy Nodeobiekt ma nodeTypewłaściwość wskazującą, jaki jest typ węzła dla dokumentów HTML:

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

Możemy zobaczyć kilka przykładów w konsoli:

> 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

Ostatni wiersz powyżej pokazuje, że Elementdziedziczy Node. (ta linia nie będzie działać w IE z powodu __proto__. Będzie wymagała użycia Chrome, Firefox lub Safari).

Nawiasem mówiąc, documentobiekt jest szczytem drzewa węzłów i documentjest Documentobiektem, a także Documentdziedziczy Node:

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

Oto kilka dokumentów dla klas Node i Element:
https://developer.mozilla.org/en-US/docs/DOM/Node
https://developer.mozilla.org/en-US/docs/DOM/Element

niepolarność
źródło
Co <span data-a="1" >123</span>? ten zakres jest elementem, który ma własny węzeł. ale czy atrybut ma również własny węzeł?
Royi Namir,
Jedyne, co chcę wyjaśnić, to to, że Węzeł to interfejs, a nie klasa. z których dziedziczy wiele typów obiektów DOM API. Pozwala to traktować te typy podobnie; na przykład dziedziczenie tego samego zestawu metod lub testowanie w ten sam sposób. Znalazłem to w odnośniku mozilla, do którego się odnosisz. dzięki za cenną odpowiedź
Ahmed KhaShaba
8

Najlepsze źródło informacji dla wszystkich twoich nieszczęść DOM

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

„Obiekty implementujące interfejs Document, DocumentFragment, DocumentType, Element, Text, ProcessingInstruction lub Comment (zwane po prostu węzłami) uczestniczą w drzewie.”

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

„Węzły elementów są po prostu znane jako elementy”.

Matt Esch
źródło
7

Węzeł: http://www.w3schools.com/js/js_htmldom_nodes.asp

Obiekt Node reprezentuje pojedynczy węzeł w drzewie dokumentów. Węzeł może być węzłem elementu, węzłem atrybutu, węzłem tekstowym lub dowolnym innym typem węzła wyjaśnionym w rozdziale Typy węzłów.

Element: http://www.w3schools.com/js/js_htmldom_elements.asp

Obiekt Element reprezentuje element w dokumencie XML. Elementy mogą zawierać atrybuty, inne elementy lub tekst. Jeśli element zawiera tekst, tekst jest reprezentowany w węźle tekstowym.

duplikować :

Jerome Cance
źródło
4

Węzeł służy do ogólnego reprezentowania znaczników. Podzielony na 3 typy:

Atrybut Uwaga: jest węzłem, który ma w sobie atrybuty. Exp:<p id=”123”></p>

Węzeł tekstowy: jest węzłem, który między otwieraniem i zamykaniem ma zawartość tekstu ciągłego. Exp:<p>Hello</p>

Węzeł elementu: to węzeł, który wewnątrz jego ma inne znaczniki. Exp:<p><b></b></p>

Każdy węzeł może być typem jednocześnie, niekoniecznie tylko jednego typu.

Element jest po prostu węzłem elementu.

hecarim
źródło