XML DOM - โครงสร้าง Range

โครงสร้าง Range แสดงส่วนที่ต่อเนื่องของเอกสาร

โครงสร้าง Range

โครงสร้าง Range แสดงส่วนที่ต่อเนื่องของเอกสาร อย่างเช่นส่วนที่ผู้ใช้เลือกด้วยเมาส์ในหน้าต่างบราวเซอร์

ถ้าการทำงานสนับสนุนโมดูล Range นั้น โครงสร้าง Documentกำหนด วิธีการ createRange()โดยเรียกมันด้วยวิธีการนี้เพื่อที่จะสร้าง Range โครงสร้างใหม่

จำเป็นต้องระวังIE มีการกำหนดวิธีการ Document.createRange() ที่ไม่สามารถใช้ร่วมกัน โครงสร้างที่มีกลุ่มเดียวกับสมาชิก Range แต่ไม่สามารถใช้ร่วมกัน

มีวิธีการมากมายที่สมาชิก Range ของโครงสร้าง Document มีการกำหนดเพื่อระบุส่วนที่ถูกเลือกของเอกสาร นอกจากนี้ยังมีวิธีการเพื่อทำการตัดแปลงและแปลงโครงสร้างในส่วนที่ถูกเลือก

ของเมธอดของสมาชิก Range มีการกำหนดวิธีการเพื่อขอรับจุดพรมและออฟฟ์เซ็ทของขอบเขต มีการกำหนดวิธีการเพื่อตั้งจุดพรมของขอบเขต โดยสังเกตว่าขอบเขตสามารถตั้งเป็น Document หรือ โครงสร้าง DocumentFragmentของโครงสร้างนั้น หลังจากที่กำหนดจุดพรมของขอบเขต สามารถใช้เมธอด deleteContents() และ extractContents() และ cloneContents() และ insertNode() ในการประกอบ คัดกรองและแปลงโครงสร้าง

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

วิธีการใช้งาน: ขอบเขต จุดพรมและออฟฟ์เซ็ท

โดยมีจุดพรมสองจุด คือจุดเริ่มต้นและจุดสิ้นสุด แต่ละจุดพรมถูกกำหนดโดยโครงสร้างและออฟฟ์เซ็ทของโครงสร้างนั้น โครงสร้างนั้นเป็นตัวแทน โครงสร้าง Element、โครงสร้าง Documentหรือ โครงสร้าง Textสำหรับ Element และ Document โครงสร้าง ตำแหน่งของออฟฟ์เซ็ทหมายถึงลูกโครงสร้างของโครงสร้างนั้น ออฟฟ์เซ็ท 0 หมายถึงจุดพรมแบบอยู่ก่อนลูกโครงสร้างแรกของโครงสร้างนั้น ออฟฟ์เซ็ท 1 หมายถึงจุดพรมแบบอยู่หลังลูกโครงสร้างแรกของโครงสร้างนั้น ก่อนลูกโครงสร้างที่สอง แต่ถ้าจุดพรมแบบเป็นโครงสร้าง Text ออฟฟ์เซ็ทจะหมายถึงตำแหน่งระหว่างอักษรสองตัวในข้อความ

ค่าคงที่ของอ็อบเจกต์ Range

ค่าคงที่เหล่านี้กำหนดวิธีที่จะเปรียบเทียบจุดต่างๆ ของอ็อบเจกต์ Range

นั่นเป็นตัวแปรของวิธี compareBoundaryPoints() how ค่าที่ถูกต้องของตัวแปร

ค่าคงที่ คำอธิบาย
START_TO_START เปรียบเทียบจุดเริ่มต้นของ Range ที่กำหนดกับจุดสิ้นสุดของ Range ปัจจุบัน
START_TO_END เปรียบเทียบจุดสิ้นสุดของ Range ที่กำหนดกับจุดสิ้นสุดของ Range ปัจจุบัน
END_TO_END เปรียบเทียบจุดสิ้นสุดของ Range ที่กำหนดกับจุดสิ้นสุดของ Range ปัจจุบัน
END_TO_START เปรียบเทียบจุดสิ้นสุดของ Range ที่กำหนดกับจุดเริ่มต้นของ Range ปัจจุบัน

คุณสมบัติของอ็อบเจกต์ Range

จำเป็นต้องระวังทุกคุณสมบัติเป็นความเป็นไปได้ที่อ่านเท่านั้น ไม่สามารถเปลี่ยนจุดเริ่มต้นและจุดสิ้นสุดของ Range ผ่านการตั้งค่าคุณสมบัติได้ ต้องเรียกใช้วิธี setEnd() และ setStart() ในการทำเช่นนี้

จำเป็นต้องระวังการอ่านคุณสมบัติเหล่านี้หลังจากเรียกใช้วิธี detach() จะทิ้งความผิดพลาด INVALID_STATE_ERR DOMException ความผิดพลาด.

