บ้าน > การตกแต่งภายใน

แผนผังองค์ประกอบของเอกสาร html คืออะไร การจัดโครงสร้างข้อมูลโดยใช้ JavaScript: Tree เลือกรายการตามประเภท

— อายุน้อยกว่า). องค์ประกอบของต้นไม้ทั้งหมดคือ ลูกหลานรูตและนั่นคือของพวกเขา บรรพบุรุษ. ในกรณีนี้ องค์ประกอบและข้อความทั้งหมดที่ประกอบเป็นเนื้อหาจะเป็นดังนี้ โหนดต้นไม้เอกสาร

แต่ละองค์ประกอบในแผนผังนี้สอดคล้องกับองค์ประกอบ HTML ดังนั้นจึงมีแท็ก เนื้อหา และชุดแอตทริบิวต์ หากต้องการย้ายไปยังโมเดลออบเจ็กต์เอกสาร เหลือเพียงขั้นตอนเดียวเท่านั้นที่ต้องทำ: เรียกออบเจ็กต์องค์ประกอบแผนผังทั้งหมด และทำให้แอตทริบิวต์สามารถอ่านและเปลี่ยนแปลงได้จากสคริปต์และแอปเพล็ต เป็นผลให้แผนผังขององค์ประกอบเอกสาร HTML ได้รับการจัดการแบบไดนามิก ยิ่งไปกว่านั้น ขณะนี้เราสามารถเพิ่มคุณสมบัติใหม่ให้กับแต่ละองค์ประกอบได้อย่างง่ายดาย นอกเหนือจากแอตทริบิวต์ HTML มาตรฐาน

เป็นแนวทางนี้ที่ใช้เป็นพื้นฐานสำหรับโมเดล HTML แบบไดนามิกของเบราว์เซอร์ Microsoft จากนั้นจึงนำไปใช้เป็นพื้นฐานสำหรับมาตรฐาน W3C ที่เรียกว่า แบบจำลองวัตถุเอกสาร(Document Object Model หรือ DOM) ในเวลาเดียวกัน W3C ได้ขยายแนวคิดของ DOM ไปยังเอกสาร XML ใดๆ โดยพิจารณาว่า HTML DOM เป็นกรณีพิเศษเฉพาะที่มีความสามารถเพิ่มเติม ดังนั้น DOM จึงเป็นโมเดลเอกสาร HTML และ XML ที่ไม่ขึ้นอยู่กับแพลตฟอร์มและภาษาที่กำหนด:

  • อินเทอร์เฟซและวัตถุที่ใช้เพื่อแสดงและจัดการเอกสาร
  • ความหมายของอินเทอร์เฟซและวัตถุเหล่านี้ รวมถึงคุณลักษณะและการตอบสนองต่อเหตุการณ์
  • ความสัมพันธ์ระหว่างอินเทอร์เฟซและวัตถุเหล่านี้

จนถึงปัจจุบัน W3C ได้กำหนดมาตรฐาน DOM ระดับหนึ่งและสอง (DOM 1 และ DOM 2) DOM 3 อยู่ในขั้นตอนร่างการทำงาน ตัวย่อเหล่านี้ตามลำดับหมายถึงสิ่งต่อไปนี้:

  • DOM 1 อธิบายการแสดงพื้นฐานของเอกสาร XML และ HTML เป็นแผนผังของวัตถุ
  • DOM 2 ขยายอินเทอร์เฟซหลัก DOM 1 และเพิ่มการรองรับเหตุการณ์และสไตล์
  • DOM 3 อธิบายการโหลดและแยกวิเคราะห์เอกสาร ตลอดจนการแสดงผลและการจัดรูปแบบ

เมื่อพิจารณาถึงสถานะปัจจุบัน เรากำลังพิจารณาเฉพาะ DOM 2 (และ DOM 1 ที่ประกอบด้วย) ที่นี่เท่านั้น DOM 2 ประกอบด้วยกลุ่มอินเทอร์เฟซที่เกี่ยวข้องกันดังต่อไปนี้:

  • อินเทอร์เฟซพื้นฐานหลักที่กำหนดมุมมองแผนผังของเอกสาร XML ใด ๆ
  • ดูอินเทอร์เฟซที่อธิบายการแสดงเอกสารที่เป็นไปได้
  • อินเทอร์เฟซเหตุการณ์ที่กำหนดลำดับการสร้างและการประมวลผลเหตุการณ์
  • อินเทอร์เฟซสไตล์ที่กำหนดการประยุกต์ใช้สไตล์ชีตกับเอกสาร
  • อินเทอร์เฟซ Traversal & Range ที่กำหนดการเคลื่อนที่ของแผนผังเอกสารและการจัดการพื้นที่ของเนื้อหา
  • อินเทอร์เฟซ HTML ที่กำหนดมุมมองแบบต้นไม้ของเอกสาร HTML

เริ่มต้นด้วยการกำหนดอินเทอร์เฟซพื้นฐานที่รองรับข้อกำหนดเพิ่มเติมทั้งหมด

4.2.2. แนวคิดพื้นฐาน

