Perbedaan antara objek Node dan objek Elemen?

302

Saya benar-benar bingung antara objek Node dan objek Elemen. document.getElementById()mengembalikan objek Elemen sementara document.getElementsByClassName() mengembalikan objek NodeList (Koleksi Elemen atau Node?)

Jika div adalah Obyek Elemen lalu bagaimana dengan objek div Node?

Apa itu Objek Node?

Apakah objek dokumen, objek Elemen dan Objek Teks juga merupakan objek Node?

Sesuai dengan buku David Flanagan 'Objek Dokumen, Objek Elemen dan objek teks semuanya adalah Objek Node'.

Jadi, mengapa sebuah objek dapat mewarisi properti / metode objek Elemen serta objek Node?

Jika ya, saya kira Kelas Node dan Kelas Elemen terkait dalam pohon prototip warisan.

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

13

Ada 12 jenis node, elemen menjadi salah satunya

— Esailija

Bukankah semua 12 tipe ini juga merupakan Elemen Objek? seperti 1 = ELEMENT_NODE, 3 = TEXT_NODE, saya pikir keduanya juga adalah objek elemen.

— PK

5

Tidak, mereka tidak. Elemen hanya satu jenis node.

— Esailija

481

A nodeadalah nama generik untuk semua jenis objek dalam hierarki DOM. A nodebisa menjadi salah satu elemen DOM bawaan seperti documentatau document.body, bisa berupa tag HTML yang ditentukan dalam HTML seperti <input>atau <p>atau bisa juga merupakan simpul teks yang dibuat oleh sistem untuk menahan blok teks di dalam elemen lain . Jadi, singkatnya, a nodeadalah objek DOM.

An elementadalah salah satu tipe spesifik nodekarena ada banyak tipe node lainnya (node teks, node komentar, node dokumen, dll ...).

DOM terdiri dari hierarki node di mana masing-masing node dapat memiliki orangtua, daftar node anak dan nextSibling danSegling sebelumnya. Struktur itu membentuk hierarki seperti pohon. The documentsimpul akan memiliki daftar node anak (yanghead simpul dan bodysimpul). The bodysimpul akan memiliki daftar node anak (elemen-elemen tingkat atas di halaman HTML Anda) dan sebagainya.

Jadi, a nodeList hanyalah sebuah daftar seperti array nodes.

Elemen adalah tipe node tertentu, yang dapat secara langsung ditentukan dalam HTML dengan tag HTML dan dapat memiliki properti seperti idatau class. dapat memiliki anak, dll ... Ada beberapa jenis simpul seperti simpul komentar, simpul teks, dll ... dengan karakteristik berbeda. Setiap node memiliki properti .nodeTypeyang melaporkan tipe node apa itu. Anda dapat melihat berbagai jenis node di sini (diagram dari MDN ):

masukkan deskripsi gambar di sini

Anda dapat melihat ELEMENT_NODEadalah salah satu jenis simpul tertentu di mana nodeTypeproperti memiliki nilai 1.

Jadi document.getElementById("test")hanya bisa mengembalikan satu simpul dan dijamin menjadi elemen (tipe simpul tertentu). Karena itu hanya mengembalikan elemen daripada daftar.

Karena document.getElementsByClassName("para")dapat mengembalikan lebih dari satu objek, perancang memilih untuk mengembalikan nodeListkarena itulah tipe data yang mereka buat untuk daftar lebih dari satu node. Karena ini hanya dapat berupa elemen (hanya elemen yang biasanya memiliki nama kelas), secara teknis ini adalah nodeListyang hanya memiliki node tipe elemen di dalamnya dan desainer dapat membuat koleksi dengan nama berbeda yang merupakan elementList, tetapi mereka memilih untuk menggunakan hanya satu jenis koleksi apakah itu hanya memiliki elemen di dalamnya atau tidak.

EDIT: HTML5 mendefinisikan HTMLCollectionyang merupakan daftar Elemen HTML (bukan sembarang simpul, hanya Elemen). Sejumlah properti atau metode dalam HTML5 sekarang mengembalikan sebuahHTMLCollection . Meskipun sangat mirip dalam antarmuka dengan nodeList, perbedaan sekarang dibuat karena hanya berisi Elemen, bukan semua jenis node.

Perbedaan antara a nodeList dan a HTMLCollectionmemiliki sedikit dampak pada bagaimana Anda menggunakan satu (sejauh yang saya tahu), tetapi desainer HTML5 kini telah membuat perbedaan itu.

