دليل مرجعي سريع لواجهة المتصفح القياسية DOM Range API عبر التابع document.createRange().
🔗 مراجع ذات صلة: ورقة غش واجهة برمجة تطبيقات DOM Selection
إنشاء نطاق جديد (Creating a Range)
const range = document.createRange();
تعيين حدود النطاق (Setting Boundaries)
// تعيين البداية والنهاية عبر العقدة الحاوية والإزاحة العددية
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);
// تعيين الحدود بالنسبة للعناصر المحيطة
range.setStartBefore(node);
range.setStartAfter(node);
range.setEndBefore(node);
range.setEndAfter(node);
// تحديد سريع لكامل العقدة أو لمحتوياتها الداخلية فقط
range.selectNode(node); // يشمل العقدة ذاتها مع كافة عناصرها
range.selectNodeContents(node); // يحدد فقط العقد الفرعية داخل العقدة
طي الحدود والمؤشر (Collapsing Boundaries)
range.collapse(true); // طي النطاق إلى نقطة البداية (وضع المؤشر في البداية)
range.collapse(false); // طي النطاق إلى نقطة النهاية (وضع المؤشر في النهاية)
console.log(range.collapsed); // true إذا كانت نقطتا البداية والنهاية متطابقتين تماما
التعامل مع المحتوى والتعديل (Content Manipulation)
// نسخ: يرجع DocumentFragment دون تعديل عناصر DOM الأصلية
const fragment = range.cloneContents();
// قص: يحذف المحتوى المحدد من DOM ويرجعه كـ DocumentFragment
const extracted = range.extractContents();
// حذف: يزيل المحتوى المحدد من DOM بالكامل
range.deleteContents();
// إدراج عنصر جديد عند موضع بداية النطاق
range.insertNode(newNode);
// إحاطة محتويات النطاق بعنصر جديد محيط
range.surroundContents(document.createElement('mark'));
الخصائص للقراءة فقط (Read-Only Properties)
range.startContainer: العقدة الحاوية التي يبدأ منها النطاق.range.startOffset: إزاحة البداية داخل startContainer.range.endContainer: العقدة الحاوية التي ينتهي عندها النطاق.range.endOffset: إزاحة النهاية داخل endContainer.range.commonAncestorContainer: أعمق عقدة سلف مشتركة تحوي كلا من عقدتي البداية والنهاية.range.toString(): النص الصافي لمحتويات النطاق.