คุณสมบัติ คำอธิบาย
collapsed ถ้าจุดเริ่มต้นและจุดสิ้นสุดของ Range อยู่ในตำแหน่งเดียวกันของเอกสาร จะมีค่า true คือ Range ว่าง หรือเป็น Range ที่ถูกย่อยับ
commonAncestorContainer จุดเริ่มต้นและจุดสิ้นสุดของ Range (คือต้นกิ่งของพวกเขา) โครงสร้าง Document ที่ฝังลึกที่สุด
endContainer โครงสร้าง Document ที่มีจุดสิ้นสุดของ Range
endOffset ตำแหน่งจุดสิ้นสุดใน endContainer
startContainer โครงสร้าง Document ที่มีจุดเริ่มต้นของ Range
startOffset ตำแหน่งจุดเริ่มต้นใน startContainer

วิธีของอ็อบเจกต์ Range

จำเป็นต้องระวังถ้าเรียกใช้วิธี detach() ของ Range แล้ว การเรียกใช้วิธีของอ็อบเจกต์ Range ใดๆ ต่อมาจะทิ้งความผิดพลาด INVALID_STATE_ERR DOMException ความผิดพลาด.

วิธี คำอธิบาย
cloneContents() กลับค่า DocumentFragment ใหม่ที่มีสำเนาของพื้นที่เอกสารที่ Range แสดง
cloneRange() สร้างอ็อบเจกต์ Range ใหม่ที่แสดงถึงพื้นที่เอกสารที่เท่ากับ Range ปัจจุบัน
collapse() ย่อส่วนของ DOM Range ให้จุดขอบเขตทั้งสองนั้นซ้ำกัน
compareBoundaryPoints() เปรียบเทียบจุดขอบเขตของส่วนที่กำหนดและจุดขอบเขตของส่วนปัจจุบัน และคืนค่า -1, 0 หรือ 1 ตามลำดับ การเปรียบเทียบจุดขอบเขตที่ใช้เป็นตัวเลือกที่กำหนดโดยค่าที่กำหนดให้ ซึ่งต้องเป็นค่าที่เปิดเผยแล้ว
deleteContents() ลบบริเวณเอกสารที่นำมาแสดงโดย Range ที่มีอยู่ในขณะนี้
detach() แจ้งให้ระบบไม่ใช้งานส่วนของ DOM Range ที่มีอยู่ในขณะนี้ และสามารถหยุดติดตามได้ ถ้าเรียกวิธีนี้ของส่วนของ DOM Range แล้ว ทุกวิธีที่เรียกต่อไปของส่วนของ DOM Range จะทำให้ปรากฏความผิดพลาด INVALID_STATE_ERR DOMException ความผิดพลาด.
extractContents() ลบบริเวณเอกสารที่นำมาแสดงโดย DOM Range ที่มีอยู่ในขณะนี้ และคืนค่าเป็น DocumentFragment ที่มีเนื้อหาของบริเวณนั้น วิธีนี้มีความคล้ายคลึงกับการรวมกันของวิธี deleteContents() และ cloneContents()
insertNode() ใส่ตัวเลือกที่กำหนดเข้าไปในจุดเริ่มต้นของส่วนของ DOM Range
selectNode() กำหนดจุดขอบเขตของส่วนของ DOM Range ให้เป็นตัวเลือกที่กำหนดและหลานทั้งหมดของตัวเลือกนั้น
selectNodeContents() กำหนดจุดขอบเขตของส่วนของ DOM Range ให้เป็นตัวเลือกที่มีหลานทั้งหมดของตัวเลือกที่กำหนด แต่ไม่มีตัวเลือกที่กำหนดตัวเอง
setEnd() กำหนดจุดสิ้นสุดของส่วนของ DOM Range ให้เป็นตัวเลือกที่อยู่และจุดห่างที่กำหนดจากตัวเลือกที่กำหนด
setEndAfter() กำหนดจุดสิ้นสุดของส่วนของ DOM Range ให้เป็นตัวเลือกที่อยู่หลังตัวเลือกที่กำหนด
setEndBefore() กำหนดจุดสิ้นสุดของส่วนของ DOM Range ให้เป็นตัวเลือกที่อยู่ก่อนหน้าตัวเลือกที่กำหนด
setStart() กำหนดจุดเริ่มต้นของส่วนของ DOM Range ให้เป็นตัวเลือกที่อยู่ที่จุดห่างที่กำหนดจากตัวเลือกที่กำหนด
setStartAfter() กำหนดจุดเริ่มต้นของส่วนของ DOM Range ให้เป็นตัวเลือกที่อยู่หลังตัวเลือกที่กำหนด
setStartBefore() กำหนดจุดเริ่มต้นของส่วนของ DOM Range ให้เป็นตัวเลือกที่อยู่ก่อนหน้าตัวเลือกที่กำหนด
surroundContents() ใส่ตัวเลือกที่กำหนดเข้าไปในจุดเริ่มต้นของส่วนของ DOM Range และกำหนดให้บรรดาตัวเลือกทั้งหมดในส่วนของ DOM Range มีพ่อเมืองใหม่ที่เป็นหลานของตัวเลือกที่ใส่เข้าไป
toString() กลับไปยังข้อความที่แสดงเนื้อหาของบริเวณเอกสารที่นำมาแสดงโดย DOM Range