ความแตกต่างระหว่างวัตถุโหนดและวัตถุองค์ประกอบ?

ฉันสับสนอย่างสิ้นเชิงระหว่างวัตถุโหนดและวัตถุองค์ประกอบ document.getElementById()ส่งคืนวัตถุองค์ประกอบในขณะที่document.getElementsByClassName() ส่งคืนวัตถุ NodeList (ชุดขององค์ประกอบหรือโหนด?)

ถ้า div เป็นวัตถุองค์ประกอบแล้วสิ่งที่เกี่ยวกับวัตถุโหนด Node?

วัตถุโหนดคืออะไร

วัตถุเอกสารวัตถุองค์ประกอบและวัตถุข้อความเป็นวัตถุโหนดหรือไม่

ตามหนังสือของ David Flanagan 'วัตถุเอกสารวัตถุองค์ประกอบและวัตถุข้อความเป็นวัตถุโหนดทั้งหมด'

เหตุใดวัตถุจึงสามารถสืบทอดคุณสมบัติ / วิธีการของวัตถุองค์ประกอบเช่นเดียวกับวัตถุโหนดได้

ถ้าใช่ฉันเดาว่าคลาสโหนดและคลาสอิลิเมนต์เกี่ยวข้องกับต้นไม้ต้นแบบแห่งการสืบทอด

 <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 nodeอาจจะเป็นหนึ่งในตัวองค์ประกอบ DOM เช่นdocumentหรือdocument.bodyมันอาจจะเป็นแท็กที่ระบุไว้ใน HTML เช่น<input>หรือ<p>หรือมันอาจจะเป็นโหนดข้อความที่ถูกสร้างขึ้นโดยระบบจะถือบล็อกข้อความภายในองค์ประกอบอื่น . โดยสรุปแล้ว a nodeคือวัตถุ DOM ใด ๆ

An elementเป็นประเภทหนึ่งที่เฉพาะเจาะจงnodeเนื่องจากมีโหนดประเภทอื่น ๆ อีกมากมาย (โหนดข้อความโหนดความคิดเห็นโหนดเอกสาร ฯลฯ ... )

DOM ประกอบด้วยลำดับชั้นของโหนดที่แต่ละโหนดสามารถมีพาเรนต์รายการของโหนดลูกและ nextSibling และ nextSibling ถัดไป โครงสร้างนั้นเป็นลำดับชั้นที่เหมือนต้นไม้ documentโหนดจะมีรายชื่อของโหนดลูก (คนheadโหนดและbodyโหนด) bodyโหนดจะมีรายชื่อของโหนดลูก (องค์ประกอบระดับบนสุดในหน้าเว็บ HTML ของคุณ) และอื่น ๆ

ดังนั้นเป็นเพียงรายการอาร์เรย์เหมือนของnodeListnodes

องค์ประกอบที่เป็นชนิดที่เฉพาะเจาะจงของโหนดหนึ่งที่สามารถระบุได้โดยตรงในรูปแบบ HTML ที่มีแท็กและสามารถมีคุณสมบัติเหมือนหรือid classสามารถมีลูก ฯลฯ มีโหนดชนิดอื่นเช่นโหนดข้อคิดเห็นโหนดข้อความ ฯลฯ มีคุณสมบัติแตกต่างกัน แต่ละโหนดมีคุณสมบัติ.nodeTypeที่รายงานประเภทของโหนด คุณสามารถดูประเภทต่าง ๆ ของโหนดที่นี่ (แผนภาพจากMDN ):

คุณสามารถเห็นELEMENT_NODEเป็นหนึ่งในประเภทโดยเฉพาะอย่างยิ่งของโหนดที่ทรัพย์สินมีค่าnodeType1

ดังนั้นdocument.getElementById("test")สามารถส่งคืนได้เพียงหนึ่งโหนดเท่านั้นและรับประกันว่าจะเป็นองค์ประกอบ (ประเภทของโหนดเฉพาะ) เพราะการที่มันเพิ่งส่งคืนองค์ประกอบมากกว่ารายการ

เนื่องจากdocument.getElementsByClassName("para")สามารถส่งคืนวัตถุได้มากกว่าหนึ่งวัตถุนักออกแบบจึงเลือกที่จะคืนค่าnodeListเนื่องจากเป็นชนิดข้อมูลที่สร้างขึ้นสำหรับรายการของโหนดมากกว่าหนึ่งโหนด เนื่องจากสิ่งเหล่านี้สามารถเป็นองค์ประกอบเท่านั้น (โดยทั่วไปองค์ประกอบเท่านั้นที่มีชื่อคลาส), ในทางเทคนิคแล้วมันมีnodeListเพียงโหนดประเภทองค์ประกอบในนั้นและนักออกแบบสามารถสร้างคอลเลกชันที่มีชื่อแตกต่างกันที่เป็นelementListแต่พวกเขาเลือกที่จะใช้เพียงประเภทเดียว ของการสะสมไม่ว่าจะมีองค์ประกอบเพียงอย่างเดียวหรือไม่

