توفر لنا جافا سكريبت فرصا كبيرة للعمل مع العناصر الموجودة على صفحة الويب. واحدة من هذه الأدوات هي الحصول على محتويات العنصر الزائف من قبل. تسمح لك العناصر الزائفة بإضافة تصميم إضافي للعناصر دون الحاجة إلى تغيير بنية هتمل الخاصة بها.
العناصر الزائفة مثل قبل وبعد هي عناصر إضافية يتم إنشاؤها باستخدام كس ويمكن استخدامها لإدراج المحتوى قبل أو بعد عنصر معين. طريقة واحدة للحصول على محتويات قبل الزائفة عنصر باستخدام جافا سكريبت هو استخدام النافذة.طريقة جيتكومبوتدستيل ().
طريقة النافذة.جيتكومبوتدستيل () إرجاع كائن يحتوي على جميع أنماط العناصر المحسوبة ، بما في ذلك قيم العناصر الزائفة. للحصول على محتويات العنصر الزائف من قبل ، يمكننا استخدام خاصية المحتوى لهذا الكائن. على سبيل المثال ، للحصول على محتويات عنصر زائف قبل عنصر مع فئة "مياليمنت" ، يمكننا استخدام التعليمات البرمجية التالية:
- وحدة التحكم.سجل (المحتوى);
الطريقة الصحيحة للحصول على قبل العنصر
استخدام محددات جافا سكريبت في الكود
سؤال وجواب
هل من الممكن الحصول على قبل عنصر إذا لم يتم تحديده في المغلق?
الطريقة الصحيحة للحصول على قبل العنصر
يمكن تزيين صفحات الويب بأنماط وعناصر مختلفة يمكن إضافتها باستخدام عنصر زائف. :: قبل. العنصر الزائف:: قبل يضيف المحتوى الداخلي قبل العنصر المحدد. في بعض الأحيان يصبح من الضروري الحصول على هذا المحتوى الداخلي برمجيا باستخدام جافا سكريبت.
لحسن الحظ ، هناك عدة طرق للحصول على المحتويات الداخلية للعنصر السابق.
الطريقة الأولى هي استخدام النافذة.جيتكومبوتدستيل () الملكية. تقوم هذه الخاصية بإرجاع كائن يحتوي على كافة الأنماط المطبقة على العنصر ، بما في ذلك العناصر الزائفة.
دع العنصر = المستند.كيريسيليكتور ('.العنصر');
دع المحتوى = نافذة.جيتكومبوتدستيل (العنصر،':: قبل').جيتبروبيرتيفالو ('المحتوى');
وحدة التحكم.سجل (المحتوى);
الطريقة الثانية هي استخدام طريقة جيتكومبوتدستيل () لعنصر مع عنصر زائف ومن ثم الحصول على قيمة خاصية المحتوى.
دع العنصر = المستند.كيريسيليكتور ('.العنصر');
السماح المحتوى = جيتكومبوتدستيل (العنصر،':: قبل').المحتوى;
وحدة التحكم.سجل (المحتوى);
تقوم كلتا الطريقتين بإرجاع سلسلة من كس تحتوي على المحتوى الداخلي بالتنسيق "نص" أو "عنوان ورل(العنوان)". إذا لم يتم تحديد المحتوى الداخلي ، يتم إرجاع سلسلة فارغة.
ولكن تذكر أنها لا تعمل في إي 8 وبعض المتصفحات القديمة الأخرى.الآن لديك طريقتان صحيحتان للحصول على المحتويات الداخلية للعنصر السابق باستخدام جافا سكريبت.
استخدام محددات جافا سكريبت في الكود
يوفر جافا سكريبت محددات مختلفة للحصول على العناصر على صفحة ويب. باستخدام هذه المحددات ، يمكنك الوصول بسهولة إلى العناصر الموجودة على الصفحة والتفاعل معها.
أحد أكثر أنواع المحددات شيوعا هو محددات العلامات. على سبيل المثال ، للحصول على جميع العناصر في الصفحة ، يمكنك استخدام التعليمات البرمجية التالية:
دع العناصر القوية = المستند.جيتليمينتسبيتاغنام ('قوية');
يمكنك أيضا استخدام المحددات حسب الفئة أو المعرف. فيما يلي أمثلة على استخدام هذه المحددات:
// احصل على جميع العناصر مع فئة "التمييز" دع العناصر مع الطبقة = وثيقة.الحصول على عناصراسم الفئة ('تسليط الضوء');
// احصل على عنصر بمعرف "الرأس"
السماح إليمنتويديد = وثيقة.جيتليمنتبيد ('رأس');
بالإضافة إلى ذلك ، يمكنك استخدام المحددات حسب سمات العنصر. على سبيل المثال ، للحصول على جميع العناصر التي تحتوي على سمة "سمة البيانات" ، يمكنك استخدام الكود التالي:
دع العناصر ذات السمة = المستند.كيريسيلكتورال ('[سمة البيانات]');المحددات المفيدة الأخرى هي المحددات النسبية. على سبيل المثال ، للحصول على جميع العناصر الفرعية مع علامة العنصر الأصل المحدد ، يمكنك استخدام التعليمات البرمجية التالية:
// الحصول على جميع العناصر الفرعية مع العلامة " م "من عنصر مع معرف"الأصل"دع عناصر الأطفال = مستند.كل ('#الأم > م');
يمكنك أيضا استخدام محددات الموضع. على سبيل المثال ، للحصول على العنصر الأول بعلامة "قوي" على الصفحة ، يمكنك استخدام الكود التالي:
دع أولاعنصر = وثيقة.كيريسيليكتور ('قوي: الطفل الأول);
وبالإضافة إلى ذلك ، مع محددات ، يمكنك الحصول على عناصر داخل عناصر أخرى باستخدام أساليب مثل كيريسيليكتور و كيريسيليكتورال. على سبيل المثال ، للحصول على جميع العناصر مع علامة " م "داخل عنصر مع فئة "حاوية" ، يمكنك استخدام التعليمات البرمجية التالية: