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]
javascript
html
dom
PK
źródło
źródło
Odpowiedzi:
A
node
to ogólna nazwa dowolnego typu obiektu w hierarchii DOM. Możenode
to być jeden z wbudowanych elementów DOM, takich jakdocument
lubdocument.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, anode
jest dowolnym obiektem DOM.Jest
element
to jeden szczególny typ,node
ponieważ 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ę.
document
Węzeł będzie mieć swoją listę węzłów podrzędnych (Thehead
węzłów orazbody
węzeł).body
Węzeł będzie mieć swoją listę węzłów podrzędnych (górne elementy poziom twojej strony HTML) i tak dalej.A
nodeList
to po prostu lista tablicowanodes
.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
id
lub aclass
. 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ść,.nodeType
która informuje, jaki jest typ węzła. Tutaj możesz zobaczyć różne typy węzłów (schemat z MDN ):Możesz zobaczyć, że
ELEMENT_NODE
jest to jeden szczególny typ węzła, w którymnodeType
wł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,nodeList
ponieważ 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 nazwieelementList
, ale zdecydowali się użyć tylko jednego typu kolekcji, czy miał w niej tylko elementy, czy nie.EDYCJA: HTML5 definiuje
HTMLCollection
która jest listą elementów HTML (nie żadnego węzła, tylko elementy). Szereg właściwości lub metod w HTML5 teraz zwraca anHTMLCollection
. Chociaż jest bardzo podobny w interfejsie do anodeList
, teraz wprowadza się rozróżnienie, ponieważ zawiera tylko elementy, a nie dowolny typ węzła.Rozróżnienie między a
nodeList
i aHTMLCollection
ma niewielki wpływ na to, jak go używasz (o ile wiem), ale projektanci HTML5 wprowadzili to rozróżnienie.Na przykład
element.children
właściwość zwraca aktywną kolekcję HTMLCollection.źródło
Node
jest za wdrożenie struktury drzewa, więc jej metody są zafirstChild
,lastChild
,childNodes
, itd. To jest bardziej dla klasy ogólnej strukturze drzewa.Niektóre
Node
obiekty są równieżElement
obiektami.Element
dziedziczy poNode
.Element
obiekty faktycznie reprezentują obiekty określone w pliku HTML przez znaczniki takie jak<div id="content"></div>
.Element
Klasy określenia właściwości i metod, takich jakattributes
,id
,innerHTML
,clientWidth
,blur()
, ifocus()
.Niektóre
Node
obiekty są węzłami tekstowymi i nie sąElement
obiektami. KażdyNode
obiekt manodeType
właściwość wskazującą, jaki jest typ węzła dla dokumentów HTML:Możemy zobaczyć kilka przykładów w konsoli:
Ostatni wiersz powyżej pokazuje, że
Element
dziedziczyNode
. (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,
document
obiekt jest szczytem drzewa węzłów idocument
jestDocument
obiektem, a takżeDocument
dziedziczyNode
: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
źródło
<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ł?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”.
źródło
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ć :
źródło
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.
źródło