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

สำหรับนักพัฒนาเว็บ โครงสร้างเอกสารช่วยในการเขียนกฎ CSS และสคริปต์ Javascript

โน้ต

อย่าสับสนระหว่างโครงสร้างเอกสารและรูปแบบวัตถุของเอกสาร (DOM) DOM เป็นแนวคิดที่ซับซ้อนมากขึ้น (เพิ่มเติมในเรื่องนี้ในภายหลัง)

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

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

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

มีความสัมพันธ์บางอย่างระหว่างองค์ประกอบของโครงสร้างเอกสาร ลองพิจารณาพวกเขา

บรรพบุรุษและทายาท

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

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

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

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

พ่อแม่(พาเรนต์) เป็นบรรพบุรุษโดยตรง (บรรพบุรุษระดับที่หนึ่ง) ขององค์ประกอบ ในทางกลับกัน เด็กที่อยู่ติดกัน (เด็กระดับที่หนึ่ง) เรียกว่า องค์ประกอบลูก(เด็ก).

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

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

รายการพยาบาล

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

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

องค์ประกอบที่อยู่ติดกัน(ติดกัน) คือพี่น้องที่อยู่ติดกัน

การพยาบาลครั้งก่อนและการพยาบาลครั้งถัดไป

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

นี่จะ

สำหรับ

—

, และสำหรับ

จะไม่มีการพยาบาลก่อนหน้านี้

ในทำนองเดียวกันพี่น้องต่อไปนี้: for

—

สำหรับ

—

, สำหรับ
- เลขที่.

ก่อนหน้าและถัดไป

องค์ประกอบก่อนหน้าเป็นองค์ประกอบก่อนหน้าเดียวกันตามรหัส แต่ไม่มีข้อจำกัดพี่น้อง สำหรับสาขาของเรา: for

นี่จะ

สำหรับ

—

, สำหรับ

—

.

ในทำนองเดียวกัน องค์ประกอบ (ก่อนหน้า) ต่อไปนี้ไม่มีข้อจำกัดพี่น้อง: for

—

สำหรับ

ลูกคนแรกและคนสุดท้าย

ลูกคนแรกคือลูกคนแรกของพาเรนต์ในแผนผังเอกสาร และลูกคนสุดท้ายคือลูกคนสุดท้าย



องค์ประกอบราก

องค์ประกอบรูท (root) เป็นบรรพบุรุษของบรรพบุรุษทั้งหมด มันคือ "รูท" ของแผนผังเอกสารของเรา เป็นองค์ประกอบเดียวที่ไม่มีพาเรนต์ก็คือ

DOM API ไม่ได้ซับซ้อนเป็นพิเศษ แต่ก่อนที่จะพูดถึงการเขียนโปรแกรมกับ DOM นั้น มีปัญหาด้านสถาปัตยกรรม DOM บางอย่างที่ต้องทำความเข้าใจ

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

และโหนดแทนบรรทัดข้อความ เอกสาร HTML ยังสามารถมีโหนดที่เป็นตัวแทนของความคิดเห็น HTML 1 พิจารณาสิ่งต่อไปนี้
เอกสาร HTML อย่างง่าย

เอกสารตัวอย่าง

เอกสาร HTML

มันคือ เรียบง่ายเอกสาร.

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

โหนดที่อยู่ในระดับเดียวกันและมีพาเรนต์เดียวกันเรียกว่าพี่น้อง โหนดที่อยู่บน any
จำนวนระดับที่ต่ำกว่าโหนดอื่นคือลูกหลาน พ่อแม่ ปู่ย่าตายาย และโหนดอื่นๆ ที่อยู่เหนือโหนดนี้เป็นบรรพบุรุษ

โหนด
โครงสร้างแผนผัง DOM เป็นแผนผังของวัตถุโหนดประเภทต่างๆ อินเทอร์เฟซ Node1 กำหนดคุณสมบัติและวิธีการสำหรับการนำทางและจัดการแผนผัง คุณสมบัติ childNodes ของโหนดส่งคืนรายการโหนดย่อย คุณสมบัติ firstChild, LastChild, NextSibling, PreviousSibling และ parentNode ให้วิธีการสำรวจโหนดทรี วิธีการต่างๆ เช่น appendChild (), removeChild (), replaceChild () และ insertBefore () ช่วยให้คุณสามารถเพิ่มและลบโหนดในแผนผังเอกสารได้

ประเภทของโหนด
ประเภทของโหนดในแผนผังเอกสารจะแสดงด้วยอินเทอร์เฟซย่อยพิเศษของโหนด อ็อบเจ็กต์โหนดใด ๆ มีคุณสมบัติ nodeType ที่กำหนดประเภทของโหนดนี้ หากคุณสมบัติ nodeType ของโหนดเป็น ตัวอย่างเช่น ค่าคงที่ Node.ELEMENT_NODE ดังนั้นอ็อบเจ็กต์ Node ก็เป็นอ็อบเจ็กต์ Element ด้วย และคุณสามารถใช้เมธอดและคุณสมบัติทั้งหมดที่กำหนดโดยอินเทอร์เฟซของ Element ได้

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

เนื้อหาหลักของแผนผัง DOM ประกอบด้วยอ็อบเจ็กต์ Element ที่แสดงแท็ก เช่น และวัตถุข้อความที่แสดงบรรทัดข้อความ หากตัวแยกวิเคราะห์เอกสารเก็บความคิดเห็น ความคิดเห็นเหล่านั้นจะแสดงในแผนผังเป็นออบเจ็กต์ DOM Comment

คุณลักษณะ
แอตทริบิวต์ขององค์ประกอบ (เช่น แอตทริบิวต์ src และ width ของแท็ก ) สามารถอ่าน ตั้งค่า และนำออกได้โดยใช้เมธอด getAttribute (), set-Attribute () และ removeAttribute () ของอินเทอร์เฟซ Element

อีกวิธีที่สะดวกน้อยกว่าในการทำงานกับแอตทริบิวต์คือเมธอด getAttribute-Node () ซึ่งส่งคืนอ็อบเจ็กต์ Attr ที่แสดงถึงแอตทริบิวต์และค่าของแอตทริบิวต์ (เหตุผลประการหนึ่งในการเลือกเทคโนโลยีที่สะดวกน้อยกว่านี้คืออินเทอร์เฟซ Attr มีคุณสมบัติที่ระบุ ซึ่งช่วยให้คุณกำหนดได้ว่าแอตทริบิวต์ที่ระบุมีการระบุอย่างชัดเจนในเอกสารหรือใช้ค่าเริ่มต้นหรือไม่) อย่างไรก็ตาม โปรดทราบว่า ออบเจ็กต์ Attr ไม่มีอยู่ในอาร์เรย์ childNodes ขององค์ประกอบ และไม่ได้เป็นส่วนหนึ่งของแผนผังเอกสารโดยตรง เช่น โหนดองค์ประกอบและข้อความ

ข้อกำหนด DOM อนุญาตให้เข้าถึงโหนด Attr ผ่านอาร์เรย์แอตทริบิวต์ของอินเทอร์เฟซโหนด แต่ Microsoft Internet Explorer กำหนดอาร์เรย์แอตทริบิวต์ที่เข้ากันไม่ได้ที่แตกต่างกัน ซึ่งทำให้ไม่สามารถใช้อาร์เรย์นี้ในลักษณะแบบพกพาได้

DOM HTML API
มาตรฐาน DOM ออกแบบมาเพื่อทำงานกับทั้ง XML และ HTML DOM API พื้นฐาน - Node, Element, Document และอื่นๆ - ค่อนข้างเป็นสากลและใช้ได้กับเอกสารทั้งสองประเภท มาตรฐาน DOM ยังรวมถึงอินเทอร์เฟซเฉพาะสำหรับเอกสาร HTML HTMLDocument เป็นอินเทอร์เฟซย่อยเฉพาะ HTML ของอินเทอร์เฟซเอกสาร และ HTMLElement เป็นอินเทอร์เฟซย่อยเฉพาะ HTML ของอินเทอร์เฟซองค์ประกอบ นอกจากนี้ DOM ยังกำหนดอินเทอร์เฟซสำหรับองค์ประกอบ HTML จำนวนมากที่เกี่ยวข้องกับแท็กเฉพาะ อินเทอร์เฟซเหล่านี้ เช่น HTMLBodyElement และ HTMLTitleElement โดยทั่วไปจะกำหนดชุดของคุณสมบัติที่สะท้อนถึงแอตทริบิวต์ของแท็ก HTML ที่กำหนด อินเทอร์เฟซ HTMLDocument กำหนดคุณสมบัติเอกสารและวิธีการต่างๆ ที่เบราว์เซอร์รองรับก่อนมาตรฐาน W3C ซึ่งรวมถึงคุณสมบัติตำแหน่ง อาร์เรย์ของฟอร์ม และวิธีการเขียน ()