แก้ไข: HTML5 กำหนดHTMLCollectionซึ่งเป็นรายการขององค์ประกอบ HTML (ไม่โหนดใด ๆ เพียงองค์ประกอบ) จำนวนของคุณสมบัติหรือวิธีการใน HTML5 HTMLCollectionตอนนี้กลับ แม้ว่าจะคล้ายกันมากในส่วนต่อประสานกับ a nodeListแต่ความแตกต่างได้เกิดขึ้นในขณะนี้ซึ่งมีองค์ประกอบเท่านั้นไม่ใช่โหนดชนิดใด ๆ

ความแตกต่างระหว่าง a nodeListและa HTMLCollectionมีผลกระทบเพียงเล็กน้อยต่อวิธีที่คุณใช้ (เท่าที่ฉันสามารถบอกได้) แต่ผู้ออกแบบ HTML5 ได้สร้างความแตกต่างดังกล่าวแล้ว

ตัวอย่างเช่นelement.childrenคุณสมบัติส่งคืน HTMLCollection แบบสด

Nodeสำหรับการดำเนินการโครงสร้างดังนั้นวิธีการนี้ใช้สำหรับการfirstChild, lastChild, childNodesฯลฯ มันมีมากขึ้นของระดับสำหรับโครงสร้างทั่วไป

แล้วบางNodeวัตถุนอกจากนี้ยังมีElementวัตถุ สืบทอดจาก Element วัตถุจริงเป็นวัตถุที่ระบุไว้ในไฟล์ HTML โดยแท็กเช่น ระดับกำหนดคุณสมบัติและวิธีการเช่น, , , , และNodeElement<div id="content"></div>ElementattributesidinnerHTMLclientWidthblur()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

นี่คือเอกสารบางส่วนสำหรับคลาสโหนดและองค์ประกอบ:
https://developer.mozilla.org/en-US/docs/DOM/Node
https://developer.mozilla.org/en-US/docs/DOM/Element

แหล่งข้อมูลที่ดีที่สุดสำหรับ DOM ทั้งหมดของคุณ

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

"ออบเจ็กต์ที่ใช้ Document, DocumentFragment, DocumentType, Element, Text, ProcessingInstruction หรือ Comment Interface (เรียกง่ายๆว่าโหนด) เข้าร่วมในทรี"

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

"โหนดองค์ประกอบรู้จักกันในนามองค์ประกอบ"

โหนด: http://www.w3schools.com/js/js_htmldom_nodes.asp

วัตถุ Node แสดงถึงโหนดเดียวในโครงสร้างของเอกสาร โหนดสามารถเป็นองค์ประกอบโหนดโหนดแอตทริบิวต์โหนดข้อความหรืออื่น ๆ ของประเภทโหนดอธิบายไว้ในบทประเภทโหนด

องค์ประกอบ: http://www.w3schools.com/js/js_htmldom_elements.asp

วัตถุองค์ประกอบหมายถึงองค์ประกอบในเอกสาร XML องค์ประกอบอาจมีแอตทริบิวต์องค์ประกอบอื่น ๆ หรือข้อความ หากองค์ประกอบมีข้อความข้อความจะถูกแสดงใน text-node

ซ้ำกัน:

• ความแตกต่างระหว่างองค์ประกอบและโหนดใน XML คืออะไร?
• ทำไมโหนดและองค์ประกอบต่างกันใน XML เหตุผลคืออะไร

โหนดใช้แทนแท็กโดยทั่วไป แบ่งออกเป็น 3 ประเภท:

แอตทริบิวต์หมายเหตุ: เป็นโหนดที่อยู่ภายในมีแอตทริบิวต์ EXP:<p id=”123”></p>

Text Node: เป็นโหนดที่อยู่ระหว่างการเปิดและปิดมันมีเนื้อหาข้อความ contian EXP:<p>Hello</p>

องค์ประกอบโหนด: เป็นโหนดที่อยู่ภายในมีแท็กอื่น ๆ EXP:<p><b></b></p>

แต่ละโหนดอาจเป็นประเภทพร้อมกันไม่จำเป็นต้องเป็นประเภทเดียวเท่านั้น

องค์ประกอบเป็นเพียงองค์ประกอบของโหนด