DOM 2 Core แสดงถึงเอกสาร XML ในรูปแบบต้นไม้ที่ประกอบด้วยโหนด ซึ่งในทางกลับกันก็เป็นอ็อบเจ็กต์และใช้อินเทอร์เฟซพิเศษเพิ่มเติม โหนดบางประเภทสามารถมีลูกได้นั่นคือพวกมันเองเป็นแผนผังย่อยในขณะที่โหนดบางประเภทเป็นใบไม้นั่นคือพวกมันไม่มีลูก ตารางต่อไปนี้สรุปประเภทโหนดเอกสารนามธรรมที่เป็นไปได้ทั้งหมด สำหรับโหนดแต่ละประเภท โหนดเหล่านั้นที่สามารถเป็นรายการย่อยได้จะแสดงรายการไว้ สำหรับแนวคิดที่สอดคล้องกับโหนดที่แสดง โปรดดูคำอธิบายของโครงสร้างเอกสาร XML

ตารางที่ 4.1. โครงสร้างแผนผังเอกสารคำอธิบายอินเทอร์เฟซเด็ก ๆ
เอกสาร องค์ประกอบ (สูงสุด 1 รายการ), ProcessingInstruction , Comment , DocumentType (สูงสุด 1 รายการ)
ส่วนเอกสาร องค์ประกอบ, คำแนะนำในการประมวลผล, ความคิดเห็น, ข้อความ, CDATASection, EntityReference
ประเภทเอกสาร ประเภทเอกสาร ไม่มีลูก
การอ้างอิงเอนทิตี ลิงค์ส่วน องค์ประกอบ, คำแนะนำในการประมวลผล, ความคิดเห็น, ข้อความ, CDATASection, EntityReference
องค์ประกอบ องค์ประกอบ องค์ประกอบ, คำแนะนำในการประมวลผล, ความคิดเห็น, ข้อความ, CDATASection, EntityReference
Attr คุณลักษณะ ข้อความ, EntityReference
คำแนะนำในการประมวลผล คำสั่ง XML ไม่มีลูก
ความคิดเห็น ความคิดเห็น ไม่มีลูก
ข้อความ ข้อความ ไม่มีลูก
ส่วน CDATA ส่วนซีดีต้า ไม่มีลูก
เอนทิตี บท องค์ประกอบ, คำแนะนำในการประมวลผล, ความคิดเห็น, ข้อความ, CDATASection, EntityReference
สัญกรณ์ สัญกรณ์ ไม่มีลูก

นอกจากนี้ DOM 2 Core ยังมีข้อกำหนดของอินเทอร์เฟซ NodeList (รายการเรียงลำดับของโหนดที่สามารถเข้าถึงได้ตามหมายเลขในรายการ) และอินเทอร์เฟซ NamedNodeMap (รายการแบบไม่เรียงลำดับของโหนดที่สามารถเข้าถึงได้ด้วยชื่อ) วัตถุเหล่านี้ก็คือ มีชีวิตอยู่กล่าวคือ การเปลี่ยนแปลงใดๆ ในเอกสารจะนำมาซึ่งการเปลี่ยนแปลงในรายการทั้งหมดที่เกี่ยวข้องโดยอัตโนมัติ

ควรเน้นย้ำว่า DOM 2 Core มีอินเทอร์เฟซสองชุด ซึ่งแต่ละชุดให้การเข้าถึงองค์ประกอบเอกสารทั้งหมดได้อย่างเต็มที่ ชุดแรกแสดงถึงแนวทางเชิงวัตถุที่มีลำดับชั้นการสืบทอดดังต่อไปนี้: บันทึกองค์ประกอบที่เป็นส่วนประกอบของคุณลักษณะและเนื้อหาข้อความ เมื่อพิจารณาแผนผังเอกสารในลักษณะนี้เรากำลังพูดถึง ลำดับชั้นของวัตถุ. แนวทางที่ 2 ยึดหลักการ “ทุกอย่างคือโหนด (Nodes)” ที่นี่ ส่วนประกอบทั้งหมดของเอกสารถือเป็นโหนดที่เท่ากันของแผนผัง และเราสามารถพูดถึงได้เท่านั้น ลำดับชั้นของโหนด. ดังนั้น DOM 2 จึงมีความซ้ำซ้อนโดยธรรมชาติ แต่ทำให้เราสามารถดูเอกสารไม่ทางใดก็ทางหนึ่งได้ ขึ้นอยู่กับงาน

อินเทอร์เฟซ DOM 2 Core ทั้งหมดแบ่งออกเป็นพื้นฐาน (พื้นฐาน) และเพิ่มเติม (ขยาย) อินเทอร์เฟซหลัก ได้แก่ , , , , Node , NodeList , NamedNodeMap , CharacterData , Attr , Element , Text และ Comment อินเทอร์เฟซเหล่านี้ต้องได้รับการสนับสนุนโดยการใช้งาน DOM ทั้งหมดสำหรับทั้งเอกสาร XML และ HTML อินเทอร์เฟซเพิ่มเติมกำหนดเป้าหมายเอกสาร XML ดังนั้นการใช้งาน HTML DOM อาจไม่รองรับ ซึ่งรวมถึง CDATASection, DocumentType, สัญลักษณ์, เอนทิตี, EntityReference และ ProcessingInstruction

เพื่อให้เป็นภาษาและแพลตฟอร์มที่เป็นอิสระ DOM จึงกำหนดประเภทต่อไปนี้:

