Düğüm nesnesi ile Element nesnesi arasındaki fark nedir?

Düğüm nesnesi ve Element nesnesi arasında tamamen kafam karıştı. NodeList nesnesini document.getElementById()döndürürken Element nesnesini document.getElementsByClassName()döndürür (Elements veya Nodes Koleksiyonu?)

Eğer div bir Element Object ise div Node nesnesi ne olacak?

Düğüm Nesnesi nedir?

Belge nesnesi, Öğe nesnesi ve Metin Nesnesi de Düğüm nesnesi mi?

David Flanagan'ın 'Belge nesnesi, Öğe Nesneleri ve metin nesnelerinin tümü Düğüm nesneleridir' kitabına göre.

Peki nasıl bir nesne Node nesnesinin yanı sıra Element nesnesinin özelliklerini / yöntemlerini miras alabilir?

Evet ise, sanırım Düğüm Sınıfı ve Element Sınıfı prototip kalıtım ağacında ilişkilidir.

 <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]

A node, DOM hiyerarşisindeki herhangi bir nesne türü için genel addır. A node, documentveya gibi yerleşik DOM öğelerinden biri olabilir veya document.bodyHTML'de belirtilen <input>veya gibi bir HTML etiketi <p>olabilir veya sistem tarafından başka bir öğenin içinde bir metin bloğunu tutmak için oluşturulan bir metin düğümü olabilir . Kısacası, a nodeherhangi bir DOM nesnesidir.

An element, nodediğer birçok düğüm türü (metin düğümleri, yorum düğümleri, belge düğümleri, vb.) Olduğundan belirli bir türdür .

DOM, her düğümün bir üst öğeye, alt düğümlerin listesine ve nextSibling ve previousSibling'e sahip olabileceği bir düğüm hiyerarşisinden oluşur. Bu yapı ağaç benzeri bir hiyerarşi oluşturur. documentDüğüm çocuk düğümler (kendi listesini olurdu headdüğüm ve bodydüğüm). bodyDüğüm benzeri çocuk düğümler (HTML sayfanıza üst düzey elemanları) ve onun listesi var olacaktır.

Yani, a nodeListsadece dizi benzeri bir listedir nodes.

Öğe, HTML'de doğrudan bir HTML etiketi ile belirtilebilen ve ida veya a gibi özelliklere sahip olabilen belirli bir düğüm türüdür class. çocuk, vb. olabilir ... Yorum düğümleri, metin düğümleri, vb. gibi farklı tipte düğümler vardır. Her düğümün, .nodeTypene tür bir düğüm olduğunu bildiren bir özelliği vardır. Burada çeşitli düğüm türlerini görebilirsiniz ( MDN'den diyagram ):

ELEMENT_NODEBurada, nodeTypeözelliğin değeri olan belirli bir düğüm türü görebilirsiniz 1.

Bu yüzden document.getElementById("test")sadece bir düğümü döndürebilir ve bir öğe (belirli bir düğüm türü) olması garanti edilir. Bu nedenle, bir liste yerine öğeyi döndürür.

Yana document.getElementsByClassName("para")birden fazla nesneyi döndürebilir tasarımcılar dönmek seçtik nodeListonlar birden fazla düğüm listesi için oluşturulan veri türü olduğu için. Bunlar yalnızca öğeler olabileceğinden (yalnızca öğelerin tipik olarak bir sınıf adı vardır), teknik olaraknodeList yalnızca içinde tür öğelerinin düğümleri olan ve tasarımcılar elementList, içinde sadece unsurları olsun ya da olmasın koleksiyon.

DÜZENLEME: HTML5, HTMLCollectionHTML Öğelerinin bir listesini tanımlar (herhangi bir düğüm değil, yalnızca Öğeler). HTML5'teki bir dizi özellik veya yöntem artık birHTMLCollection . A arayüzünde çok benzer olmakla birlikte nodeList, artık herhangi bir düğüm türünü değil, sadece Öğeleri içerdiği için bir ayrım yapılmaktadır.

A arasındaki ayrım nodeList veHTMLCollection , birini nasıl kullanabileceğiniz üzerinde çok az etkisi vardır (anlayabildiğim kadarıyla), ancak HTML5 tasarımcıları şimdi bu ayrımı yaptı.

Örneğin, element.childrenözellik canlı bir HTMLCollection döndürür.

NodeBir ağaç yapısı uygulamak için, bu yüzden onun yöntemleri içindir firstChild, lastChild, childNodes, vb jenerik ağaç yapısı için daha bir sınıfın olduğunu.

Ve sonra, bazı Nodenesneler de Elementnesnedir. Elementmiras Node. Elementnesneler aslında HTML dosyasında gibi etiketlerle belirtilen nesneleri temsil eder <div id="content"></div>. ElementSınıf tanımlayan özellikleri ve yöntemleri arasında attributes, id, innerHTML, clientWidth, blur(), vefocus() .

Bazı Nodenesneler metin düğümleridir ve Elementnesne değildirler . Her Nodenesnenin, nodeTypeHTML belgeleri için ne tür bir düğüm olduğunu gösteren bir özelliği vardır:

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

Konsolda bazı örnekler görebiliriz:

> 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

Bu gösterileri Yukarıdaki son satırı Elementdevralır gelen Node. (bu satır nedeniyle IE'de çalışmaz __proto__. Chrome, Firefox veya Safari kullanmanız gerekir).

Bu arada, documentnesne düğüm ağacının en üstünde ve documentbir Documentnesnedir ve aynı zamanda da Documentmiras alır Node:

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

Düğüm ve Element sınıfları için bazı dokümanlar:
https://developer.mozilla.org/en-US/docs/DOM/Node
https://developer.mozilla.org/en-US/docs/DOM/Element

Tüm DOM sorunlarınız için en iyi bilgi kaynağı

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

"Belge, DocumentFragment, DocumentType, Öğe, Metin, ProcessingInstruction veya Yorum arabirimini (basitçe düğüm olarak adlandırılır) uygulayan nesneler bir ağaca katılır."

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

"Eleman düğümleri basitçe elemanlar olarak bilinir."

Düğüm: http://www.w3schools.com/js/js_htmldom_nodes.asp

Düğüm nesnesi, belge ağacındaki tek bir düğümü temsil eder. Düğüm, bir öğe düğümü, bir öznitelik düğümü, bir metin düğümü ya da Düğüm Türleri bölümünde açıklanan düğüm türlerinden herhangi biri olabilir.

Öğe: http://www.w3schools.com/js/js_htmldom_elements.asp

Element nesnesi, XML belgesindeki bir öğeyi temsil eder. Öğeler nitelikler, diğer öğeler veya metin içerebilir. Bir öğe metin içeriyorsa, metin bir metin düğümünde temsil edilir.

çiftleme :

• XML'deki bir öğe ve bir düğüm arasındaki fark nedir?
• XML'de Düğümler ve Öğeler neden farklı? Gerekçe neydi?

Düğüm genel olarak etiketleri temsil etmek için kullanılır. 3 türe ayrılmıştır:

Öznitelik Not: İçinde öznitelikleri olan düğümdür. Tecrübe:<p id=”123”></p>

Metin Düğümü: açılış ve kapanış arasında contian metin içeriğine sahip düğümdür. Tecrübe:<p>Hello</p>

Öğe Düğümü: içinde başka etiketler bulunan düğümdür. Tecrübe:<p><b></b></p>

Her bir düğüm aynı anda tip olabilir, sadece tek bir tip olmak zorunda değildir.

Öğe basitçe bir öğe düğümüdür.