อินเทอร์เฟซ HTMLElement กำหนดคุณสมบัติ id, style, title, lang, dir และ className เพื่อให้เข้าถึงค่าของ id, style, title, lang, dir และ class ได้อย่างสะดวก ซึ่งสามารถนำไปใช้กับแท็ก HTML ทั้งหมดได้

แท็ก HTML ไม่ยอมรับแอตทริบิวต์ใด ๆ นอกเหนือจากหกรายการที่เพิ่งแสดง ดังนั้นจึงสามารถแสดงได้โดยอินเทอร์เฟซ HTMLElement

สำหรับแท็ก HTML อื่นๆ ทั้งหมดในส่วนของข้อกำหนด DOM ที่เกี่ยวข้องกับ
เป็น HTML มีการกำหนดอินเทอร์เฟซพิเศษ สำหรับแท็ก HTML จำนวนมาก
อินเทอร์เฟซเหล่านี้ไม่ได้ทำอะไรมากไปกว่าการจัดหาชุดคุณสมบัติที่สอดคล้องกับแอตทริบิวต์ HTML ตัวอย่างเช่น แท็ก

มีอินเทอร์เฟซ HTMLU ListElement ที่สอดคล้องกัน และสำหรับแท็กจะมีอินเทอร์เฟซ HTMLBodyElement ที่สอดคล้องกัน เนื่องจากอินเทอร์เฟซเหล่านี้กำหนดคุณสมบัติที่เป็นมาตรฐานใน HTML เท่านั้น จึงไม่มีการจัดทำเป็นเอกสารโดยละเอียดในหนังสือเล่มนี้

คุณสามารถสันนิษฐานได้อย่างปลอดภัยว่าออบเจ็กต์ HTMLElement ที่แสดงแท็ก HTML เฉพาะนั้นมีคุณสมบัติสำหรับแอตทริบิวต์มาตรฐานแต่ละรายการของแท็กนั้น (ดูแบบแผนการตั้งชื่อในส่วนถัดไป) โปรดทราบว่ามาตรฐาน DOM กำหนดคุณสมบัติสำหรับแอตทริบิวต์ HTML เพื่อความสะดวกของสคริปต์ วิธีการทั่วไป (และอาจต้องการ) ในการอ่านและตั้งค่าแอตทริบิวต์นั้นมาจากเมธอด getAttribute () และ setAttribute () ของออบเจ็กต์ Element อินเทอร์เฟซบางส่วนที่อธิบายไว้ใน HTML DOM กำหนดคุณสมบัติหรือวิธีการเพิ่มเติมนอกเหนือจากที่สอดคล้องกับค่าแอตทริบิวต์ HTML ตัวอย่างเช่น อินเทอร์เฟซ HTMLInputElement กำหนดวิธีการโฟกัส () และเบลอ () และอินเทอร์เฟซ HTMLFormElement กำหนดวิธีการส่ง () และรีเซ็ต () และคุณสมบัติความยาว วิธีการและคุณสมบัติดังกล่าวมักจะนำเสนอก่อนการกำหนดมาตรฐาน DOM และเป็นส่วนหนึ่งของมาตรฐานสำหรับความเข้ากันได้แบบย้อนหลังกับแนวปฏิบัติด้านการเขียนโปรแกรมที่เป็นที่ยอมรับ อินเทอร์เฟซดังกล่าวได้รับการบันทึกไว้ใน W3C DOM Reference (ตอนที่ V) นอกจากนี้ ข้อมูลเกี่ยวกับส่วน "แนวปฏิบัติที่ดี" ของอินเทอร์เฟซเหล่านี้สามารถพบได้ในส่วนที่ IV การอ้างอิง JavaScript ฝั่งไคลเอ็นต์ แม้ว่าข้อมูลนี้มักจะแสดงอยู่ภายใต้ชื่อที่ใช้ก่อนที่ DOM จะเป็นมาตรฐาน เช่น HTMLFormElement และ HTMLInputElement ใน การอ้างอิง JavaScript ฝั่งไคลเอ็นต์ "อธิบายไว้ในส่วน "แบบฟอร์ม" และ "อินพุต"

หลักการตั้งชื่อ HTML
เมื่อทำงานกับส่วนเฉพาะ HTML ของมาตรฐาน DOM มีหลักการตั้งชื่อง่ายๆ ที่ควรคำนึงถึง ชื่อคุณสมบัติเฉพาะสำหรับอินเทอร์เฟซ HTML ขึ้นต้นด้วยตัวพิมพ์เล็ก หากชื่อคุณสมบัติประกอบด้วยหลายคำ อักษรตัวแรกของคำที่สองและคำที่ตามมาจะเป็นตัวพิมพ์ใหญ่ ดังนั้นแอตทริบิวต์ maxlength ของแท็ก แมปกับคุณสมบัติ maxLength ของอินเทอร์เฟซ HTMLInputElement

เมื่อชื่อแอตทริบิวต์ HTML ขัดแย้งกับ คำสำคัญ JavaScript คำนำหน้า "html" ถูกเพิ่มในชื่อเพื่อแก้ไขข้อขัดแย้ง ตัวอย่างเช่น แอตทริบิวต์ for ของแท็ก แปลเป็นคุณสมบัติของ htmlFor ของอินเทอร์เฟซ HTMLLabelElement ข้อยกเว้นของกฎนี้คือแอตทริบิวต์คลาส (ซึ่งสามารถระบุองค์ประกอบ HTML ใดก็ได้) - มันถูกแปลเป็นคุณสมบัติ className1 ของอินเทอร์เฟซ HTMLElement

ระดับและความสามารถของ DOM
มาตรฐาน DOM มีสองเวอร์ชันหรือ "ระดับ" สองระดับ DOM ระดับ 1 ได้รับมาตรฐานในเดือนตุลาคม 1998 กำหนดอินเทอร์เฟซ DOM พื้นฐาน เช่น Node, Element, Attr และ Document ตลอดจนอินเทอร์เฟซเฉพาะ HTML ต่างๆ DOM ระดับ 2 เป็นมาตรฐานในเดือนพฤศจิกายน 2543 นอกจากการเปลี่ยนแปลงบางอย่างในอินเทอร์เฟซพื้นฐานแล้ว DOM เวอร์ชันนี้ได้รับการปรับปรุงอย่างมากโดยการกำหนด API มาตรฐานสำหรับการทำงานกับเหตุการณ์เอกสารและสไตล์ชีตแบบเรียงซ้อน (CSS) และเพื่อจัดเตรียมเครื่องมือเพิ่มเติมสำหรับ ทำงานกับพื้นที่เอกสารอย่างต่อเนื่อง ในขณะที่เขียนบทความนี้ คณะทำงาน DOM ที่ W3C กำลังสร้างมาตรฐานของ DOM ระดับ 3 นอกจากนี้ คุณอาจเห็นการอ้างอิงถึง DOM ระดับ 0 เป็นครั้งคราว คำนี้ไม่ได้อ้างถึงมาตรฐานที่เป็นทางการใดๆ แต่ใช้อ้างอิงอย่างไม่เป็นทางการถึงระดับทั่วไป สิ่งอำนวยความสะดวกโมเดลวัตถุ เอกสารที่นำมาใช้ใน Netscape และ Internet Explorer ก่อนการกำหนดมาตรฐานโดย W3C ด้วย DOM ระดับ 2 มาตรฐานจะกลายเป็นแบบแยกส่วน โมดูลฐานซึ่งกำหนดโครงสร้างแผนผังพื้นฐานของเอกสารโดยใช้อินเทอร์เฟซ Document, Node, Element และ Next เป็นโมดูลเดียวที่จำเป็น โมดูลอื่นๆ ทั้งหมดเป็นทางเลือกและอาจได้รับการสนับสนุนหรือไม่ก็ได้ ทั้งนี้ขึ้นอยู่กับการใช้งาน การติดตั้ง DOM ในเว็บเบราว์เซอร์จำเป็นต้องสนับสนุนโมดูล HTML เนื่องจากเอกสารบนเว็บเขียนด้วย HTML เบราว์เซอร์ที่สนับสนุนสไตล์ชีต CSS มักจะสนับสนุนสไตล์ชีตและโมดูล CSS เนื่องจากสไตล์ CSS มีบทบาทสำคัญในการเขียนโปรแกรม HTML แบบไดนามิก ในทำนองเดียวกัน เนื่องจากโปรแกรม JavaScript ที่น่าสนใจส่วนใหญ่ต้องการการจัดการเหตุการณ์ คุณอาจคาดหวังให้เว็บเบราว์เซอร์ของคุณสนับสนุนโมดูลเหตุการณ์สำหรับข้อกำหนด DOM