DOMStringสตริงข้อความที่ประกอบด้วยอักขระ Unicode ในรูปแบบ UTF-16 ใน JavaScript และ Java มันถูกนำไปใช้โดยประเภทสตริง DOMTimeStampวันที่และเวลาในรูปแบบที่ยอมรับได้สำหรับภาษาเฉพาะ ตัวอย่างเช่น ใน JavaScript นี่จะเป็นอ็อบเจ็กต์ Date และใน Java มันจะเป็นประเภทจำนวนเต็มแบบยาวซึ่งมีจำนวนมิลลิวินาที

ด้านล่างนี้เป็นคำอธิบายโดยย่อของอินเทอร์เฟซ DOM ทั้งหมด ซึ่งระบุระดับโมเดล (DOM 1 หรือ DOM 2) ซึ่งมีการกำหนดคุณสมบัติอินเทอร์เฟซนี้หรือนั้นไว้ ข้อมูลจำเพาะของ W3C เขียนด้วยภาษา IDL ที่ไม่ขึ้นกับแพลตฟอร์ม เรานำเสนอตามไวยากรณ์ของ JavaScript ซึ่งเป็นภาษาสคริปต์หลักในปัจจุบัน

นอกจากคำอธิบายของมาตรฐานแล้ว เรายังให้คำอธิบายโดยย่อเกี่ยวกับการนำไปใช้ในโมเดลออบเจ็กต์ของ Microsoft และ Gecko ควรสังเกตว่าการใช้งาน XML และ HTML ของ Microsoft นั้นเป็นอิสระอย่างสมบูรณ์ (ใช้งานโดยส่วนประกอบซอฟต์แวร์ XMLDOM และ MSHTML ตามลำดับ) ในขณะที่ Gecko โมเดลวัตถุจะเหมือนกันสำหรับเอกสาร HTML และ XML การสนทนาต่อไปนี้มุ่งเน้นไปที่ DOM สำหรับ HTML; XML DOM จะกล่าวถึงรายละเอียดในส่วนที่ 8

4.2.3. ข้อยกเว้น: อินเทอร์เฟซ DOMException

วัตถุ DOMException เป็นต้นแบบของข้อยกเว้นทั้งหมดที่อาจเกิดขึ้นขณะประมวลผลเอกสาร มีรหัสคุณสมบัติเดียวประเภท Number ซึ่งประกอบด้วยหมายเลขข้อยกเว้นตามตารางต่อไปนี้:

ตารางที่ 4.2. ข้อยกเว้น DOM มาตรฐานชื่อ มูลค่า คำอธิบาย รุ่น
INDEX_SIZE_ERR 1 ดัชนีอยู่นอกช่วง โดม 1
DOMSTRING_SIZE_ERR 2 ไม่สามารถโยนข้อความที่กำหนดเพื่อพิมพ์ได้ โดม 1
HIERARCHY_REQUEST_ERR 3 มีความพยายามในการแทรกโหนดในตำแหน่งที่ไม่ถูกต้องในแผนผัง โดม 1
WRONG_DOCUMENT_ERR 4 ประเภทเอกสารไม่ถูกต้อง โดม 1
INVALID_CHARACTER_ERR 5 พบอักขระที่ไม่ถูกต้อง โดม 1
NO_DATA_ALLOWED_ERR 6 โหนดไม่มีข้อมูล โดม 1
NO_MODIFICATION_ALLOWED_ERR 7 มีความพยายามในการปรับเปลี่ยนวัตถุในลักษณะที่ผิดกฎหมาย โดม 1
NOT_FOUND_ERR 8 การเข้าถึงโหนดที่ไม่มีอยู่จริง โดม 1
NOT_SUPPORTED_ERR 9 ไม่มีการใช้พารามิเตอร์หรือการดำเนินการ โดม 1
INUSE_ATTRIBUTE_ERR 10 มีความพยายามที่จะเพิ่มแอตทริบิวต์ที่มีอยู่แล้ว โดม 1
INVALID_STATE_ERR 11 หมายถึงวัตถุที่ไม่มีอยู่จริง โดม 1
SYNTAX_ERR 12 ข้อผิดพลาดทางไวยากรณ์ โดม 2
INVALID_MODIFICATION_ERR 13 มีความพยายามที่จะเปลี่ยนประเภทของออบเจ็กต์ โดม 2
NAMESPACE_ERR 14 มีความพยายามในการสร้างหรือแก้ไขวัตถุที่ไม่สอดคล้องกับเนมสเปซ XML โดม 2
INVALID_ACCESS_ERR 15 อ็อบเจ็กต์ไม่รองรับพารามิเตอร์หรือการดำเนินการ โดม 2
การสนับสนุน: การใช้งานที่ไม่ได้มาตรฐาน รองรับรหัสข้อผิดพลาดบางอย่าง 4.2.4. คำอธิบายการใช้งาน: การสนับสนุนอินเทอร์เฟซ DOMImplementation: สำหรับเอกสาร XML เท่านั้น (XMLDOMImplementation) สอดคล้องกับ DOM 1

อินเทอร์เฟซ DOMImplementation ประกอบด้วยวิธีการซึ่งการดำเนินการไม่ขึ้นอยู่กับโมเดลวัตถุเอกสารเฉพาะ สามารถเข้าถึงได้ผ่านทางวัตถุ.

