คำนำ
ฟังก์ชั่นของ DOM คือการแปลงเว็บเพจเป็นวัตถุ JavaScript เพื่อให้คุณสามารถใช้ JavaScript เพื่อดำเนินการต่าง ๆ บนหน้าเว็บ (เช่นการเพิ่มและลบเนื้อหา) เบราว์เซอร์จะแยกวิเคราะห์เอกสาร HTML เป็นชุดของโหนดตามโมเดล DOM จากนั้นสร้างโครงสร้างต้นไม้ของโหนดเหล่านี้ หน่วยองค์ประกอบที่เล็กที่สุดของ DOM เรียกว่าโหนดและโครงสร้างต้นไม้ของเอกสาร (DOM Tree) ประกอบด้วยโหนด 12 ประเภท
คุณสมบัติ
โดยทั่วไปโหนดมีคุณสมบัติพื้นฐานอย่างน้อยสามอย่าง: nodetype , nodename และ nodevalue
ประเภทโหนดที่แตกต่างกันค่าของแอตทริบิวต์ทั้งสามนี้ก็แตกต่างกันเช่นกัน
น๊อต
คุณสมบัติ nodetype ส่งคืนค่าคงที่ของประเภทโหนด ประเภทที่แตกต่างกันสอดคล้องกับค่าคงที่ที่แตกต่างกันและ 12 ประเภทสอดคล้องกับค่าคงที่จาก 1 ถึง 12 ตามลำดับ
Element Node Node.Element_Node (1)
แอตทริบิวต์โหนดโหนด.
Node Text Node.Text_Node (3)
CDATA NODE NODE.CDATA_SECTION_NODE (4)
ชื่ออ้างอิงเอนทิตีโหนด Node.entry_Reference_Node (5)
ชื่อเอนทิตีโหนด Node.ENTITY_NODE (6)
กระบวนการคำสั่งโหนดโหนด PROCESSING_INSTRUCTION_NODE (7)
แสดงความคิดเห็นโหนด node.comment_node (8)
Node Node.Document_Node (9)
ประเภทเอกสารโหนดโหนด DOCUMENT_TYPE_NODE (10)
โหนดแฟรกเมนต์เอกสาร Node.Document_Fragment_Node (11)
โหนดประกาศ DTD Node.Notation_Node (12)
DOM กำหนดอินเทอร์เฟซโหนดซึ่งใช้เป็นประเภทโหนดใน JavaScript และวัตถุ DOM ทั้งหมดใน IE8-Browser จะถูกนำมาใช้เป็นวัตถุ COM ดังนั้น IE8-Browser ไม่รองรับการเขียนวัตถุโหนด
// return 1 ในเบราว์เซอร์มาตรฐานและมีการรายงานข้อผิดพลาดใน IE8-Browser, แจ้งโหนดที่ console.log (node.element_node); // 1
ชื่อมงกุฎ
คุณสมบัติ NodeName ส่งคืนชื่อของโหนด
โภชนาการ
คุณสมบัติ nodeValue ส่งคืนหรือตั้งค่าของโหนดปัจจุบันในรูปแบบเป็นสตริง
ถัดไปคำอธิบายโดยละเอียดจะทำจาก 1 ถึง 12 ตามลำดับที่สอดคล้องกันของค่าคงที่ของประเภทโหนด
【 1 】โหนดองค์ประกอบ
องค์ประกอบโหนดองค์ประกอบสอดคล้องกับองค์ประกอบแท็ก HTML ของหน้าเว็บ ค่าโหนดประเภท nodetype ของโหนดองค์ประกอบคือ 1, ชื่อโหนดชื่อ nodeName คือชื่อฉลากตัวพิมพ์ใหญ่และค่า nodeValue เป็นโมฆะ
นำองค์ประกอบของร่างกายเป็นตัวอย่าง
// 1 'body' nullconsole.log (document.body.nodeType, document.body.nodeName, document.nodevalue) console.log (node.element_node === 1); // true
【 2 】โหนดคุณสมบัติ
แอตทริบิวต์ของแอตทริบิวต์องค์ประกอบสอดคล้องกับแอตทริบิวต์ของแท็ก HTML ในหน้าเว็บ มันมีอยู่ในแอตทริบิวต์แอตทริบิวต์ขององค์ประกอบเท่านั้นและไม่ได้เป็นส่วนหนึ่งของแผนผังเอกสาร DOM ค่า NodeType ประเภทโหนดของโหนดคุณสมบัติคือ 2 ค่าโหนดชื่อโหนดคือชื่อแอตทริบิวต์และค่า nodeValue คือค่าแอตทริบิวต์
ตอนนี้องค์ประกอบ div มีแอตทริบิวต์ของ id = "ทดสอบ"
<div id = "test"> </div> <script> var attr = test.attributes.id; // 2 'id' 'test'console.log (attr.nodeType, attr.nodename, attr.nodevalue) คอนโซลล็อก (node.attribute_node === 2);
【 3 】โหนดข้อความ
ข้อความโหนดข้อความแสดงเนื้อหาแท็ก HTML ในหน้าเว็บ ค่า NodeType ประเภทโหนดของโหนดข้อความคือ 3 ค่าชื่อโหนดชื่อโหนดคือ '#text' และค่า nodeValue คือค่าเนื้อหาฉลาก
ตอนนี้เนื้อหาขององค์ประกอบ div คือ 'ทดสอบ'
<div id = "ทดสอบ"> ทดสอบ </div> <script> var txt = test.firstChild; // 3 '#Text' 'ทดสอบ' console.log (txt.nodeType, txt.nodename, txt.nodevalue) console.log (node.text_node === 3);
【 4 】โหนด cdata
ประเภท CDATASECTION ใช้สำหรับเอกสารที่ใช้ XML เท่านั้นและจะปรากฏในเอกสาร XML เท่านั้น มันหมายถึงพื้นที่ CDATA และรูปแบบโดยทั่วไป
<! [cdata []]>
ค่าของโหนดประเภท nodetype ของโหนดประเภทนี้คือ 4 ค่าของชื่อโหนด nodename คือ '#cdata-section' และค่าของ nodevalue คือเนื้อหาในพื้นที่ CDATA
【 5 】โหนดชื่ออ้างอิงเอนทิตีโหนด
เอนทิตีคือการประกาศที่ระบุชื่อที่ใช้ใน XML แทนเนื้อหาหรือแท็ก เอนทิตีประกอบด้วยสองส่วน ก่อนอื่นชื่อจะต้องผูกพันกับเนื้อหาการแทนที่โดยใช้การประกาศเอนทิตี การประกาศเอนทิตีถูกสร้างขึ้นในคำจำกัดความประเภทเอกสาร (DTD) หรือ XML Schema โดยใช้ชื่อ <! เอนทิตี "ค่า"> ไวยากรณ์ ประการที่สองชื่อที่กำหนดไว้ในการประกาศเอนทิตีจะถูกใช้ใน XML เมื่อใช้ใน XML ชื่อนี้เรียกว่าการอ้างอิงเอนทิตี
NodeType ประเภทโหนดของชื่อการอ้างอิงเอนทิตีโหนด entry_reference คือ 5 ชื่อโหนด NodeName คือชื่อของการอ้างอิงเอนทิตีและ nodeValue เป็น null
// ชื่อเอนทิตี <! Entity Publisher "Microsoft Press"> // การอ้างอิงชื่อเอนทิตี <Pubinfo> เผยแพร่โดย & Publisher; </bubinfo>
【 6 】โหนดชื่อเอนทิตี
มีการอธิบายรายละเอียดข้างต้นดังนั้นฉันจะไม่ทำซ้ำ
โหนดประเภทโหนดของโหนดนี้คือ 6 ชื่อโหนดชื่อโหนดคือชื่อเอนทิตีและ nodevalue เป็นโมฆะ
【 7 】โหนดคำสั่งการประมวลผล
NodeType ประเภทโหนดที่จัดการกับการประมวลผลโหนดการประมวลผลการประมวลผลมีค่า 7 ชื่อโหนด NodeName มีค่าของเป้าหมายและ nodeValue มีเนื้อหาทั้งหมดไม่รวมเป้าหมาย
【 8 】โหนดคำอธิบายประกอบ
ความคิดเห็นโหนดความคิดเห็นแสดงถึงความคิดเห็น HTML ในหน้าเว็บ ค่าของโหนดประเภท nodetype ของโหนดคำอธิบายประกอบคือ 8 ค่าของชื่อโหนดชื่อโหนดคือ '#comment' และค่าของ nodevalue คือเนื้อหาของความคิดเห็น
ตอนนี้มี <!-ฉันเป็นเนื้อหาความคิดเห็น-> ในองค์ประกอบ div ด้วยรหัส id mydiv
<div id = "mydiv"> <!-ฉันคือเนื้อหาความคิดเห็น-> </div> <script> var com = mydiv.firstchild; // 8 '#comment' 'ฉันเป็นเนื้อหาความคิดเห็น' log (com.nodeType, com.nodeName, com.nodevalue) console.log
【 9 】โหนดเอกสาร
เอกสารโหนดเอกสารแสดงถึงเอกสาร HTML หรือที่เรียกว่าโหนดรูทชี้ไปที่วัตถุเอกสาร NodeType ประเภทโหนดของโหนดเอกสารคือ 9 ชื่อโหนดชื่อโหนดคือ '#Document' และ nodeValue เป็น null
<script> // 9 "#Document" nullconsole.log (document.nodeType, document.nodeName, document.nodevalue) console.log (node.document_node === 9); // true </script>
【 10 】โหนดประเภทเอกสาร
DocumentType Node DocumentType มีข้อมูลทั้งหมดเกี่ยวกับ doctype ของเอกสาร ค่าโหนดประเภท nodetype ของโหนดประเภทเอกสารคือ 10, ชื่อโหนดชื่อ nodeName คือชื่อของ doctype และค่า nodevalue คือ null
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> เอกสาร </title> </head> <body> <body> nullconsole.log (NodedoCumentType.nodeType, NodedoDocumentType.nodeName, NodedoCumentType.NodeValue); console.log (node.document_type_node === 10); </script> </body> </html>
【 11 】โหนดแฟรกเมนต์เอกสาร
เอกสารชิ้นส่วนเอกสารการจัดทำเอกสารไม่มีแท็กที่สอดคล้องกันในเอกสาร มันเป็นเอกสารที่มีน้ำหนักเบาที่สามารถมีและควบคุมโหนด แต่จะไม่เอาชนะทรัพยากรเพิ่มเติมเช่นเอกสารที่สมบูรณ์ โหนดประเภทโหนด nodetype ของโหนดนี้คือ 11 ชื่อโหนด nodename คือ '#เอกสารการจัดเรียงข้อมูล' และ nodevalue เป็น null
<script> var nodeDocumentFragment = document.createdocumentFragment (); // 11 "#document-fragment" nullconsole.log (nodeDocumentFragment.nodeType, nodedoCumentFragment.nodeName, NodedoDocumentFragment.nodeValue); console.log (node.document_fragment_node === 11); //
【 12 】 DTD ประกาศโหนด
สัญกรณ์การประกาศ DTD แสดงถึงสัญลักษณ์ที่ประกาศใน DTD โหนดประเภทโหนดของโหนดนี้คือ 12 ชื่อโหนดโหนดชื่อเป็นชื่อสัญลักษณ์และ nodevalue เป็นโมฆะ
สรุป
ในบรรดาประเภทโหนด 12 DOM เหล่านี้บางชนิดเหมาะสำหรับเอกสาร XML และบางประเภทไม่ได้ใช้กันทั่วไป สำหรับประเภทที่ใช้กันทั่วไปเราจะแนะนำรายละเอียดในภายหลัง บทความนี้ให้ภาพรวมของโหนด 12 ประเภทเท่านั้น ฉันหวังว่าบทความนี้จะเป็นประโยชน์กับทุกคน