ขออภัย โมดูลเหตุการณ์เพิ่งกำหนดโดยข้อกำหนด DOM ระดับ 2 และไม่ได้รับการสนับสนุนอย่างกว้างขวางในขณะที่เขียนบทความนี้

การปฏิบัติตาม DOM
ในขณะที่เขียนบทความนี้ ไม่มีเบราว์เซอร์ที่เข้ากันได้กับ DOM อย่างสมบูรณ์ Mozilla เวอร์ชันล่าสุดนั้นใกล้เคียงที่สุด และความเข้ากันได้ของ DOM ระดับ 2 แบบเต็มคือเป้าหมายของโครงการ Mozilla เบราว์เซอร์ Netscape 6.1 สอดคล้องกับโมดูลระดับ 2 ที่สำคัญส่วนใหญ่ และ Netscape 6.0 เข้ากันได้ค่อนข้างดี แต่มีช่องว่างอยู่บ้าง Internrt Explorer 6 ส่วนใหญ่เข้ากันได้กับ DOM ระดับ 1 (มีข้อยกเว้นที่น่ารังเกียจอย่างน้อยหนึ่งรายการ) แต่ไม่รองรับโมดูลระดับ 2 จำนวนมาก โดยเฉพาะโมดูลเหตุการณ์ Internet Explorer 5 และ 5.5 มีช่องว่างความเข้ากันได้ที่สำคัญ แต่สนับสนุนวิธีคีย์ DOM ระดับ 1 ได้ดีพอที่จะเรียกใช้ตัวอย่างส่วนใหญ่ในบทนี้ IE เวอร์ชัน Macintosh มีการรองรับ DOM ที่สมบูรณ์มากกว่า IE 5 สำหรับ Windows นอกจาก Mozilla, Netscape, Internet Explorer และเบราว์เซอร์อื่นๆ อีกหลายๆ ตัวยังสนับสนุน DOM บางส่วนเป็นอย่างน้อย จำนวนของเบราว์เซอร์ที่พร้อมใช้งานมีมากเกินไป และการเปลี่ยนแปลงในการสนับสนุนมาตรฐานก็เกิดขึ้นเร็วเกินไป แม้กระทั่งพยายามในหนังสือเล่มนี้เพื่อยืนยันว่าเบราว์เซอร์บางตัวรองรับ DOM ใด ดังนั้น คุณจะต้องพึ่งพาแหล่งข้อมูลอื่นเพื่อกำหนดความเข้ากันได้ของการใช้งาน DOM ในเบราว์เซอร์ที่กำหนด แหล่งข้อมูลความเข้ากันได้แหล่งหนึ่งคือการนำไปปฏิบัติเอง ในการใช้งานที่เข้ากันได้ คุณสมบัติการใช้งานของวัตถุเอกสารอ้างอิงถึงวัตถุ DOMImplementation ซึ่งกำหนดวิธีการที่เรียกว่า hasFeature () เมื่อใช้วิธีนี้ (ถ้ามี) คุณจะได้รับข้อมูลเกี่ยวกับความพร้อมใช้งานของการสนับสนุนสำหรับโมดูลเฉพาะ (หรือความสามารถ) ของมาตรฐาน DOM ตัวอย่างเช่น ในการพิจารณาว่าการใช้งาน DOM ของเว็บเบราว์เซอร์สนับสนุนอินเทอร์เฟซ DOM ระดับ 1 พื้นฐานสำหรับการทำงานกับเอกสาร HTML หรือไม่ ให้ใช้รหัสต่อไปนี้:

ถ้า (document.implementation &&
document.implementation.hasFeature &&
document.implementation.hasFeature ("html", "1.0")) (
// เบราว์เซอร์ประกาศรองรับอินเทอร์เฟซพื้นฐานระดับ 1
// และอินเทอร์เฟซ HTML
}

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

ตัวอย่างเช่น หาก hasFeature () ระบุว่ารองรับโมดูล MouseEvents แสดงว่ารองรับโมดูล UIEvents ด้วยเช่นกัน ซึ่งหมายถึงการรองรับโมดูลเหตุการณ์ มุมมอง และโมดูลหลัก ใน Internet Explorer 6 (บน Windows) hasFeature ( ) คืนค่า true เฉพาะสำหรับโมดูล "HTML" และเวอร์ชัน "1.0" ไม่รายงานความเข้ากันได้กับโมดูลอื่น ๆ

ใน Netscape 6.1 hasFeature () คืนค่า true สำหรับชื่อโมดูลและหมายเลขเวอร์ชันส่วนใหญ่ ยกเว้นโมดูล Traversal และ Mutation-Events เมธอดนี้คืนค่าเท็จสำหรับโมดูล Core และ CSS2 เวอร์ชัน 2.0 ซึ่งบ่งชี้ถึงความเข้ากันได้ที่ไม่สมบูรณ์ (แม้ว่าการรองรับโมดูลเหล่านี้จะดีมาก)

หนังสือเล่มนี้จัดทำเอกสารอินเทอร์เฟซที่ประกอบเป็นโมดูล DOM ทั้งหมด โมดูล Core, HTML, Traversal และ Range ครอบคลุมอยู่ในบทนี้ โมดูลสไตล์ชีต CSS และ CSS2 ครอบคลุมในบทที่ 18 และโมดูลที่เกี่ยวข้องกับเหตุการณ์ต่างๆ (ยกเว้น MutationEvents) จะครอบคลุมอยู่ในบทที่ 19 ส่วนที่ V ข้อมูลอ้างอิง W3C DOM ประกอบด้วย คำอธิบายแบบเต็มโมดูลทั้งหมด

hasFeature () วิธีการไม่น่าเชื่อถืออย่างสมบูรณ์ ดังที่กล่าวไว้ข้างต้น IE 6 จะรายงานความเข้ากันได้ระดับ 1 กับคุณลักษณะ HTML แม้ว่าจะมีปัญหาบางอย่างเกี่ยวกับความเข้ากันได้นั้นก็ตาม ในทางกลับกัน Netscape 6.1 รายงานความไม่เข้ากันกับระดับ 2 Core แม้ว่าเบราว์เซอร์นี้จะเข้ากันได้กับโมดูลนี้เกือบ ในทั้งสองกรณี คุณต้องการข้อมูลโดยละเอียดเพิ่มเติมเกี่ยวกับสิ่งที่เข้ากันได้และสิ่งที่ไม่เข้ากัน แต่ปริมาณข้อมูลนี้มีขนาดใหญ่เกินไปและมีความผันผวนเกินกว่าจะรวมไว้ในฉบับพิมพ์ได้

ผู้ที่มีส่วนร่วมในการพัฒนาเว็บจะทราบดีอยู่แล้วหรือจะทราบรายละเอียดเกี่ยวกับความเข้ากันได้ของเบราว์เซอร์โดยเฉพาะในเร็วๆ นี้ นอกจากนี้ยังมีแหล่งข้อมูลบนอินเทอร์เน็ตที่คุณอาจพบว่ามีประโยชน์ สิ่งสำคัญที่สุดคือ W3C (โดยความร่วมมือกับสถาบันมาตรฐานและเทคโนโลยีแห่งชาติของสหรัฐอเมริกา) กำลังทำงานเพื่อสร้างชุดโอเพ่นซอร์สสำหรับการทดสอบการใช้งาน DOM บน
ในขณะที่เขียนบทความนี้ การพัฒนาชุดทดสอบเพิ่งเริ่มต้น แต่ควรเป็นเครื่องมือที่ทรงคุณค่าสำหรับการปรับแต่งความเข้ากันได้ของการใช้งาน DOM สามารถดูรายละเอียดได้ที่ http://www.w3c.org/DOM/Test/