วิธีการ createCSSStyleSheet ไวยากรณ์ : วัตถุ.createCSSStyleSheet(title, media) อาร์กิวเมนต์: ชื่อ, นิพจน์ประเภทสื่อ ผลลัพธ์: วัตถุ CSSStyleSheet ใหม่ ข้อยกเว้น: การสนับสนุน SYNTAX_ERR

วิธีการ createCSSStyleSheet สร้างวัตถุ CSSStyleSheet ใหม่และส่งคืนตัวชี้ไปที่มัน วิธีการนี้ควรได้รับการสนับสนุนโดยการใช้งาน DOM ที่รองรับ CSS เท่านั้น วัตถุถูกสร้างขึ้นนอกบริบทของเอกสาร DOM 2 ไม่อนุญาตให้คุณรวมสไตล์ชีตที่สร้างขึ้นใหม่ในเอกสาร อาร์กิวเมนต์ชื่อระบุชื่อของสไตล์ชีต และสื่อระบุรายการอุปกรณ์แสดงผลที่คั่นด้วยเครื่องหมายจุลภาค

วิธีการ createDocument ไวยากรณ์ : วัตถุ.createDocument(namespaceURI, QualifiedName, doctype) อาร์กิวเมนต์ : namespaceURI, นิพจน์ QualifiedName ของประเภท doctype นิพจน์ประเภท DocumentType ผลลัพธ์ : ออบเจ็กต์ใหม่ ข้อยกเว้น : INVALID_CHARACTER_ERR, NAMESPACE_ERR, WRONG_DOCUMENT_ERR การสนับสนุน : ไม่รองรับ ไม่รองรับ.

เมธอด createDocument จะสร้างวัตถุใหม่และส่งกลับตัวชี้ไปที่วัตถุนั้น ได้รับการออกแบบมาเพื่อสร้างเอกสาร XML และอาจไม่รองรับเอกสาร HTML อาร์กิวเมนต์ namespaceURI ระบุ URI เนมสเปซขององค์ประกอบรากของเอกสาร QualifiedName ชื่อที่ผ่านการรับรอง และประเภทเอกสารประเภทของเอกสารที่ถูกสร้างขึ้น (อาจเป็นค่าว่างได้)

วิธีการ createDocumentType ไวยากรณ์ : วัตถุ.createDocumentType(qualifiedName, publicId, systemId) อาร์กิวเมนต์ : QualifiedName, publicId, นิพจน์ประเภท systemId ผลลัพธ์ : โหนด DocumentType ใหม่ การสนับสนุนข้อยกเว้น : ไม่รองรับ ไม่รองรับ.

เมธอด createDocumentType จะสร้างโหนด DocumentType ว่างและส่งกลับตัวชี้ไปที่โหนดนั้น มีไว้สำหรับเอกสาร XML และอาจไม่รองรับเอกสาร HTML อาร์กิวเมนต์ QualifiedName ระบุชื่อที่ผ่านการรับรองของประเภทเอกสารที่จะสร้าง publicId คือตัวระบุสาธารณะของส่วนภายนอก และ systemId คือตัวระบุระบบของส่วนภายนอก

มีวิธีการคุณลักษณะ ไวยากรณ์ : วัตถุ.hasFeature(feature, version) อาร์กิวเมนต์ : คุณลักษณะ, นิพจน์ประเภทเวอร์ชัน ผลลัพธ์ : ข้อยกเว้นบูลีน : ไม่มี การสนับสนุน

เมธอด hasFeature จะคืนค่าเป็นจริงหากการใช้งาน DOM รองรับคุณสมบัติที่ระบุ และคืนค่าเป็นเท็จ หากไม่เป็นเช่นนั้น ชื่อคุณสมบัติ (ไม่ว่าในกรณีใด) ถูกระบุโดยอาร์กิวเมนต์คุณลักษณะ ต้องเป็นไปตามระเบียบการตั้งชื่อ XML อาร์กิวเมนต์เวอร์ชันระบุชื่อเวอร์ชันของคุณสมบัติที่กำลังตรวจสอบ หากไม่ได้ระบุ จริงจะถูกส่งกลับหากคุณสมบัตินี้ได้รับการสนับสนุนอย่างน้อยบางเวอร์ชัน

ใน Gecko ค่าฟีเจอร์อาจเป็นสตริง "XML" และ "HTML" และค่าเวอร์ชันอาจเป็นสตริง "1.0" และ "2.0" ตัวอย่าง:

การแจ้งเตือน(document.implementation.hasFeature("HTML", "1.0")); alert(document.implementation.hasFeature("HTML", "2.0")); alert(document.implementation.hasFeature("HTML", "3.0"));

ข้อความแจ้งเตือนสองรายการแรกจะส่งออกสตริงเป็น true และข้อความแจ้งเตือนที่สามจะส่งออกเป็นเท็จ

ใน Microsoft XMLDOM ค่าคุณลักษณะอาจเป็นสตริง "XML", "DOM" และ "MS-DOM" และค่าเวอร์ชันอาจเป็นสตริง "1.0" ตัวอย่าง:

