أدوات المطورين · محرر HTML WYSIWYG
شرح DOM للمحررين: لماذا HTML شجرة، وليس ملفًا نصيًا
· خلفية
أتش تي أم أل دوم contenteditable
يقدم نموذج كائن المستند لغير المبرمجين، ويغطي قواعد التداخل، والعناصر الأصلية والفرعية، وكيفية إصلاح المتصفحات للتداخل غير الصالح، لشرح سلوك المحرر الذي قد يبدو عشوائيًا.
لماذا أغلق <p> نفسه - يفتح بعلامات تغيرت بعد اللصق
يمكن أن تظهر الفقرة وكأنها تغلق أو تتحرك بعد مرور جزء ما عبر المحرر لأن الشجرة الناتجة - وليس تسلسل الأحرف الأصلي للمؤلف - هي ما يهم في النهاية. يضيف ToolAcre تحويلاً آخر: فهو يقوم بترميز المصدر المشتق من المتصفح وإعادة كتابته ضمن القائمة المسموح بها الخاصة به.
عندما يتغير المصدر، اسأل عن المرحلة التي غيرته. ربما قام المتصفح بتغيير المحتوى القابل للتحرير DOM، أو ربما قام المطهر بتعيين اسم مستعار، أو فك عقدة أو موازنة العلامات المقبولة. إن تسمية كل اختلاف بعبارة "أصلحه المتصفح" يخفي هذه الحدود المهمة.
صناديق داخل صناديق - يقدم نموذج الشجرة مع مثال قصير
فكر في العناصر كمربعات متصلة بالعلاقات بين الوالدين والطفل. في `<p>Read <strong>carefully</strong>.</p>`، p هو أصل النص، وهو نص قوي وأكثر؛ قوي هو أصل الكلمة بعناية. يمكن أن توضح المسافة البادئة للمصدر الشجرة ولكنها لا تنشئ العلاقة.
يقوم المنسق الجميل لـ ToolAcre بوضع حاويات الكتل على الأسطر ويحتفظ بالعناصر المضمنة مع النص المحيط. تتلقى القوائم خطوط Li ذات مسافة بادئة. هذا التنسيق مخصص لقراءة المخرجات المعقمة. يظل النموذج الفعلي عبارة عن عناصر وعقد نصية متداخلة، بغض النظر عما إذا كان المصدر مضغوطًا أو منتشرًا عبر الخطوط.
تتم موازنة التداخل المسموح به بواسطة أداة إعادة كتابة ToolAcre؛ نماذج محتوى المتصفح أوسع
يحدد HTML نماذج المحتوى الأوسع والأكثر تفصيلاً من سياسة هذا المحرر. ToolAcre يسمح بمجموعة محددة ولكنه لا يتحقق من صحة كل قاعدة تداخل دلالية. تضمن مجموعتها إغلاقًا جيدًا بين العلامات المسموح بها؛ وهذا ليس دليلاً على أن كل علاقة ناتجة تعتبر مثالية HTML للوجهة.
على سبيل المثال، يجب أن تحتوي القائمة على عناصر القائمة المناسبة، ومع ذلك يمكن للمكدس العام أن يحتفظ بالمجموعات المسموح بها غير العادية لأنها ليست مدققًا للمخطط. يجب على المؤلفين إنشاء عناوين وفقرات وقوائم معقولة من خلال شريط الأدوات أو المصدر الذي تمت مراجعته، ثم التحقق من صحتها بموجب متطلبات الوجهة عندما تكون الصحة ذات أهمية.
يقوم ToolAcre بإصلاح العلامات المقبولة باستخدام المكدس، وليس خوارزمية التحليل HTML الكاملة
تطبق المتصفحات خوارزمية تحليل HTML كاملة مع استرداد الأخطاء. ToolAcre لا يعيد تنفيذه. يتعرف برنامج الرمز المميز الخاص به على الهياكل التي تحتاجها القائمة المسموح بها، ويغلق كاتبها العناصر الداخلية المقبولة عند ظهور علامة نهاية متقاطعة. إنه يسقط الإغلاقات الضالة ويغلق الفتحات المتبقية في النهاية.
يقوم المصدر صراحةً بتسمية تفاضلات المحلل اللغوي كسبب لعدم التعامل مع الوحدة كمرشح عام للمدخلات العدائية XSS. يمكن للمتصفح تفسير السلاسل المشوهة عمدًا بشكل مختلف. توفر آلية تحديد الوصول للمعاينة حدًا مستقلاً للتنفيذ داخل ToolAcre، بينما لا تزال الخوادم بحاجة إلى نظام سليم مدرك لـ HTML5.
العقد النصية والمسافات البيضاء - تغطي سبب وجود المسافات وفواصل الأسطر بين العلامات في الشجرة
يصبح النص بين العناصر رموزًا نصية، بما في ذلك أحرف المسافات البيضاء. يقوم المنسق الجميل بطي المسافات البيضاء العادية خارج ما قبل، بينما يتم الاحتفاظ بالمحتوى السابق تمامًا. يؤدي تحويل النص العادي إلى إدراج أسطر جديدة بعد نهايات الكتلة وbr، ثم يقلل من عدد الأسطر الفارغة الزائدة.
لذلك تشارك المساحة البيضاء بشكل مختلف في كل مرحلة. يمكن أن يأتي التباعد المرئي من النص أو br أو حدود الكتلة أو CSS. افحص العقد والأحرف بدلاً من التعامل مع كل فجوة مرئية كهامش. قد يقوم المطهر بتطبيع المسافات البيضاء دون تغيير الكلمات التي يراها القارئ.
مثال عملي: تتبع ملاحظة من فقرتين بقائمة - قراءة العلامات المنتجة على شكل شجرة، وتحديد الآباء والأطفال
بناء `<h2>Checklist</h2><p>Read <strong>carefully</strong>.</p><ul><li>Source</li><li>Preview</li></ul>`. يحتوي الجزء على ثلاثة عناصر فرعية على مستوى الجذر. تحتوي الفقرة على نص وقوي؛ تحتوي القائمة على طفلين، كل منهما يحتوي على نص.
التبديل من المصدر إلى المرئي والعكس. يجب أن تظل الشجرة المسموح بها متوازنة، وسيضع الوضع الجميل العنوان والفقرة على الأسطر أثناء وضع مسافة بادئة لعناصر القائمة. يتم التحكم في هذا التمرين؛ ولا يوضح كل إدخال تالف أو مسار إصلاح المتصفح.
ما لا يغطيه هذا — JavaScript DOM البرمجة أو نموذج الصندوق CSS
لا تدرس هذه المقالة برمجة JavaScript DOM أو مراقبي الطفرات أو واجهات برمجة تطبيقات التحديد أو نموذج الصندوق CSS. شجرة العناصر وشجرة مربع التخطيط مرتبطتان ولكنهما غير متطابقتين. كما أنها لا تدعي أن قائمة الرموز المميزة المكتوبة بخط اليد هي متصفح DOM.
لا يوجد استنتاج أمني معمم يتبع من شجرة مرتبة. يمكن للمهاجم استهداف اختلافات التحليل وعناوين URL، ولهذا السبب تظل تصفية المخرجات ومعاينة وضع الحماية وتحسين الخادم متميزة. استخدم النموذج الشجري للتفكير في البنية، وليس للتنازل عن المراجعة الأمنية لنظام الاستقبال.
الوجبات الجاهزة: التفكير في الأشجار - يلخص النموذج العقلي وكيف تظهر نتيجة الترميز لمحرر ToolAcre's HTML WYSIWYG الشجرة التي تقوم ببنائها
فكر في الأشجار عندما يبدو السلوك البصري تعسفيًا. حدد الأصل والأبناء والعقد النصية التي قصدتها، ثم قارنها بالمصدر الذي تمت تصفيته. ToolAcre يجعل هذا الفحص عمليًا من خلال إقران صياغة المحتوى القابلة للتحرير مع جزء قابل لإعادة الكتابة وقابل للقراءة.
يكشف النموذج العقلي القوي أيضًا عن حدود: يفقد div غير المغلف أحد الوالدين، ويفقد النص المسقط شجرته الفرعية، ويصبح b قويًا. وبمجرد أن تصبح هذه التحولات واضحة، تصبح التصحيحات قرارات هيكلية بدلاً من دفعات بصرية متكررة تظل علاماتها مجهولة.