كيفية استخدام HTML & مع الظل DOM
فتحة HTML هي واحدة من أبرز المعايير التي وضعتها W3C. ادمج ذلك مع معيار W3C آخر مثير للإعجاب قوالب, ولديك طهو رائع للعمل مع. تكون قادر على إنشاء وإضافة عناصر HTML إلى صفحة باستخدام جافا سكريبت هي مهمة ضرورية ومهمة.
إنه مفيد عندما يتعين على مقتطف الشفرة تظهر فقط في أوقات معينة, أو عندما لا ترغب في كتابة المئات من عناصر HTML المهيكلة بشكل مماثل ولكنك تريد ذلك أتمتة العملية.
إنشاء عناصر HTML في JavaScript هو لا مرغوب فيه جدا. إنها مشكلة يجب عليك التحقق منها وإعادة فحصها إذا كنت قد غطيت جميع العلامات ، ووضعها بالترتيب الصحيح ، الكل في الكل ، هناك فقط جدا الكثير لكتابة وتتبع. هذا الاضطراب ، ولكن, حصلت على الحل عندما ظهرت علامة. إذا كان هناك شيء يجب أن يكون يضاف إلى الصفحة بشكل حيوي, يمكنك وضعه داخل
جزء.
في هذا المنشور ، سأريك كيف يمكنك استخدام
و العلامات جنبا إلى جنب مع جافا سكريبت ل إنشاء مصنع جدول HTML صغير التي يمكن أن تخلق وتعبئة مئات الجداول المماثلة.
ال
و
علامات
ال علامة تحمل رمز HTML ذلك لن يتم عرضه بواسطة المتصفحات حتى تتم إضافته بشكل صحيح إلى المستند ، باستخدام JavaScript. ال
العلامة هي عنصر نائب تضيفه إلى DOM الظل والتي يمكن أن تكون مصنوعة من محتوى جزء.
ا الظل DOM يشبه DOM العادية (نموذج المستند الذي تم تحليله من HTML). هذا يخلق شجرة النطاق (شجرة DOM الظل) ، التي لديها جذر من تلقاء نفسها ويمكن أيضا أن يكون أسلوب خاص بها.
عندما تقوم بإدراج شجرة الظل الظل في عنصر في المستند الرئيسي - سيتم بعد ذلك تسمية العنصر مضيف الظل -, جميع العناصر الفرعية للمضيف الظل التي تحمل علامة فتحة
السمة (ليست هي نفسها المذكورة أعلاه
العلامة) سوف تأخذ مكانها في الشجرة الفرعية المدرجة حديثا.
The الظل الظل ، حتى كتابة هذا المقال (يوليو 2017) ، هي معتمد فقط في المتصفحات المستندة إلى WebKit و Blink ولكن يمكنك التحقق من الحالة الفعلية لدعم المتصفح على CanIUse في أي وقت.
إعداد HTML
لا يزال مربكا؟ دعونا نرى بعض الرموز ، بدءا من جزء.
في داخل داخل القالب, لقد أضفت أيضا بعض الاساليب الاساسية للجدول ، وذلك باستخدام خارج القالب, هناك اثنان كل في الوقت الحالي ، كل ما يمكنك رؤيته على الصفحة هو سلاسل النص الموجودة في النطاقات ، لذلك نحن بحاجة إلى إضافة بعض JavaScript أيضًا. باستخدام Javascript ، نقوم بإدراج الجدول من داخل القالب في كلا divs كشجرة DOM الظل. بعد الإدراج ، يتم وضع المسافات في فتحاتها داخل الجدول وعرض عناوين الأعمدة أو قيم الخلايا المطلوبة. ستكون النتيجة جدولين تم إنشاؤه تلقائيًا التي تستخدم نفس القالب. أولاً ، نحتاج إلى التحقق من دعم Shadow DOM في متصفح المستخدم. ال نخلق متغير مخصص يسمى داخل ال هناك اثنان بعدها نحن إضافة نسخة من محتوى القالب إلى شجرة DOM الظل باستخدام وجداول HTML الديناميكية لدينا جاهزة ، وإليك كيفية ظهور الإخراج في Chrome:, هناك
حسنا استخدام كمخطط إلى عن على خلق بعض الجداول التي سوف تضاف إلى وثيقة. هناك
العناصر داخل خلايا الجدول ( و ) تعمل كعناصر نائبة لعناوين الأعمدة وقيم الخلية. كل فتحة لديها فريدة من نوعها اسم
تنسب ذلك يحددها.
بطاقة.
, لجدولين منفصلين نريد إضافتهما إلى الصفحة.
عنصر لديه
فتحة
السمة التي القيمة يساوي اسم
القيمة من المقابلة
علامة داخل .
إرفاق شجرة الظل الظل
attachShadow ()
طريقة بإرفاق شجرة DOM الظل لعنصر وإرجاع العقدة الجذر لشجرة DOM الظل. ال إذا
يتحقق الشرط الموجود في الكود أدناه مما إذا كان المستعرض يدعم هذه الطريقة عن طريق اختبار ما إذا كانت divs على الصفحة بها attachShadow
طريقة. // التحقق من دعم Shadow DOM إذا كان ('attachShadow' في document.createElement ('div')) else console.warn ('attachShadow غير مدعوم')؛
templateContent
أن بمثابة مرجع إلى محتوى القالب. if ('attachShadow' in document.createElement ('div')) let templateContent = document.querySelector ('template'). content؛ دع divs = document.querySelectorAll ('div')؛ divs.forEach (function (div) // inside loop) ؛ else console.warn ('attachShadow not support')؛
forEach
حلقة ، شجرة الظل الظل هو تعلق على كل div (div.attachShadow (mode: 'open')
).الوضع
خيارات إلى عن على attachShadow
: افتح
و مغلق
. إذا مغلق
تم اختيار عقدة الجذر لشجرة DOM الظل سوف تصبح بعيدة المنال إلى خارج عناصر DOM والكائنات.templateContent.cloneNode (صحيح)
طريقة. if ('attachShadow' in document.createElement ('div')) let templateContent = document.querySelector ('template'). content؛ دع divs = document.querySelectorAll ('div')؛ divs.forEach (function (div) div.attachShadow (mode: 'open'). appendChild (templateContent.cloneNode (true)))؛ else console.warn ('attachShadow not support')؛