Var objDoc = ใหม่ ActiveXObject("Microsoft.XMLDOM"); alert(objDoc.implementation.hasFeature("XML", "1.0")); alert(objDoc.implementation.hasFeature("XML", "2.0"));

คำสั่งแจ้งเตือนแรกจะส่งออกสตริงเป็น true และคำสั่งที่สองจะส่งออกเป็นเท็จ

4.2.5. ส่วนของเอกสาร: การสนับสนุนอินเทอร์เฟซ DocumentFragment: สำหรับเอกสาร XML เท่านั้น (XMLDOMDocumentFragment) สอดคล้องกับ DOM 1

อินเทอร์เฟซ DocumentFragment เป็นการสืบทอดของอินเทอร์เฟซ Node และสืบทอดคุณสมบัติและวิธีการทั้งหมด ตามชื่อของมัน มันถูกออกแบบมาเพื่อการใช้งานด้วย เศษของเอกสาร(การแยกส่วนของแผนผังเอกสาร การสร้างส่วนเอกสารใหม่ การแทรกส่วนย่อยเป็นลูกของโหนด ฯลฯ) โปรดทราบว่าเมื่อแทรกวัตถุประเภท DocumentFragment ลงในโหนดที่สามารถมีลูกได้ ลูกทั้งหมดของวัตถุนั้นจะถูกแทรก แต่ไม่ใช่ตัววัตถุเอง ตัวอย่างเช่น โปรดดูที่อินเทอร์เฟซของโหนด

4.2.6. เอกสาร: การสนับสนุนอินเทอร์เฟซเอกสาร: รองรับเอกสาร XML (XMLDOMDocument); สำหรับเอกสาร HTML ได้รับการสนับสนุนบางส่วน DOM 1 สมบูรณ์ DOM 2 บางส่วน

อินเทอร์เฟซเอกสารสอดคล้องกับเอกสาร XML หรือ HTML เป็นพื้นฐานสำหรับการเข้าถึงเนื้อหาของเอกสารและสร้างส่วนประกอบต่างๆ

วิธีการเชื่อมต่อกับเอกสาร คำอธิบายรูปแบบคุณสมบัติ
โดม 1 สร้างแอตทริบิวต์
โดม 2 สร้างแอตทริบิวต์ที่กำหนดเนมสเปซ
โดม 1 สร้างส่วน CDATA
โดม 1 สร้างความคิดเห็น
โดม 1 สร้างส่วนของเอกสารใหม่
โดม 1 สร้างองค์ประกอบใหม่
โดม 2 สร้างองค์ประกอบที่มีเนมสเปซที่กำหนด
โดม 1 สร้างการเชื่อมโยงไปยังส่วน
โดม 2 สร้างวัตถุเหตุการณ์ใหม่
โดม 1 สร้างคำสั่ง
โดม 1 สร้างโหนดข้อความใหม่
โดม 2 ส่งคืนองค์ประกอบที่มี ID ที่กำหนด
โดม 1 ส่งคืนคอลเลกชันขององค์ประกอบทั้งหมดที่มีแท็กที่กำหนด
โดม 2 ส่งคืนคอลเลกชันขององค์ประกอบทั้งหมดที่มีแท็กที่กำหนด โดยกำหนดเนมสเปซ
โดม 2 นำเข้าโหนดจากเอกสารอื่น
คุณสมบัติประเภทเอกสาร ไวยากรณ์ : เอกสาร.doctype แก้ไขได้: ไม่มีการสนับสนุน

คุณสมบัติ doctype ส่งกลับประเภทของเอกสารนี้ (ประเภท DocumentType) สำหรับเอกสาร HTML และเอกสาร XML ที่ไม่มีการประกาศประเภทเอกสาร จะส่งคืนค่า null

คุณสมบัติองค์ประกอบเอกสาร ไวยากรณ์ : เอกสาร.documentElement ไม่แน่นอน: ไม่ การสนับสนุน: เป็นไปตามมาตรฐาน ตรงตามมาตรฐาน

คุณสมบัติ documentElement ส่งคืนองค์ประกอบรากของเอกสารนี้ (ประเภทองค์ประกอบ) สำหรับเอกสาร HTML องค์ประกอบ HTML จะถูกส่งกลับ ตัวอย่าง: ตัวดำเนินการ

การแจ้งเตือน (document.documentElement.tagName);

จะส่งออกสตริง HTML ไปที่หน้าจอ

คุณสมบัติการนำไปปฏิบัติ ไวยากรณ์ : เอกสาร.implementation แก้ไขได้: ไม่ การสนับสนุน: สำหรับเอกสาร XML เท่านั้น สอดคล้องกับ DOM 1

คุณสมบัติการใช้งานส่งคืนวัตถุประเภทที่อธิบายการใช้งาน DOM นี้

คุณสมบัติ styleSheets ไวยากรณ์ : เอกสาร.styleSheets แก้ไขได้: ไม่รองรับ: เอกสาร HTML เท่านั้น ตรงตามมาตรฐาน

คุณสมบัติ styleSheets ส่งคืนอ็อบเจ็กต์ประเภท StyleSheetList ที่สอดคล้องกับรายการสไตล์ชีตภายนอกและภายในสำหรับเอกสาร คุณสมบัตินี้ได้รับการสนับสนุนโดยการใช้งาน DOM ที่รองรับสไตล์ชีตแบบไดนามิกเท่านั้น