Mozilla มีชุดทดสอบหลายชุดสำหรับมาตรฐานต่างๆ รวมถึง DOM ระดับ 1 (มีให้ที่ http://www.mozilla.org/qualitybrowser_sc.html) Netscape ได้เผยแพร่ชุดทดสอบที่มีการทดสอบ DOM ระดับ 2 บางส่วน (มีให้ที่ http://developer.netscape.com/evangelism/tools/testsuites/) Netscape ยังโพสต์การเปรียบเทียบความเอนเอียง (และล้าสมัย) ของความเข้ากันได้ของ DOM ระหว่าง Mozilla รุ่นแรกและ IE 5.5 (มีให้ที่ http://home.netscape.com/browsers/future/standards.html) สุดท้าย คุณยังสามารถค้นหาข้อมูลความเข้ากันได้และการปฏิบัติตามข้อกำหนดได้บนไซต์อิสระบนอินเทอร์เน็ต หนึ่งในเว็บไซต์ที่ควรค่าแก่การกล่าวถึงคือเผยแพร่โดย Peter-Paul Koch ลิงก์ไปยังตารางความเข้ากันได้ของ DOM อยู่ที่ หน้าแรกทุ่มเทให้กับ JavaScript (http://www.xs4all.nl/~ppk/js/)

ความเข้ากันได้ของ DOM ใน Internet Explorer
เนื่องจาก IE เป็นเว็บเบราว์เซอร์ที่ใช้กันอย่างแพร่หลาย จึงมีข้อสังเกตพิเศษบางประการเกี่ยวกับความเข้ากันได้กับข้อกำหนดของ DOM IE 5 และใหม่กว่าสนับสนุนเครื่องมือพื้นฐานและ HTML ระดับ 1 ได้ดีพอที่จะเรียกใช้ตัวอย่างในบทนี้ และสนับสนุนคุณลักษณะ CSS ระดับ 2 ที่สำคัญมากพอที่จะเรียกใช้ตัวอย่างส่วนใหญ่8 น่าเสียดายที่ IE 5, 5.5 และ 6 ไม่สนับสนุนโมดูล DOM Level 2 Events แม้ว่า Microsoft จะมีส่วนร่วมในการกำหนดโมดูลและมีเวลาเพียงพอที่จะนำไปใช้ใน IE 6 ดังที่เราเห็นในบทที่ 19 การจัดการเหตุการณ์จะดำเนินไป บทบาทสำคัญใน Java Script ฝั่งไคลเอ็นต์ และ IE ที่ไม่ได้รับการสนับสนุนสำหรับโมเดลการจัดการเหตุการณ์มาตรฐานทำให้ยากต่อการพัฒนาเว็บแอปพลิเคชันฝั่งไคลเอ็นต์ที่สมบูรณ์ ในขณะที่ IE 6 อ้างว่า (ผ่านวิธี hasFeature ()) เพื่อรองรับอินเทอร์เฟซพื้นฐานและ HTML ของ DOM ระดับ 1 การสนับสนุนนี้ยังไม่สมบูรณ์ ปัญหาร้ายแรงที่สุดที่คุณน่าจะพบเจอคือปัญหาเล็กๆ แต่น่ารำคาญ: IE ไม่รองรับค่าคงที่สำหรับประเภทโหนดที่กำหนดไว้ใน Node โปรดจำไว้ว่าทุกโหนดในเอกสารมีคุณสมบัติ nodeType ที่ระบุประเภทของโหนดนั้น ข้อกำหนด DOM ยังระบุด้วยว่าอินเทอร์เฟซของโหนดกำหนดค่าคงที่ที่แสดงถึงแต่ละประเภทโหนดที่กำหนด ตัวอย่างเช่น ค่าคงที่ Node.ELEMENT_NODE แทนโหนดองค์ประกอบ ใน IE (มากถึงและรวมถึงเวอร์ชัน 6 เป็นอย่างน้อย) ค่าคงที่เหล่านี้ไม่มีอยู่จริง

ตัวอย่างในบทนี้ได้รับการแก้ไขเพื่อแก้ไขสิ่งกีดขวางนี้และประกอบด้วยตัวอักษรจำนวนเต็มแทนที่ค่าคงที่เชิงสัญลักษณ์ที่เกี่ยวข้อง

ตัวอย่างเช่น:
ถ้า (n.nodeType == 1 /*Node.ELEMENT_NODE*/)
// ตรวจสอบว่า n เป็นอ็อบเจกต์ธาตุ

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

ถ้า (! Window.Node) (
var Node = (// หากไม่มีวัตถุ Node ให้นิยาม
ELEMENT_NODE: 1, // มีคุณสมบัติและค่าต่อไปนี้
ATTRIBUTE_NODE: 2, // โปรดทราบว่านี่เป็นประเภทโหนดเท่านั้น
TEXT_NODE: 3, // HTML สำหรับโหนด XML คุณต้องกำหนด
COMMENT_NODE: 8, // ค่าคงที่อื่นๆ ที่นี่
DOCUMENT_NODE: 9,
DOCUMENT_FRAGMENT_NODE: 11
}
}

อินเทอร์เฟซ DOM อิสระของภาษา
แม้ว่า DOM จะเกิดขึ้นเนื่องจากความต้องการ API ทั่วไปสำหรับการเขียนโปรแกรม HTML แบบไดนามิก แต่ DOM ไม่ได้เป็นเพียงความสนใจสำหรับโปรแกรมเมอร์เว็บเท่านั้น อันที่จริง ปัจจุบันมาตรฐานนี้เป็นโปรแกรมเซิร์ฟเวอร์ Java และ C ++ ที่ใช้อย่างหนักที่สุดในการแยกวิเคราะห์และจัดการเอกสาร XML เนื่องจากมีหลายกรณีการใช้งาน มาตรฐาน DOM จึงถูกกำหนดเป็นภาษาที่ไม่ขึ้นกับภาษา หนังสือเล่มนี้อธิบายวิธีผูก DOM API กับ JavaScript เท่านั้น แต่มีสิ่งอื่นที่ควรคำนึงถึง ประการแรก สังเกตว่าคุณสมบัติของวัตถุเมื่อผูกมัดใน JavaScript มักจะสอดคล้องกับคู่ของวิธีรับ / ตั้งค่าเมื่อผูกมัดในภาษาอื่น ดังนั้น เมื่อโปรแกรมเมอร์ Java ถามคุณเกี่ยวกับเมธอด getFirstChild () ของอินเทอร์เฟซ Node ให้เข้าใจว่าใน JavaScript การโยง Node API ไม่ได้กำหนดเมธอด getFirst-Child () แต่จะกำหนดคุณสมบัติ firstChild แทน และการอ่านคุณสมบัตินี้ใน JavaScript จะเทียบเท่ากับการเรียกเมธอด getFirstChild () ใน Java คุณสมบัติที่สำคัญอีกประการของการเชื่อมโยง DOM API กับ JavaScript คือวัตถุ DOM บางตัวทำงานเหมือนอาร์เรย์ JavaScript หากอินเทอร์เฟซกำหนดวิธีการที่ชื่อ item () อ็อบเจ็กต์ที่ใช้อินเทอร์เฟซนั้นจะทำงานเหมือนกับอาร์เรย์ดัชนีตัวเลขแบบอ่านอย่างเดียว สมมติว่าการอ่านคุณสมบัติ childNodes ของโหนดทำให้ได้ NodeList สามารถรับอ็อบเจ็กต์โหนดแต่ละรายการจากรายการได้ ประการแรก โดยการส่งหมายเลขโหนดที่ต้องการไปยังเมธอด item () และประการที่สอง โดยถือว่าอ็อบเจ็กต์ NodeList เป็นอาร์เรย์และอ้างอิงโดยดัชนี รหัสต่อไปนี้แสดงให้เห็นถึงความเป็นไปได้สองประการเหล่านี้:

Var n = document.documentElement; // นี่คือวัตถุโหนด
var children = n.childNodes; // นี่คือวัตถุ NodeList
var head = children.item (0); //นี่คือทางเดียว
// ใช้ NodeList
var body = เด็ก; // แต่มีวิธีที่ง่ายกว่านั้น!

ในทำนองเดียวกัน หากวัตถุ DOM มีเมธอด namedItem () การส่งสตริงไปยังเมธอดนั้นเหมือนกับการใช้สตริงเป็นดัชนีอาร์เรย์ ตัวอย่างเช่น บรรทัดของรหัสต่อไปนี้แสดงวิธีที่เทียบเท่าในการเข้าถึงองค์ประกอบของแบบฟอร์ม:

Var f = document.forms.namedItem ("myform");
var g = document.forms ["myform"];
var h = document.forms.myform;

มาตรฐาน DOM สามารถใช้ได้หลายวิธี ดังนั้นนักพัฒนามาตรฐานจึงกำหนด DOM API อย่างระมัดระวังในลักษณะที่ไม่จำกัดความสามารถของนักพัฒนารายอื่นในการนำ API ไปใช้ โดยเฉพาะอย่างยิ่ง มาตรฐาน DOM กำหนดอินเทอร์เฟซแทนคลาส ในการเขียนโปรแกรมเชิงวัตถุ คลาสเป็นชนิดข้อมูลคงที่ที่ต้องดำเนินการตามที่กำหนดไว้ ในทางกลับกัน อินเทอร์เฟซคือชุดของวิธีการและคุณสมบัติที่ต้องใช้งานร่วมกัน ดังนั้น การนำ DOM ไปใช้สามารถกำหนดคลาสใดๆ ที่เห็นสมควร แต่คลาสเหล่านั้นต้องกำหนดวิธีการและคุณสมบัติสำหรับอินเทอร์เฟซ DOM ต่างๆ สถาปัตยกรรมนี้มีนัยสำคัญสองสามประการ ประการแรก ชื่อคลาสที่ใช้ในการดำเนินการอาจไม่ตรงโดยตรงกับชื่ออินเทอร์เฟซที่ใช้ในมาตรฐาน DOM (และในหนังสือเล่มนี้) ประการที่สอง คลาสหนึ่งสามารถใช้อินเทอร์เฟซได้มากกว่าหนึ่งอินเทอร์เฟซ พิจารณาตัวอย่างเช่นวัตถุเอกสาร วัตถุนี้เป็นตัวอย่างของคลาสบางคลาสที่กำหนดโดยการใช้งานเว็บเบราว์เซอร์ เราไม่ทราบว่าเป็นคลาสใด แต่เรารู้ว่ามันใช้อินเทอร์เฟซเอกสาร นั่นคือ วิธีการและคุณสมบัติทั้งหมดที่กำหนดโดยส่วนต่อประสานเอกสารนั้นมีให้เราใช้ผ่านวัตถุเอกสาร เนื่องจากเว็บเบราว์เซอร์ทำงานกับเอกสาร HTML เราจึงทราบด้วยว่าวัตถุเอกสารใช้อินเทอร์เฟซ
HTMLDocument และเราสามารถเข้าถึงวิธีการและคุณสมบัติทั้งหมดที่กำหนดโดยอินเทอร์เฟซนี้ นอกจากนี้ หากเว็บเบราว์เซอร์สนับสนุนสไตล์ชีต CSS และใช้โมดูล CSS DOM ออบเจ็กต์ Document จะใช้อินเทอร์เฟซ DocumentStyle และ DocumentCSS DOM และในขณะที่เว็บเบราว์เซอร์สนับสนุนโมดูลเหตุการณ์และมุมมอง Document ยังใช้อินเทอร์เฟซ DocumentEvent และ DocumentView

DOM ถูกแบ่งออกเป็นโมดูลอิสระ ดังนั้นจึงกำหนดอินเทอร์เฟซรองเพิ่มเติมหลายอย่าง เช่น Docu-mentStyle, DocumentEvent และ DocumentView ซึ่งแต่ละส่วนกำหนดเพียงหนึ่งหรือสองเมธอด อินเทอร์เฟซเช่นนี้ไม่เคยใช้งานโดยอิสระจากอินเทอร์เฟซเอกสารพื้นฐาน และด้วยเหตุนี้ ฉันไม่ได้อธิบายแยกจากกัน เมื่อคุณอ่านคำอธิบายของอินเทอร์เฟซของเอกสารในการอ้างอิง W3C DOM คุณจะพบว่ายังแสดงรายการวิธีการและคุณสมบัติของอินเทอร์เฟซเพิ่มเติมต่างๆ ในทำนองเดียวกัน เมื่อดูที่คำอธิบายของอินเทอร์เฟซเพิ่มเติม คุณจะพบการอ้างอิงโยงไปยังอินเทอร์เฟซพื้นฐานที่เกี่ยวข้องกัน ข้อยกเว้นสำหรับกฎนี้คือเมื่ออินเทอร์เฟซเพิ่มเติมมีความซับซ้อน ตัวอย่างเช่น อินเทอร์เฟซ HTMLDocument มักจะถูกใช้งานโดยวัตถุเดียวกันกับที่ใช้ส่วนต่อประสานเอกสาร แต่เนื่องจาก HTMLDocument
เพิ่มฟังก์ชันการทำงานใหม่จำนวนมาก ฉันให้หน้าความช่วยเหลือแยกต่างหาก

สิ่งสำคัญคือต้องเข้าใจด้วยว่าเนื่องจากมาตรฐาน DOM กำหนดอินเทอร์เฟซ ไม่ใช่คลาส จึงไม่กำหนดเมธอดของคอนสตรัคเตอร์ ตัวอย่างเช่น หากคุณต้องการสร้าง วัตถุใหม่ข้อความที่จะแทรกลงในเอกสารแล้วคุณไม่สามารถเขียนได้:

Var t = ข้อความใหม่ ("นี่คือโหนดข้อความใหม่"); // ไม่มีตัวสร้างดังกล่าว!

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

Var t = document.createTextNode ("นี่คือโหนดข้อความใหม่");

วิธีการจากโรงงานที่กำหนดไว้ใน DOM มีชื่อที่ขึ้นต้นด้วยคำว่า "สร้าง" นอกเหนือจากวิธีการจากโรงงานที่กำหนดโดยส่วนต่อประสานเอกสารแล้ว วิธีการดังกล่าวหลายวิธีถูกกำหนดโดยอินเทอร์เฟซ DOMI และพร้อมใช้งานผ่าน document.implementation

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

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

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

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

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

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

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

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

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

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

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

ตารางที่ 4.1. โครงสร้างแผนผังเอกสาร

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

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

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

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

สำหรับวัตถุประสงค์ของภาษาและความเป็นอิสระของแพลตฟอร์ม DOM กำหนดประเภทต่อไปนี้:

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

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

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

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

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

ตารางที่ 4.2. ข้อยกเว้น DOM มาตรฐาน

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

สนับสนุน: การใช้งานที่ไม่ได้มาตรฐาน รหัสข้อผิดพลาดบางส่วนได้รับการสนับสนุน

4.2.4. คำอธิบายการใช้งาน: DOMIอินเทอร์เฟซการใช้งาน

สนับสนุน: สำหรับเอกสาร XML เท่านั้น (XMLDOMImplementation) สอดคล้องกับ DOM 1

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

เมธอด CreateCSSStyleSheet

ไวยากรณ์ : วัตถุ.createCSSStyleSheet (ชื่อเรื่อง สื่อ) ข้อโต้แย้ง: ชื่อสื่อ - สำนวนเช่น ผลลัพธ์: วัตถุ CSSStyleSheet ใหม่ ข้อยกเว้น: SYNTAX_ERR สนับสนุน

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

เมธอด CreateDocument

ไวยากรณ์ : วัตถุ.createDocument (namespaceURI, ชื่อคุณสมบัติ, doctype) ข้อโต้แย้ง: namespaceURI,QualifiedName - นิพจน์ doctype - DocumentType expression ผลลัพธ์: วัตถุใหม่ ข้อยกเว้น: INVALID_CHARACTER_ERR, NAMESPACE_ERR, WRONG_DOCUMENT_ERR สนับสนุน: ไม่รองรับ ไม่รองรับ

วิธี createDocumentสร้างวัตถุใหม่และส่งคืนตัวชี้ไปที่วัตถุนั้น มีไว้สำหรับการสร้างเอกสาร XML และอาจไม่ได้รับการสนับสนุนสำหรับเอกสาร HTML NamespaceURI ระบุ URI เนมสเปซขององค์ประกอบรูทของเอกสาร คุณสมบัติคือชื่อที่ผ่านการรับรอง และ doctype คือประเภทของเอกสารที่จะสร้าง (สามารถ โมฆะ).

เมธอด CreateDocumentType

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

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

วิธี HasFeature

ไวยากรณ์ : วัตถุ.hasFeature (คุณลักษณะ เวอร์ชัน) ข้อโต้แย้ง: คุณสมบัติ รุ่น - สำนวนเช่น ผลลัพธ์: บูลีน ข้อยกเว้น: เลขที่ สนับสนุน

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

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

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

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

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

Var objDoc = ActiveXObject ใหม่ ("Microsoft.XMLDOM"); การแจ้งเตือน (objDoc.implementation.hasFeature ("XML", "1.0")); การแจ้งเตือน (objDoc.implementation.hasFeature ("XML", "2.0"));

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

4.2.5. Document Fragment: ส่วนต่อประสาน DocumentFragment

สนับสนุน: สำหรับเอกสาร XML เท่านั้น (XMLDOMDocumentFragment) สอดคล้องกับ DOM 1

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

4.2.6. เอกสาร: ส่วนต่อประสานเอกสาร

สนับสนุน: รองรับเอกสาร XML (XMLDOMDocument); รองรับบางส่วนสำหรับเอกสาร HTML DOM 1 ทั้งหมด DOM 2 บางส่วน

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

วิธีการเชื่อมต่อเอกสาร

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

คุณสมบัติประเภทเอกสาร

ไวยากรณ์ : เอกสาร.doctype ปรับเปลี่ยนได้: เลขที่ สนับสนุน

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

เอกสารคุณสมบัติองค์ประกอบ

ไวยากรณ์ : เอกสาร.documentElement ปรับเปลี่ยนได้: เลขที่ สนับสนุน: เป็นไปตามมาตรฐาน เป็นไปตามมาตรฐาน

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

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

จะแสดงสตริงของ HTML

คุณสมบัติการดำเนินการ

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

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

คุณสมบัติสไตล์ชีต

ไวยากรณ์ : เอกสาร.styleชีต ปรับเปลี่ยนได้: เลขที่ สนับสนุน: สำหรับเอกสาร HTML เท่านั้น เป็นไปตามมาตรฐาน

คุณสมบัติ สไตล์ชีตส่งคืนวัตถุประเภท StyleSheetList ที่สอดคล้องกับรายการสไตล์ชีตภายนอกและภายในของเอกสาร คุณสมบัตินี้รองรับเฉพาะการใช้งาน DOM ที่รองรับสไตล์ชีตแบบไดนามิก

เมธอด CreateAttribute

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

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

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

Var myDiv = document.getElementById ("idDiv"); var attr = document.createAttribute ("ชั่วคราว"); attr.value = "(! LANG: ชั่วคราว"; myDiv.setAttributeNode(attr); alert(myDiv.getAttribute("temp"));!}

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

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