Misalnya, element.childrenproperti mengembalikan HTMLCollection langsung.

— pacar00
sumber

2

Jadi semua elemen adalah node, tetapi tidak semua node adalah elemen ... kan? Saya hanya memikirkan apakah akan mendeskripsikan hal-hal sebagai simpul atau elemen dalam fungsi JavaScript ketika mengulangi hal-hal tertentu.

— Ryan Williams

6

Saya tahu saya menghidupkan kembali pos 7 tahun, tetapi saya hanya ingin mengucapkan terima kasih atas penjelasan yang luar biasa dan teliti ini! Masuk akal sepenuhnya.

— AleksandrH

@AlexandrH - Senang itu masih berguna.

— jfriend00

59

Nodeadalah untuk menerapkan struktur pohon, sehingga metodenya adalah untuk firstChild, lastChild, childNodes, dll Hal ini lebih dari sebuah kelas untuk struktur pohon generik.

Dan kemudian, beberapa Nodebenda juga Elementbenda. Elementmewarisi dari Node. Elementobjek sebenarnya mewakili objek sebagaimana ditentukan dalam file HTML oleh tag seperti <div id="content"></div>. The Elementkelas mendefinisikan properti dan metode seperti attributes, id, innerHTML, clientWidth, blur(), danfocus() .

Beberapa Nodeobjek adalah simpul teks dan bukan Elementobyek. Setiap Nodeobjek memiliki nodeTypeproperti yang menunjukkan jenis node apa itu, untuk dokumen HTML:

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

Kita dapat melihat beberapa contoh di konsol:

> 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

Baris terakhir di atas menunjukkan yang Elementmewarisi dari Node. (jalur itu tidak akan berfungsi di IE karena __proto__. Perlu menggunakan Chrome, Firefox, atau Safari).

By the way, documentobjek adalah puncak pohon simpul, dan documentmerupakan Documentobjek, dan Documentmewarisi Nodejuga:

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

Berikut adalah beberapa dokumen untuk kelas Node dan Elemen:
https://developer.mozilla.org/en-US/docs/DOM/Node
https://developer.mozilla.org/en-US/docs/DOM/Element

— nonopolaritas
sumber

Bagaimana dengan <span data-a="1" >123</span>? rentang ini adalah elemen yang memiliki simpul itu sendiri. tetapi apakah atribut itu juga memiliki simpulnya sendiri?

— Royi Namir

satu-satunya hal yang ingin saya perjelas adalah Node adalah antarmuka bukan kelas. dari mana sejumlah jenis objek DOM API mewarisi. Ini memungkinkan jenis-jenis itu diperlakukan sama; misalnya, mewarisi serangkaian metode yang sama, atau sedang diuji dengan cara yang sama. Saya menemukan ini di tautan mozilla yang Anda rujuk. terima kasih atas jawaban yang berharga

— Ahmed KhaShaba

8

Sumber informasi terbaik untuk semua kesengsaraan DOM Anda

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

"Objek yang mengimplementasikan antarmuka dokumen, DocumentFragment, DocumentType, Elemen, Teks, ProcessingInstruction, atau Komentar (hanya disebut node) berpartisipasi dalam pohon."

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

"Node elemen hanya dikenal sebagai elemen."

— Matt Esch
sumber

7

Node: http://www.w3schools.com/js/js_htmldom_nodes.asp

Objek Node mewakili node tunggal di pohon dokumen. Node dapat berupa simpul elemen, simpul atribut, simpul teks, atau jenis simpul lainnya yang dijelaskan dalam bab Jenis Node.

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

Objek Elemen mewakili elemen dalam dokumen XML. Elemen dapat berisi atribut, elemen lain, atau teks. Jika suatu elemen berisi teks, teks direpresentasikan dalam simpul teks.

duplikat:

— Jerome Cance
sumber

4

Node digunakan untuk mewakili tag secara umum. Dibagi menjadi 3 jenis:

Catatan Atribut: adalah simpul yang di dalamnya memiliki atribut. Exp:<p id=”123”></p>

Text Node: adalah simpul yang antara membuka dan menutupnya memiliki konten teks contian. Exp:<p>Hello</p>

Elemen Node: adalah simpul yang di dalamnya memiliki tag lain. Exp:<p><b></b></p>

Setiap node dapat berupa tipe secara bersamaan, tidak hanya dari satu tipe saja.

Elemen hanyalah sebuah simpul elemen.

— hecarim
sumber