วิธีการ createAttribute ไวยากรณ์ : เอกสาร.createAttribute(name) อาร์กิวเมนต์ : นิพจน์ประเภทชื่อ ผลลัพธ์ : วัตถุ Attr ใหม่ ข้อยกเว้น : การสนับสนุน INVALID_CHARACTER_ERR : สำหรับเอกสาร XML เท่านั้น ตรงตามมาตรฐาน

วิธีการ createAttribute จะสร้างวัตถุใหม่ประเภท Attr และส่งกลับตัวชี้ไปที่มัน อาร์กิวเมนต์ชื่อระบุชื่อของแอตทริบิวต์ที่จะสร้าง วัตถุใหม่มีแอตทริบิวต์nodeNameชื่อและแอตทริบิวต์localName คำนำหน้า และแอตทริบิวต์ namespaceURI ที่เป็น null ต่อจากนั้น แอตทริบิวต์ที่สร้างขึ้นสามารถกำหนดให้กับองค์ประกอบใดๆ ได้โดยใช้เมธอด Element.setAttributeNode

ตัวอย่างการสร้างแอตทริบิวต์สำหรับองค์ประกอบ HTML:

วาร์ myDiv = document.getElementById("idDiv"); var attr = document.createAttribute("อุณหภูมิ"); attr.value = "temporary"; myDiv.setAttributeNode(attr); alert(myDiv.getAttribute("temp"));!}

ตัวดำเนินการแจ้งเตือนจะพิมพ์สตริงชั่วคราว

ตัวอย่างของการสร้างแอตทริบิวต์ใน Microsoft XMLDOM:

Var xmlDoc = ใหม่ ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = เท็จ; xmlDoc.load("c:\เอกสารของฉัน\books.xml"); var root = xmlDoc.documentElement; var newAttr = xmlDoc.createAttribute("temp"); newAttr.value = "temporary"; root.setAttributeNode(attr); alert(root.getAttribute("temp"));!}

ที่นี่ตัวดำเนินการแจ้งเตือนจะพิมพ์สตริง temporary ด้วย

วิธีการ createAttributeNS ไวยากรณ์ : เอกสาร.createAttributeNS(namespaceURI, QualifiedName) อาร์กิวเมนต์ : namespaceURI, นิพจน์ประเภท QualifiedName ผลลัพธ์ : ข้อยกเว้นวัตถุ Attr ใหม่ : INVALID_CHARACTER_ERR, NAMESPACE_ERR Support : ไม่รองรับ ไม่รองรับ.

เมธอด createAttributeNS จะสร้างวัตถุ Attr ใหม่และส่งคืนตัวชี้ไปที่วัตถุนั้น มีไว้สำหรับเอกสาร XML และอาจไม่รองรับเอกสาร HTML อาร์กิวเมนต์ namespaceURI ระบุ URI ของเนมสเปซ และ QualifiedName คือชื่อที่ผ่านการรับรองของแอตทริบิวต์ที่จะสร้างในเนมสเปซนั้น วัตถุที่สร้างขึ้นประเภท Attr มีคุณลักษณะดังต่อไปนี้:

ต่อจากนั้น แอตทริบิวต์ที่สร้างขึ้นสามารถกำหนดให้กับองค์ประกอบใดๆ ได้โดยใช้เมธอด Element.setAttributeNode

วิธีการ createCDATASection ไวยากรณ์ : เอกสาร.createCDATASection(data) อาร์กิวเมนต์ : นิพจน์ชนิดข้อมูล ผลลัพธ์ : วัตถุ CDATASection ใหม่ ข้อยกเว้น : NOT_SUPPORTED_ERR การสนับสนุน : เป็นไปตามมาตรฐาน ตรงตามมาตรฐาน

วิธีการ createCDATASection สร้างวัตถุ CDATASection ใหม่ และส่งกลับตัวชี้ไป มีไว้สำหรับเอกสาร XML เท่านั้น การพยายามเรียกมันใน HTML DOM จะเกิดข้อยกเว้น NOT_SUPPORTED_ERR อาร์กิวเมนต์ข้อมูลระบุเนื้อหาของเนื้อหาที่ถูกสร้างขึ้น ตัวอย่างของการสร้างส่วน CDATA ใน Microsoft XMLDOM:

Var xmlDoc = ใหม่ ActiveXObject("Microsoft.XMLDOM"); xmlDoc.async = เท็จ; xmlDoc.load("c:\เอกสารของฉัน\books.xml"); var root = xmlDoc.documentElement; var newSection = xmlDoc.createCDATASection("สวัสดีชาวโลก!"); root.appendChild (มาตราใหม่);

วิธีการ createComment ไวยากรณ์ : เอกสาร.createComment(data) อาร์กิวเมนต์ : นิพจน์ชนิดข้อมูล ผลลัพธ์ : ออบเจ็กต์ความคิดเห็นใหม่ ข้อยกเว้น : ไม่มี การสนับสนุน : สำหรับเอกสาร XML เท่านั้น ตรงตามมาตรฐาน