Var xmlDoc = ActiveXObject ใหม่ ("Microsoft.XMLDOM"); xmlDoc.async = เท็จ; xmlDoc.load ("c: \ My Documents \ books.xml"); var root = xmlDoc.documentElement; var newAttr = xmlDoc.createAttribute ("ชั่วคราว"); newAttr.value = "(! LANG: ชั่วคราว"; root.setAttributeNode(attr); alert(root.getAttribute("temp"));!}

ที่นี่ข้อความแจ้งเตือนจะส่งออกสตริงชั่วคราวด้วย

CreateAttributeNS method

ไวยากรณ์ : เอกสาร.createAttributeNS (เนมสเปซURI, ชื่อคุณสมบัติ) ข้อโต้แย้ง: เนมสเปซURI คุณสมบัติชื่อ - ประเภทนิพจน์ ผลลัพธ์: วัตถุ Attr ใหม่ ข้อยกเว้น: INVALID_CHARACTER_ERR, NAMESPACE_ERR สนับสนุน: ไม่รองรับ ไม่รองรับ

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

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

CreateCDATAวิธีส่วน

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

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

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

วิธีการสร้างความคิดเห็น

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

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

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

CreateDocumentFragment method

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

วิธี createDocumentFragmentสร้างวัตถุว่างประเภทใหม่และส่งคืนตัวชี้ไปที่วัตถุนั้น ตัวอย่างการสร้างแฟรกเมนต์เอกสารใน Gecko:

