الدوم ' قائمة الرموز يحتوي على الكثير من الخصائص أو الأساليب التي يمكن للمستخدم النهائي الوصول إليها وفقًا لمتطلباته. تقوم الخصائص والأساليب التي توفرها هذه القائمة بإجراء عمليات محددة على مجموعات البيانات المتوفرة وإرجاع النتيجة وفقًا لذلك. إنه أشبه بمصفوفة لأنه يحتوي على أعضاء مختلفين يمكن اختيارهم من خلال فهرسهم ومثل المصفوفة، يكون الفهرس الأول هو ' 0 '. ولكن لا يمكنك استخدام أساليب مثل ' البوب () أو 'الدفع ()' أو 'الانضمام ()' '.
ستشرح هذه المدونة عمل كائنات HTML DOMTokenList بواسطة JavaScript.
كيفية العمل مع كائنات JavaScript HTML DOMTokenList؟
إن HTML DOMTokenList ليس شيئًا في حد ذاته، وقيمته ترجع فقط إلى الخصائص والأساليب الموجودة فيه. دعونا نزور هذه الخصائص والأساليب بالتفصيل مع التنفيذ السليم.
الطريقة الأولى: إضافة طريقة ().
ال ' يضيف ()' يقوم بإرفاق أو تعيين فئات أو خصائص أو رموز بسيطة جديدة مع العنصر المحدد. بناء الجملة الخاص به مذكور أدناه:
htmlElement. يضيف ( oneOrMoreToken )
ويتم تنفيذه من خلال الكود التالي:
< رأس >
< أسلوب >
.حجم الخط{
حجم الخط: كبير؛
}
.لون{
لون الخلفية: cadetblue؛
اللون: أبيض دخاني؛
}
< / أسلوب >
< / رأس >
< جسم >
< h1 أسلوب = 'اللون: أزرق كاديت؛' > لينكس < / h1 >
< زر عند النقر = 'فعل()' > الأفعى < / زر >
< ص > اضغط على الزر أعلاه لتطبيق التصميم < / ص >
< شعبة بطاقة تعريف = 'المحدد' >
< ص > أنا النص المحدد. < / ص >
< / شعبة >
< النصي >
عمل الوظيفة () {
document.getElementById('selected').classList.add('fontSize', 'color');
}
< / النصي >
< / جسم >
شرح الكود أعلاه هو كما يلي:
- أولا، حدد فئتين CSS “ حجم الخط 'و' اللون 'وتخصيص خصائص CSS عشوائية لهم مثل' حجم الخط، ولون الخلفية، ولون '.
- بعد ذلك، قم بإنشاء الأزرار باستخدام الزر '< زر >' العلامة التي تستدعي ' فعل ()' باستخدام الدالة ' عند النقر 'مستمع الحدث.
- بالإضافة إلى ذلك، قم بإنشاء أحد الوالدين ' شعبة 'العنصر وتعيينه معرف' المحدد ' وأدخل بيانات وهمية بداخلها.
- وبعد ذلك قم بتحديد ' فعل ()' وتخزين مرجع العنصر المحدد عن طريق الوصول إلى المعرف الفريد الخاص به.
- وأخيرا استخدم ' قائمة الطبقة خاصية ' لتعيين الفئات وإرفاق ' يضيف ()' طريقة. بعد ذلك، قم بتمرير فئات CSS داخل قوس هذه الطريقة وسيتم تطبيق هذه الفئات على العنصر المحدد.
يتم إنشاء الإخراج بعد تجميع الكود أعلاه على النحو التالي:
يؤكد ملف GIF أعلاه أنه تم تعيين فئات CSS لعنصر محدد عبر ' يضيف ()' طريقة.
الطريقة الثانية: طريقة الإزالة ().
تقوم هذه الطريقة بإزالة الفئة أو المعرف المحدد من عنصر واحد أو أكثر كما هو موضح في الكود أدناه:
< رأس >< أسلوب >
.حجم الخط {
الخط- مقاس : كبير؛
}
. لون {
خلفية- لون : طالبا الأزرق؛
لون : دخان ابيض؛
}
< / أسلوب >
< / رأس >
< جسم >
< h1 أسلوب = 'اللون: أزرق كاديت؛' > لينكسنت < / h1 >
< زر عند النقر = 'فعل()' >المضيف< / زر >
< ص >اضغط على الزر أعلاه لتطبيق التصميم< / ص >
< شعبة بطاقة تعريف = 'المحدد' فصل = 'لون حجم الخط' >
< ص > أنا المحدد نص .< / ص >
< / شعبة >
< النصي >
وظيفة فعل ( ) {
document.getElementById ( 'المحدد' ) .classList.remove ( 'لون' ) ;
}
< / النصي >
< / جسم >
وصف الكود أعلاه هو كما يلي:
- في البداية، يتم استخدام الكود الموضح في الكود أعلاه هنا كمثال.
- وهنا كلا من ' لون ' و ' حجم الخط يتم تعيين الفئات مباشرة إلى العنصر المحدد.
- وبعد ذلك داخل ' فعل ()' الدالة التي يتم استدعاؤها بواسطة ' عند النقر 'مستمع الحدث' يزيل ()' يتم استخدام طريقة الرمز المميز.
- تأخذ هذه الطريقة فئة واحدة أو عدة فئات سيتم إزالتها من العنصر المحدد. وفي حالتنا ' لون ستتم إزالة الفئة 'من عنصر HTML المحدد.
يتم عرض إخراج الكود أعلاه على النحو التالي:
يُظهر الناتج أعلاه أنه تمت إزالة فئة CSS المحددة من العنصر المحدد باستخدام طريقة 'remove()'.
الطريقة الثالثة: طريقة التبديل ().
ال ' تبديل ()' الطريقة هي مزيج من كليهما ' يضيف ()' و ' يزيل ()' طُرق. يقوم أولاً بتعيين فئة CSS المقدمة لعنصر HTML المحدد ثم يقوم بإزالتها وفقًا لإجراءات المستخدم.
< لغة البرمجة >< رأس >
< أسلوب >
.حجم الخط {
الخط- مقاس : xx-كبير؛
}
. لون {
خلفية- لون : طالبا الأزرق؛
لون : دخان ابيض؛
}
< / أسلوب >
< / رأس >
< جسم >
< h1 أسلوب = 'اللون: أزرق كاديت؛' > لينكسنت < / h1 >
< زر عند النقر = 'فعل()' >المضيف< / زر >
< ص >اضغط على الزر أعلاه لتطبيق التصميم< / ص >
< شعبة بطاقة تعريف = 'المحدد' >
< ص > أنا المحدد نص .< / ص >
< / شعبة >
< النصي >
وظيفة فعل ( ) {
document.getElementById ( 'المحدد' ) .classList.toggle ( 'حجم الخط' ) ;
}
< / النصي >
< / جسم >
< / لغة البرمجة >
وصف الكود أعلاه مذكور أدناه:
- يتم استخدام نفس البرنامج المستخدم في القسم أعلاه، فقط ' تبديل ()' يتم استبدال الطريقة بـ ' يزيل ()' طريقة.
في نهاية مرحلة التجميع، سيكون الإخراج على النحو التالي:
يُظهر الإخراج أن فئة CSS المحددة تتم إضافتها وإزالتها وفقًا لإجراء المستخدم.
الطريقة الرابعة: تحتوي على طريقة ().
ال ' يتضمن ()' يتم استخدام الطريقة للتحقق من توفر فئات CSS محددة عبر عنصر HTML ويتم توضيح تنفيذها أدناه:
< النصي >وظيفة فعل ( ) {
دع س = وثيقة. getElementById ( 'المحدد' ) . قائمة الطبقة . يتضمن ( 'حجم الخط' ) ;
وثيقة. getElementById ( 'امتحان' ) . InnerHTML = س ;
}
النصي >
يبقى جزء HTML وCSS كما هو. فقط في '< النصي >' ، يتم تطبيق الطريقة 'يحتوي على ()' على العنصر المحدد للتحقق مما إذا كان ' حجم الخط 'يتم تطبيقه على هذا العنصر أم لا. ثم يتم عرض النتيجة على صفحة الويب على عنصر HTML له معرف ' امتحان '.
بعد تجميع الكود أعلاه، تظهر صفحة الويب بالشكل التالي:
يظهر الناتج أن قيمة ' حقيقي ' يتم إرجاعها مما يعني أنه تم تطبيق فئة CSS المحددة على عنصر HTML المحدد.
الطريقة الخامسة: طريقة العنصر ().
ال ' غرض ()' تحدد الطريقة الرمز المميز أو فئة CSS وفقًا لرقم الفهرس الخاص بها، بدءًا من ' 0 '، كما هو مبين أدناه:
< جسم >< نمط h1 = 'اللون: أزرق كاديت؛' > لينكس h1 >
< زر عند النقر = 'فعل()' > فاحص زر >
< ص > سي اس اس فصل الذي تم تعيينه في البداية , يتم استرجاعه : ص >
< h3 id = 'حالة الاستخدام' فصل = 'firstCls SecondCls ThirdCls' >< h3 >
< النصي >
وظيفة فعل ( ) {
السماح للقائمة التجريبية = وثيقة. getElementById ( 'حالة الاستخدام' ) . قائمة الطبقة . غرض ( 0 ) ;
وثيقة. getElementById ( 'حالة الاستخدام' ) . InnerHTML = قائمة تجريبية ;
}
النصي >
جسم >
شرح الكود أعلاه:
- أولاً، يتم تعيين فئات CSS متعددة للعنصر المحدد بمعرف ' حالة الاستخدام 'وطريقة 'action ()' التي يتم استدعاؤها عبر ' عند النقر ' حدث.
- في هذه الوظيفة ' غرض ()' الطريقة مع فهرس ' 0 'يتم إرفاقه بالعنصر المحدد. يتم تخزين النتيجة في المتغير ' قائمة تجريبية ' والتي تتم طباعتها بعد ذلك على صفحة الويب باستخدام ' InnerHTML ' ملكية.
بعد انتهاء التجميع، يأتي الإخراج على النحو التالي:
يُظهر الإخراج اسم فئة CSS التي تنطبق في البداية على العنصر المحدد ويتم استردادها.
الطريقة السادسة: خاصية الطول
ال ' طول 'خاصية tokenList ترجع عدد العناصر أو الفئات المعينة التي يتم تطبيقها على العنصر المحدد. عملية التنفيذ مذكورة أدناه:
< النصي >وظيفة فعل ( ) {
دعهم يهدمون = وثيقة. getElementById ( 'حالة الاستخدام' ) . قائمة الطبقة . طول ;
وثيقة. getElementById ( 'حالة الاستخدام' ) . InnerHTML = هدم ;
}
النصي >
في كتلة التعليمات البرمجية أعلاه:
- لأول مرة ' طول 'الملكية ملحقة بـ ' قائمة الطبقة '' لاسترداد عدد الفئات التي تم تعيينها للعنصر المحدد.
- بعد ذلك، يتم تخزين نتيجة الخاصية في المتغير ' هدم ' والتي سيتم عرضها على صفحة الويب على عنصر بمعرف ' حالة الاستخدام '.
- يبقى باقي الكود كما هو في القسم أعلاه.
الإخراج الذي تم إنشاؤه بعد التجميع مذكور أدناه:
يُرجع الإخراج الفئات المطبقة على العنصر.
الطريقة السابعة: طريقة الاستبدال ().
ال ' يستبدل ()' هي الطريقة التي تأخذ معلمتين على الأقل وتستبدل المعلمة الأولى بالمعلمة الثانية للعنصر المحدد، كما هو موضح أدناه:
< النصي >وظيفة فعل ( ) {
السماح للقائمة التجريبية = وثيقة. getElementById ( 'حالة الاستخدام' ) . قائمة الطبقة . يستبدل ( 'حجم الخط' , 'لون' ) ;
}
النصي >
هنا CSS ' حجم الخط 'يتم استبدال الفئة بـ CSS' لون 'فئة لعنصر بمعرف' حالة الاستخدام '. تظل بقية تعليمات HTML وCSS كما هي في الأقسام المذكورة أعلاه.
بعد التعديل ' النصي ' وتجميع ملف HTML الرئيسي، ويبدو الإخراج كما يلي:
يُظهر الإخراج أنه تم استبدال فئة CSS المحددة بفئة أخرى.
الطريقة الثامنة: خاصية القيمة
ال ' قيمة تقوم خاصية قائمة الرموز المميزة باسترداد القيم المطلوبة المعينة لعنصر HTML المحدد. عندما يتم إرفاقه بجوار ' قائمة الطبقة '، سيتم استرداد الفئات المخصصة للعناصر المحددة، كما هو موضح أدناه:
< النصي >وظيفة فعل ( ) {
دعونا ديموفال = وثيقة. getElementById ( 'حالة الاستخدام' ) . قائمة الطبقة . قيمة ;
وثيقة. getElementById ( 'مطبعة' ) . InnerHTML = com.demoVal ;
}
النصي >
وصف مقتطف الشفرة المذكور أعلاه:
- داخل ' فعل ()' الجسم الوظيفي، ' قيمة 'الملكية ملحقة بجوار' قائمة الطبقة ' لاسترداد جميع الفئات المخصصة لعناصر HTML المحددة.
- بعد ذلك، يتم تخزين نتيجة الخاصية المذكورة أعلاه في متغير ' com.demoVal ' وإدراجه فوق العنصر الذي يحمل معرف 'طباعة'.
بعد انتهاء مرحلة التجميع، يتم إنشاء الإخراج على صفحة الويب على النحو التالي:
يعرض الإخراج اسم فئات CSS التي يتم تطبيقها على العنصر المحدد.
خاتمة
يشبه كائن HTML DOM TokenList مصفوفة تخزن أساليب وخصائص متعددة تُستخدم لتطبيق وظائف محددة على عنصر HTML المتوفر. بعض الطرق الأكثر أهمية والأكثر استخدامًا التي تقدمها TokenList هي ' add() و'remove()' و'toggle()' و'يحتوي على()' و'item()' و'replace()' '. الخصائص التي توفرها TokenList هي ' طول ' و ' قيمة '. لقد أوضحت هذه المقالة الإجراء الخاص بالعمل مع كائن JavaScript HTML DOMTokenList.