วิธีการ createComment จะสร้างวัตถุความคิดเห็นใหม่และส่งคืนตัวชี้ไปที่มัน อาร์กิวเมนต์ข้อมูลระบุเนื้อหาของความคิดเห็นที่จะสร้าง ตัวอย่างการสร้างความคิดเห็นใน Gecko:

ราก Var = document.documentElement.firstChild; var comm = document.createComment("นี่คือความคิดเห็น"); root.appendChild(คอม);

วิธีการ createDocumentFragment ไวยากรณ์ : เอกสาร.createDocumentFragment() ผลลัพธ์ : วัตถุใหม่ ข้อยกเว้น : ไม่มี การสนับสนุน : สำหรับเอกสาร XML เท่านั้น ตรงตามมาตรฐาน

เมธอด createDocumentFragment จะสร้างอ็อบเจ็กต์ว่างชนิดใหม่และส่งกลับตัวชี้กลับไป ตัวอย่างการสร้างส่วนของเอกสารใน Gecko:

องค์ประกอบ = document.documentElement.firstChild; var o = document.createDocumentFragment(); elem.appendChild(o);

วิธีการ createElement ไวยากรณ์ : เอกสาร.createElement(tagName) อาร์กิวเมนต์ : นิพจน์ประเภท tagName ผลลัพธ์ : ข้อยกเว้นของวัตถุองค์ประกอบใหม่ : การสนับสนุน INVALID_CHARACTER_ERR : เป็นไปตามมาตรฐาน (ดูหมายเหตุ 2) ตรงตามมาตรฐาน

เมธอด createElement จะสร้างออบเจ็กต์ใหม่ประเภท Element และส่งคืนพอยน์เตอร์กลับไป อาร์กิวเมนต์ tagName ระบุแท็กขององค์ประกอบที่ถูกสร้างขึ้น แอ็ตทริบิวต์ nodeName ของอ็อบเจ็กต์ใหม่คือ tagName และแอ็ตทริบิวต์ localName คำนำหน้า และ namespaceURI ของมันคือ null หากออบเจ็กต์มีคุณลักษณะที่มีค่าเริ่มต้น โหนด Attr ที่เกี่ยวข้องจะถูกสร้างขึ้นและแนบกับองค์ประกอบโดยอัตโนมัติ