Var elem = document.documentElement.firstChild; var o = document.createDocumentFragment (); elem.appendChild (o);

เมธอด CreateElement

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

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

หมายเหตุ (แก้ไข):

1. สำหรับ XML ชื่อแท็กองค์ประกอบจะคำนึงถึงขนาดตัวพิมพ์ สำหรับ HTML สามารถระบุได้ในทุกกรณี แต่จะถูกแปลงเป็นตัวพิมพ์ใหญ่เมื่อสร้างองค์ประกอบ
2. กำลังพยายามสร้างรายการใน Internet Explorer กรอบหรือ ไอเฟรมส่งผลให้เกิดข้อผิดพลาดร้ายแรงของเบราว์เซอร์หรืออย่างน้อยทำลายโครงสร้างอ็อบเจ็กต์เอกสารทั้งหมด

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

ต้นไม้เป็นหนึ่งในโครงสร้างข้อมูลที่ใช้บ่อยที่สุดในการพัฒนาเว็บ นักพัฒนาเว็บทุกคนที่เขียนโค้ด HTML และโหลดลงในเบราว์เซอร์จะสร้างแผนผังที่เรียกว่า Document Object Model (DOM)

ตัวอย่างเช่น บทความที่คุณกำลังอ่านอยู่จะแสดงในเบราว์เซอร์เป็นแผนผัง ย่อหน้าแสดงเป็นองค์ประกอบ

; องค์ประกอบ

ซ้อนอยู่ในองค์ประกอบ ; NS ซ้อนอยู่ในองค์ประกอบ .

การทำรังข้อมูลเป็นเหมือนแผนภูมิต้นไม้ครอบครัว ธาตุ เป็นผู้ปกครอง เป็นลูกของมันและองค์ประกอบ<р>เป็นลูกขององค์ประกอบ .

ในบทความนี้ เราใช้วิธีการสำรวจต้นไม้สองวิธีที่แตกต่างกัน: การค้นหาเชิงลึกเป็นอันดับแรก ( DFS) และการค้นหาแบบกว้างก่อน ( Bfs). การข้ามผ่านทั้งสองประเภทนี้บ่งบอกถึงวิธีการโต้ตอบกับแผนผังที่แตกต่างกัน และรวมถึงการใช้โครงสร้างข้อมูลที่เราได้กล่าวถึงในบทความชุดนี้ DFS ใช้สแต็กและ BFS ใช้คิว

ทรี (การค้นหาเชิงลึกและการค้นหาแบบกว้างก่อน)

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

มาเปรียบเทียบต้นไม้กับโครงสร้างองค์กรกัน โครงสร้างนี้มีตำแหน่งระดับบนสุด (โหนดราก) เช่น CEO ด้านล่างตำแหน่งนี้มีตำแหน่งอื่นๆ เช่น Vice President ( VP).

เราใช้ลูกศรที่ชี้จาก CEO ถึง VP เพื่อเป็นตัวแทนของสายการรายงาน ตำแหน่งเช่น CEO เป็นโหนด ลิงก์ที่เราดึงมาจาก CEO ถึง VP เป็นตัวชี้ เพื่อสร้างลิงก์อื่นๆ ในโครงสร้างองค์กรของเรา เราทำซ้ำขั้นตอนนี้ - เพิ่มตัวชี้ไปยังโหนดอื่น

มาดู DOM กัน DOM มีองค์ประกอบ ซึ่งเป็นองค์ประกอบระดับบนสุด (โหนดรูท) โหนดนี้ชี้ไปที่องค์ประกอบ และ ... กระบวนการนี้ทำซ้ำสำหรับโหนดทั้งหมดใน DOM

ข้อดีอย่างหนึ่งของการออกแบบนี้คือความสามารถในการซ้อนโหนด: องค์ประกอบ