หมายเหตุ:

  • สำหรับ XML ชื่อแท็กองค์ประกอบจะคำนึงถึงตัวพิมพ์เล็กและตัวพิมพ์ใหญ่ สำหรับ HTML สามารถตั้งค่าได้ในทุกกรณี แต่จะถูกแปลงเป็นตัวพิมพ์ใหญ่เมื่อสร้างองค์ประกอบ
  • ความพยายามที่จะสร้างองค์ประกอบ FRAME หรือ IFRAME ใน Internet Explorer ส่งผลให้เกิดข้อผิดพลาดร้ายแรงของเบราว์เซอร์หรืออย่างน้อยที่สุดก็ทำลายโครงสร้างวัตถุเอกสารทั้งหมด
    • พฤติกรรมประเภทโหนด
    ATTRIBUTE_NODE แอตทริบิวต์ของ OwnerElement เป็น null ระบุเป็น true ลูกทั้งหมดของโหนดเดิมจะถูกคัดลอกซ้ำไปยังโหนด Attr ใหม่ โดยไม่คำนึงถึงค่าลึก
    DOCUMENT_FRAGMENT_NODE หาก deep เป็นจริง ระบบจะนำเข้าส่วนของเอกสารที่ระบุ มิฉะนั้น โหนดว่างจะถูกสร้างขึ้น
    DOCUMENT_NODE, DOCUMENT_TYPE_NODE ไม่สามารถนำเข้าได้
    ELEMENT_NODE คุณลักษณะทั้งหมดของโหนดดั้งเดิม ยกเว้นที่ระบุโดยค่าเริ่มต้นในเอกสารต้นฉบับ จะถูกคัดลอกไปยังโหนดองค์ประกอบใหม่ จากนั้นแอตทริบิวต์เริ่มต้นที่ยอมรับในเอกสารนี้สำหรับองค์ประกอบที่มีชื่อนั้นจะถูกสร้างขึ้น หาก deep เป็นจริง ทรีย่อยทั้งหมดขององค์ประกอบดั้งเดิมจะถูกนำเข้า
    ENTITY_NODE โหนด DocumentType ของเอนทิตี
    ENTITY_REFERENCE_NODE เฉพาะโหนด EntityReference เท่านั้นที่จะถูกคัดลอก โดยไม่คำนึงถึงค่าลึก หากเอกสารของเรามีคำจำกัดความส่วนตามชื่อที่กำหนด เอกสารนั้นก็จะถูกป้อนลงในโหนดใหม่
    NOTATION_NODE สามารถนำเข้าโหนดสัญลักษณ์ได้ แต่ใน DOM 2 DocumentType เป็นแบบอ่านอย่างเดียว ดังนั้นการนำเข้าโหนดดังกล่าวจึงไม่สมเหตุสมผล
    PROCESSING_INSTRUCTION_NODE ค่าของเป้าหมายและแอตทริบิวต์ข้อมูลของโหนดต้นทางจะถูกคัดลอก
    TEXT_NODE, CDATA_SECTION_NODE, COMMENT_NODE ค่าของข้อมูลและแอตทริบิวต์ความยาวของโหนดต้นทางจะถูกคัดลอก

    จัดทำโดย: Evgeny Ryzhkov วันที่ตีพิมพ์: 15/11/2010

    แผนผังเอกสารคือไดอะแกรมสำหรับสร้างเอกสาร HTML ที่แสดงความสัมพันธ์ระหว่างองค์ประกอบของหน้าต่างๆ ได้แก่ ลำดับและการซ้อนองค์ประกอบ แผนภาพนี้ช่วยนำทางไปยังแท็ก HTML ที่ดูเหมือนจะวุ่นวาย

    แผนผังเอกสารช่วยนักพัฒนาเว็บเมื่อเขียนกฎ CSS และสคริปต์ Javascript

    หมายเหตุ

    อย่าสับสนแผนผังเอกสารกับ Document Object Model (DOM) DOM เป็นแนวคิดที่ซับซ้อนกว่า (เราจะเขียนเกี่ยวกับเรื่องนี้ในภายหลัง)

    เพื่อไม่ให้อธิบายยาวและน่าเบื่อว่าทำไมแผนผังเอกสารจึงถูกเรียกว่าแผนผัง ลองดูตัวอย่าง - ใช้โค้ด HTML ง่ายๆ:

    ชื่อหน้า ชื่อหลัก

    ย่อหน้าของข้อความ

    • วรรค 1
    • จุดที่ 2
    ชื่อที่สอง

    นี่คือลักษณะที่โค้ด HTML ปรากฏโดยชาวพื้นเมืองที่ไม่ได้รับแจ้งซึ่งคลิกเพื่อดูโค้ดของหน้าโดยไม่ได้ตั้งใจ แต่สายตาที่ผ่านการฝึกอบรมของนักพัฒนาเว็บจะแยกมันออกจากกัน เห็นทุกระดับของการซ้อนและการเชื่อมต่อโครงข่าย มันจะสร้างโครงสร้างลำดับชั้นที่ชัดเจนในรูปแบบของต้นไม้จากความสับสนวุ่นวาย (เพราะแผนภาพคล้ายกับโครงร่างของต้นไม้):

    ความสัมพันธ์ในครอบครัว

    มีการเชื่อมต่อบางอย่างระหว่างองค์ประกอบของแผนผังเอกสาร มาดูพวกเขากันดีกว่า

    บรรพบุรุษและลูกหลาน

    จากภาพแผนผังของต้นไม้ และจากโค้ด HTML เอง เห็นได้ชัดว่าองค์ประกอบบางอย่างซ้อนอยู่ในองค์ประกอบอื่น องค์ประกอบที่มีองค์ประกอบอื่นอยู่นั้นเป็นบรรพบุรุษ (บรรพบุรุษ) ของทุกสิ่งที่ฝังอยู่ในนั้น พวกที่ซ้อนอยู่ก็เป็นลูกหลานของมัน (ลูกหลาน)

    เพื่อความชัดเจน ให้พิจารณากิ่งก้านหนึ่งของต้นไม้ของเรา:

    บรรพบุรุษแต่ละคนสามารถมีผู้สืบทอดได้ไม่จำกัดจำนวน ผู้สืบทอดแต่ละคนจะมีบรรพบุรุษจำนวนหนึ่งขึ้นอยู่กับโครงสร้างของต้นไม้และกิ่งก้านที่จะตั้งอยู่ แต่ไม่ว่าในกรณีใดก็จะมีบรรพบุรุษอย่างน้อยหนึ่งคน

    พ่อแม่และลูกสาว

    Parent คือบรรพบุรุษลำดับต้น (บรรพบุรุษระดับที่หนึ่ง) ขององค์ประกอบ ในทางกลับกัน เด็กที่อยู่ใกล้ชิด (เด็กระดับที่ 1) เรียกว่าเด็ก

    ผู้ปกครองแต่ละคนสามารถมีลูกสาวได้ไม่จำกัดจำนวน องค์ประกอบลูกจะมีพาเรนต์เพียงตัวเดียวเท่านั้น

    องค์ประกอบหลักเรียกอีกอย่างว่าบรรพบุรุษโดยตรง และองค์ประกอบลูกเป็นผู้สืบทอดโดยตรง สิ่งเหล่านี้เหมือนกับชื่อเชิงความหมาย

    องค์ประกอบน้องสาว

    พี่น้องคือกลุ่มขององค์ประกอบตั้งแต่สององค์ประกอบขึ้นไปที่มีผู้ปกครองร่วมกัน องค์ประกอบไม่จำเป็นต้องเป็นประเภทเดียวกัน เพียงแต่ต้องมีองค์ประกอบหลักร่วมกัน

    องค์ประกอบที่อยู่ติดกัน

    องค์ประกอบที่อยู่ติดกันคือองค์ประกอบพี่น้องที่อยู่ใน "บริเวณใกล้เคียง"

    พี่สาวคนก่อนและน้องสาวคนถัดไป

    ทุกอย่างที่นี่ควรชัดเจนจากชื่อของคำศัพท์เอง พี่น้องก่อนหน้า - องค์ประกอบน้องสาวก่อนหน้าตามโค้ด ใช้สาขาตัวอย่างของเราสำหรับ

    กำลังโหลด...กำลังโหลด...