ตัวอย่างเช่น สามารถประกอบด้วยหลายองค์ประกอบ
• ซ้อนอยู่ในนั้น นอกจากนี้แต่ละองค์ประกอบ
• อาจมีโหนด
• ระดับเดียวกัน

  การดำเนินงานของต้นไม้

  ต้นไม้ใดๆ มีโหนด ซึ่งสามารถเป็นตัวสร้างต้นไม้แยกกันได้ และเราจะกำหนดการดำเนินการสำหรับทั้งตัวสร้างโหนดและตัวสร้างต้นไม้

  โหนด

  • ข้อมูล - ค่าถูกเก็บไว้ที่นี่
  • parent - ชี้ไปที่องค์ประกอบหลักของโหนด;
  • ลูก - ชี้ไปที่โหนดถัดไปในรายการ

  ต้นไม้

  • _root - ชี้ไปที่โหนดรูทของต้นไม้
  • traverseDF (โทรกลับ)- สำรวจโหนดของต้นไม้โดยใช้วิธี DFS
  • traverseBF (เรียกกลับ) - สำรวจโหนดทรีโดยใช้วิธี BFS
  • มี (ข้อมูล, การข้ามผ่าน) - ค้นหาโหนดทรี;
  • เพิ่ม (data, toData, traverse) - เพิ่มโหนดให้กับทรี
  • ลบ (ลูก, พาเรนต์) - ลบโหนดทรี

  ปลูกต้นไม้

  ทีนี้มาเขียนโค้ดต้นไม้กัน

  คุณสมบัติของโหนด

  ในการใช้งาน ก่อนอื่นเราจะกำหนดฟังก์ชันที่ชื่อ Node และจากนั้นตัวสร้างชื่อ Tree:

  ฟังก์ชัน Node (data) (this.data = data; this.parent = null; this.children =;)

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

  คุณสมบัติของต้นไม้

  มากำหนดคอนสตรัคเตอร์ของเราสำหรับ Tree ซึ่งมี Node constructor อยู่ในเนื้อความ:

  ฟังก์ชัน Tree (data) (var node = new Node (data); this._root = node;)

  ต้นไม้มีรหัสสองบรรทัด บรรทัดแรกสร้างอินสแตนซ์ใหม่ของโหนด บรรทัดที่สองกำหนดโหนดเป็นองค์ประกอบรากของต้นไม้

  ใช้โค้ดเพียงไม่กี่บรรทัดเพื่อกำหนด Tree และ Node แต่นั่นก็เพียงพอแล้วที่จะช่วยให้เรากำหนดข้อมูลแบบลำดับชั้นได้ เพื่อพิสูจน์สิ่งนี้ ลองใช้ตัวอย่างสองสามตัวอย่างเพื่อสร้างอินสแตนซ์ทรี:

  var tree = ต้นไม้ใหม่ ("CEO"); // (ข้อมูล: "CEO", parent: null, children :) tree._root;

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

  วิธีต้นไม้

  เราจะสร้างห้าวิธีต่อไปนี้:

  • traverseDF (โทรกลับ);
  • traverseBF (โทรกลับ);
  • ประกอบด้วย (ข้อมูล, การข้ามผ่าน);
  • เพิ่ม (ลูก, ผู้ปกครอง);
  • ลบ (โหนด, พาเรนต์)

  เนื่องจากแต่ละเมธอดต้องการการข้ามผ่านต้นไม้ ขั้นแรกเราจะใช้เมธอดที่กำหนดประเภทการข้ามผ่านของต้นไม้

  TraverseDF (โทรกลับ) วิธี

  วิธีการสำรวจต้นไม้โดยใช้การค้นหาเชิงลึกเป็นอันดับแรก:

  Tree.prototype.traverseDF = ฟังก์ชัน (เรียกกลับ) (// นี่คือฟังก์ชันเรียกซ้ำและเรียกทันที (ฟังก์ชันเรียกซ้ำ (currentNode) (// ขั้นตอนที่ 2 สำหรับ (var i = 0, length = currentNode.children.length; i< length; i++) { // шаг 3 recurse(currentNode.children[i]); } // шаг 4 callback(currentNode); // шаг 1 })(this._root); };

  traverseDF (โทรกลับ) มีพารามิเตอร์ที่มีชื่อของการโทรกลับ (callback) เป็นฟังก์ชันที่จะเรียกในภายหลังใน traverseDF (callback)

  เนื้อหาของ traverseDF (callback) มีฟังก์ชันอื่นที่เรียกว่า recurse นี่คือฟังก์ชันเรียกซ้ำแบบอ้างอิงตัวเองที่สิ้นสุดโดยอัตโนมัติ การใช้ขั้นตอนที่อธิบายไว้ในความคิดเห็นสำหรับฟังก์ชันเรียกซ้ำ ฉันจะอธิบายกระบวนการทั้งหมดที่ใช้การเรียกซ้ำเพื่อสำรวจต้นไม้ทั้งหมด

  นี่คือขั้นตอน:

  • เราเรียกการเรียกซ้ำกับโหนดรูทของต้นไม้เป็นอาร์กิวเมนต์ ปัจจุบัน currentNode ชี้ไปที่โหนดปัจจุบัน
  • เราเข้าสู่ for loop และทำซ้ำหนึ่งครั้งสำหรับแต่ละโหนดย่อยสำหรับ currentNode โดยเริ่มจากโหนดแรก
  • ภายในเนื้อความของ for loop เราเรียกฟังก์ชันแบบเรียกซ้ำด้วยโหนดย่อยสำหรับโหนด currentNode โหนดใดขึ้นอยู่กับการวนซ้ำปัจจุบันของ for loop;
  • เมื่อ currentNode ไม่มีลูก ให้ออกจากลูป for และเรียก ( โทรกลับ) ที่เราส่งผ่านระหว่างการโทรไปยัง traverseDF (โทรกลับ)

  ขั้นตอนที่ 2 ( เติมเต็มตัวเอง), 3 (เรียกตัวเอง) และ 4 (เรียกกลับ) ซ้ำจนกว่าจะข้ามโหนดทรีแต่ละโหนด

  การเรียกซ้ำเป็นหัวข้อที่ซับซ้อนมาก เพื่อให้เข้าใจ คุณสามารถทดลองกับการนำ traverseDF ไปใช้งานในปัจจุบันของเรา ( โทรกลับ)และพยายามทำความเข้าใจว่ามันทำงานอย่างไร

  ตัวอย่างต่อไปนี้สาธิตการสำรวจต้นไม้โดยใช้ traverseDF (โทรกลับ) สำหรับตัวอย่างนี้ ฉันจะสร้างต้นไม้ก่อน แนวทางที่ฉันจะใช้ไม่เหมาะ แต่ได้ผล ควรใช้วิธีการบวก (ค่า) ซึ่งเราจะดำเนินการในขั้นตอนที่ 4:

  var tree = ต้นไม้ใหม่ ("หนึ่ง"); tree._root.children.push (โหนดใหม่ ("สอง")); tree._root.children.parent = ต้นไม้; tree._root.children.push (โหนดใหม่ ("สาม")); tree._root.children.parent = ต้นไม้; tree._root.children.push (โหนดใหม่ ("สี่")); tree._root.children.parent = ต้นไม้; tree._root.children.children.push (โหนดใหม่ ("ห้า")); tree._root.children.children.parent = tree._root.children; tree._root.children.children.push (โหนดใหม่ ("six")); tree._root.children.children.parent = tree._root.children; tree._root.children.children.push (โหนดใหม่ ("เจ็ด")); tree._root.children.children.parent = tree._root.children; / * สร้างต้นไม้ถัดไป หนึ่ง ├── สอง │ ├── ห้า │ └── หก ├── สาม └── สี่ └── เจ็ด * /

  ทีนี้มาเรียก traverseDF (โทรกลับ):

  tree.traverseDF (ฟังก์ชัน (โหนด) (console.log (node.data))); / * พิมพ์บรรทัดต่อไปนี้ไปที่คอนโซล "ห้า" "หก" "สอง" "สาม" "เจ็ด" "สี่" "หนึ่ง" * /

  TraverseBF (โทรกลับ) วิธี

  วิธีลัดเลาะต้นไม้ตามความกว้าง ความแตกต่างระหว่างการค้นหาเชิงลึกก่อนและการค้นหาแบบกว้างคือลำดับของการสำรวจโหนดทรี เพื่อแสดงสิ่งนี้ ลองใช้ทรีที่เราสร้างขึ้นเพื่อใช้เมธอด traverseDF (โทรกลับ):

  / * ต้นไม้ที่หนึ่ง (ความลึก: 0) ├── สอง (ความลึก: 1) │ ├── ห้า (ความลึก: 2) │ └── หก (ความลึก: 2) ├── สาม (ความลึก: 1) └── สี่ (ความลึก: 1) └── เจ็ด (ความลึก: 2) * /

  ทีนี้ มาส่งการเรียกกลับแบบเดิมไปยัง traverseBF (callback) ที่เราใช้สำหรับ traverseDF (callback):

  tree.traverseBF (ฟังก์ชัน (โหนด) (console.log (node.data))); / * พิมพ์บรรทัดต่อไปนี้ไปที่คอนโซล "หนึ่ง" "สอง" "สาม" "สี่" "ห้า" "หก" "เจ็ด" * /

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

  Tree.prototype.traverseBF = ฟังก์ชัน (เรียกกลับ) (var queue = คิวใหม่ (); queue.enqueue (this._root); currentTree = queue.dequeue (); ในขณะที่ (currentTree) (สำหรับ (var i = 0, length = ปัจจุบันTree.children.length;i< length; i++) { queue.enqueue(currentTree.children[i]); } callback(currentTree); currentTree = queue.dequeue(); } };

  ฉันจะอธิบายคำจำกัดความของ traverseBF (โทรกลับ) ทีละขั้นตอน:

  • สร้างอินสแตนซ์คิว
  • เพิ่มโหนดที่เรียกว่า traverseBF (โทรกลับ) สำหรับอินสแตนซ์คิว
  • เราประกาศตัวแปร currentNode และเริ่มต้นสำหรับโหนดที่เราเพิ่งเพิ่มลงในคิว
  • ในขณะที่ currentNode ชี้ไปที่โหนด ให้รันโค้ดภายใน while loop;
  • เราใช้ for loop เพื่อสำรวจลูกของ currentNode;
  • ในเนื้อความของ for loop ให้เพิ่มโหนดย่อยแต่ละโหนดในคิว
  • ยอมรับ currentNode และส่งผ่านเป็นอาร์กิวเมนต์เพื่อโทรกลับ
  • ตั้งค่าโหนดปัจจุบันเป็นโหนดที่ถูกลบออกจากคิว
  • ตราบใดที่ currentNode ชี้ไปที่โหนด โหนดแต่ละโหนดในทรีจะต้องถูกข้ามไป เมื่อต้องการทำเช่นนี้ ทำซ้ำขั้นตอนที่ 4 ถึง 8

  เมธอดประกอบด้วย (โทรกลับ, ข้ามผ่าน)

  มากำหนดวิธีการที่จะทำให้เราสามารถหาค่าเฉพาะในแผนผังได้ ในการใช้วิธีการข้ามต้นไม้แบบใดแบบหนึ่ง ฉันตั้งค่าให้ประกอบด้วย (การโทรกลับ การข้ามผ่าน) เพื่อรับสองอาร์กิวเมนต์: ข้อมูลที่เรากำลังค้นหาและประเภทการข้ามผ่าน:

  Tree.prototype.contains = ฟังก์ชั่น (โทรกลับ, ข้ามผ่าน) (traversal.call (นี้, โทรกลับ););

  ในส่วนของมี (การโทรกลับ, การข้ามผ่าน) เราใช้วิธีการที่เรียกว่าการโทรเพื่อส่งผ่านสิ่งนี้และการโทรกลับ อาร์กิวเมนต์แรกผูก traversal กับทรีซึ่งมี (callback, traversal) ถูกเรียก อาร์กิวเมนต์ที่สองคือฟังก์ชันที่ถูกเรียกที่แต่ละโหนดในแผนผัง

  ลองนึกภาพว่าเราต้องการพิมพ์ไปยังคอนโซลทุกโหนดที่มีข้อมูลคี่ และสำรวจแต่ละโหนดในทรีโดยใช้เมธอด BFS ในการทำเช่นนี้ คุณต้องเขียนโค้ดต่อไปนี้:

  // tree เป็นตัวอย่างของโหนดราก tree.contains (ฟังก์ชัน (โหนด) (ถ้า (node.data === "สอง") (console.log (โหนด);)), tree.traverseBF);

  เพิ่ม (data, toData, traversal) method

  ตอนนี้เรามีวิธีการหาโหนดในต้นไม้แล้ว มากำหนดวิธีการที่จะให้เราเพิ่มโหนดให้กับโหนดเฉพาะ:

  Tree.prototype.add = function (data, toData, traversal) (var child = new Node (data), parent = null, callback = function (node) (ถ้า (node.data === toData) (พาเรนต์ = โหนด; )); this.contains (callback, traversal); if (parent) (parent.children.push (child); child.parent = parent;) else (แสดงข้อผิดพลาดใหม่ ("ไม่สามารถเพิ่มโหนดให้กับพาเรนต์ที่ไม่มีอยู่จริง ");));

  เพิ่ม (data, toData, traversal) กำหนดสามพารามิเตอร์ ข้อมูลถูกใช้เพื่อสร้างอินสแตนซ์ใหม่ของโหนด toData - ใช้เพื่อเปรียบเทียบแต่ละโหนดในแผนผัง พารามิเตอร์ที่สาม traversal คือประเภทของการข้ามต้นไม้ที่ใช้ในวิธีนี้

  ในเนื้อหาของ add (data, toData, traversal) เราประกาศตัวแปรสามตัว ตัวแปรแรกคือ child ถูกเตรียมใช้งานเป็นอินสแตนซ์ใหม่ของ Node ตัวแปรที่สอง parent ถูกเตรียมใช้งานเป็น null; แต่ต่อมาจะชี้ไปที่โหนดใดๆ ในทรีที่ตรงกับค่า toData การกำหนดผู้ปกครองใหม่เสร็จสิ้นในตัวแปรที่สาม เรียกกลับ

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

  การเปรียบเทียบจริงของแต่ละโหนดกับ toData นั้นเสร็จสิ้นภายใน add (data, toData, traversal) ต้องส่งประเภทการข้ามผ่านและการเรียกกลับเป็นอาร์กิวเมนต์เพื่อเพิ่ม (data, toData, traversal)

  ถ้า parent ไม่มีอยู่ในทรี เราจะใส่ child ใน parent.children; นอกจากนี้เรายังกำหนดให้ผู้ปกครองของเด็กเป็นผู้ปกครองด้วย มิฉะนั้น จะเกิดข้อผิดพลาด

  ลองใช้ add (data, toData, Traversal) ในตัวอย่างของเรา:

  var tree = ต้นไม้ใหม่ ("CEO"); tree.add ("รองประธานแห่งความสุข", "CEO", tree.traverseBF); / * ต้นไม้ "CEO" ของเรา └── "VP of Happiness" * /

  ต่อไปนี้คือตัวอย่างที่ซับซ้อนมากขึ้นของการใช้ add (data, toData, traversal):

  var tree = ต้นไม้ใหม่ ("CEO"); tree.add ("รองประธานแห่งความสุข", "CEO", tree.traverseBF); tree.add ("รองประธานฝ่ายการเงิน", "CEO", tree.traverseBF); tree.add ("VP of Sadness", "CEO", tree.traverseBF); tree.add ("ผู้อำนวยการฝ่ายลูกสุนัข", "รองประธานฝ่ายการเงิน", tree.traverseBF); tree.add ("ผู้จัดการลูกสุนัข", "ผู้อำนวยการลูกสุนัข", tree.traverseBF); / * ต้นไม้ "CEO" ├── "รองประธานแห่งความสุข" ├── "รองประธานฝ่ายการเงิน" │ ├── "ผู้อำนวยการลูกสุนัข" │ └── "ผู้จัดการลูกสุนัข" └── "รองประธานแห่งความเศร้า" * /

  ลบ (data, fromData, Traversal) method

  เพื่อใช้งาน Tree อย่างสมบูรณ์ เราต้องเพิ่มเมธอดที่ชื่อว่า ลบ (data, fromData, การข้ามผ่าน)... คล้ายกับการลบโหนดออกจาก DOM เมธอดนี้จะลบโหนดและโหนดย่อยทั้งหมด:

  Tree.prototype.remove = ฟังก์ชัน (data, fromData, traversal) (var tree = this, parent = null, childToRemove = null, index; var callback = function (node) (if (node.data === fromData) (พาเรนต์ = โหนด;)); this.contains (โทรกลับ, traversal); if (parent) (index = findIndex (parent.children, data); if (index === ไม่ได้กำหนด) (โยนข้อผิดพลาดใหม่ ("โหนดที่จะลบไม่ได้ มีอยู่ ");) อื่น ๆ (childToRemove = parent.children.splice (ดัชนี 1);)) อื่น ๆ (โยนข้อผิดพลาดใหม่ (" ไม่มีผู้ปกครอง ");) ส่งคืน childToRemove;);

  เช่นเดียวกับการเพิ่ม (data, toData, traversal) วิธีการ delete จะข้ามต้นไม้ทั้งหมดเพื่อค้นหาโหนดที่มีอาร์กิวเมนต์ที่สอง ซึ่งปัจจุบันเป็น fromData หากพบโหนดนี้ พาเรนต์จะชี้ไปที่โหนดในคำสั่ง if แรก

  ตาม DOM:

  • เอกสารทั้งหมดแสดงโดยโหนดเอกสาร
  • แต่ละแท็ก HTML เป็นโหนดองค์ประกอบ
  • ข้อความภายในองค์ประกอบ HTML จะแสดงด้วยโหนดข้อความ
  • แอตทริบิวต์ HTML แต่ละรายการมีโหนดแอตทริบิวต์
  • ความคิดเห็นเป็นโหนดความคิดเห็น

  หัวเรื่อง

  แค่ข้อความ

  ตัวอย่าง 6.2

  ในตัวอย่างนี้ โหนดรูทคือ tag ... โหนดอื่น ๆ ทั้งหมดอยู่ภายใน ... โหนดนี้มีโหนดย่อยสองโหนด: และ ... น็อต มีโหนด โหนดองค์ประกอบ