ה-DOM ' Token List ' מכיל הרבה מאפיינים או שיטות שניתן לגשת למשתמש הקצה בהתאם לדרישותיו. המאפיינים והשיטות המסופקים על ידי רשימה זו מבצעים פעולות ספציפיות על מערכי הנתונים שסופקו ומחזירים את התוצאה בהתאם. זה יותר כמו מערך כי יש לו איברים שונים שניתן לבחור לפי האינדקס שלהם ובדיוק כמו מערך האינדקס הראשון הוא ' 0 '. אבל אתה לא יכול להשתמש בשיטות כמו ' pop()', 'push()' או 'join() '.
בלוג זה יסביר את העבודה של HTML DOMTokenList Objects על ידי JavaScript.
כיצד לעבוד עם JavaScript HTML DOMTokenList אובייקטים?
HTML DOMTokenList אינו דבר בפני עצמו והערך שלו נובע רק מהמאפיינים והשיטות ששוכנים בו. הבה נבקר במאפיינים ובשיטות אלה בפירוט יחד עם יישום נכון.
שיטה 1: שיטה Add()
ה ' לְהוֹסִיף ()' מצרף או מקצה מחלקות חדשות, מאפיינים או אסימונים פשוטים עם האלמנט הנבחר. התחביר שלו מצוין להלן:
htmlאלמנט. לְהוֹסִיף ( oneOrMoreToken )
היישום שלו מתבצע באמצעות הקוד הבא:
< רֹאשׁ >
< סִגְנוֹן >
.גודל גופן{
גודל גופן: גדול;
}
.צֶבַע{
צבע רקע: כחול צוער;
צבע: עשן לבן;
}
< / סִגְנוֹן >
< / רֹאשׁ >
< גוּף >
< h1 סִגְנוֹן = 'צבע: כחול צוער;' > לינוקס < / h1 >
< לַחְצָן בלחיצה = 'פעולה()' > פֶּתֶן < / לַחְצָן >
< ע > לחץ על הלחצן שלמעלה כדי ליישם סטיילינג < / ע >
< div תְעוּדַת זֶהוּת = 'נבחר' >
< ע > אני טקסט נבחר. < / ע >
< / div >
< תַסרִיט >
function action() {
document.getElementById('selected').classList.add('fontSize', 'color');
}
< / תַסרִיט >
< / גוּף >
ההסבר של הקוד לעיל הוא כדלקמן:
- ראשית, בחר שתי מחלקות CSS ' גודל גופן ' ו'צבע' והקצו להם מאפייני CSS אקראיים כמו ' גודל גופן', 'צבע רקע' ו'צבע '.
- לאחר מכן, צור כפתורים באמצעות '< לַחְצָן >' תג המעורר את ה-' פעולה ()' באמצעות הפונקציה ' בלחיצה 'מאזין אירועים.
- בנוסף, צור הורה ' div ' רכיב ולהקצות לו מזהה של ' נבחר ' והכנס בתוכו נתוני דמה.
- לאחר מכן, הגדר את ' פעולה ()' פונקציה ואחסן את ההפניה של האלמנט הנבחר על ידי גישה למזהה הייחודי שלו.
- לבסוף, השתמש ב' classList ' מאפיין כדי להקצות את השיעורים ולצרף את ' לְהוֹסִיף ()' שיטה. לאחר מכן, העבירו את מחלקות ה-CSS בתוך סוגריים של שיטה זו והיא תחיל את המחלקות הללו על האלמנט הנבחר.
הפלט לאחר הידור של הקוד לעיל נוצר כ:
ה-GIF שלמעלה מאשר ששיעורי ה-CSS הוקצו לרכיב נבחר באמצעות ' לְהוֹסִיף ()' שיטה.
שיטה 2: Remove() Method
שיטה זו מסירה את המחלקה או המזהה הספציפיים מאחד או יותר מהאלמנטים שנבחרו כפי שנעשה בקוד שלהלן:
< רֹאשׁ >< סִגְנוֹן >
.גודל גופן {
גוֹפָן- גודל : גדול;
}
. צֶבַע {
רקע כללי- צֶבַע : קדטבלו;
צֶבַע : עשן לבן;
}
< / סִגְנוֹן >
< / רֹאשׁ >
< גוּף >
< h1 סִגְנוֹן = 'צבע: כחול צוער;' > Linuxhint < / h1 >
< לַחְצָן בלחיצה = 'פעולה()' >מוסף< / לַחְצָן >
< ע >לחץ על הלחצן לעיל כדי ליישם סטיילינג< / ע >
< div תְעוּדַת זֶהוּת = 'נבחר' מעמד = 'צבע גודל גופן' >
< ע > אני נבחר טֶקסט .< / ע >
< / div >
< תַסרִיט >
פוּנקצִיָה פעולה ( ) {
document.getElementById ( 'נבחר' ) .classList.remove ( 'צֶבַע' ) ;
}
< / תַסרִיט >
< / גוּף >
התיאור של הקוד לעיל הוא כדלקמן:
- בתחילה, הקוד שהוסבר בקוד לעיל משמש כאן כדוגמה.
- כאן, גם ה' צֶבַע ' ו' גודל גופן ' מחלקות מוקצות ישירות לרכיב הנבחר.
- לאחר מכן, בתוך ' פעולה ()' הפונקציה המופעלת על ידי ' בלחיצה מאזין האירועים לְהַסִיר ()' נעשה שימוש בשיטת האסימון.
- שיטה זו לוקחת מחלקה אחת או מרובות אשר יוסרו מהאלמנט הנבחר. במקרה שלנו, ה' צֶבַע הכיתה תוסר מאלמנט ה-HTML שנבחר.
הפלט עבור הקוד לעיל מוצג כך:
הפלט שלמעלה מראה שמחלקת ה-CSS הספציפית הוסרה מהאלמנט הנבחר באמצעות שיטת 'remove()'.
שיטה 3: שיטה () Toggle
ה ' לְמַתֵג שיטת ()' היא השילוב של שניהם ' לְהוֹסִיף ()' ו-' לְהַסִיר ()' שיטות. תחילה הוא מקצה את מחלקת ה-CSS שסופקה לרכיב ה-HTML הנבחר ולאחר מכן מסיר אותו בהתאם לפעולות המשתמש.
< html >< רֹאשׁ >
< סִגְנוֹן >
.גודל גופן {
גוֹפָן- גודל : xx-large;
}
. צֶבַע {
רקע כללי- צֶבַע : קדטבלו;
צֶבַע : עשן לבן;
}
< / סִגְנוֹן >
< / רֹאשׁ >
< גוּף >
< h1 סִגְנוֹן = 'צבע: כחול צוער;' > Linuxhint < / h1 >
< לַחְצָן בלחיצה = 'פעולה()' >מוסף< / לַחְצָן >
< ע >לחץ על הלחצן לעיל כדי ליישם סטיילינג< / ע >
< div תְעוּדַת זֶהוּת = 'נבחר' >
< ע > אני נבחר טֶקסט .< / ע >
< / div >
< תַסרִיט >
פוּנקצִיָה פעולה ( ) {
document.getElementById ( 'נבחר' ) .classList.toggle ( 'גודל גופן' ) ;
}
< / תַסרִיט >
< / גוּף >
< / html >
להלן תיאור של הקוד לעיל:
- נעשה שימוש באותה תוכנית כפי שנעשה בה שימוש בסעיף לעיל, רק ' לְמַתֵג שיטת ()' מוחלפת ב-' לְהַסִיר ()' שיטה.
בסוף שלב ההידור, הפלט יהיה כדלקמן:
הפלט מראה שמחלקת ה-CSS הספציפית מתווספת ומוסרת בהתאם לפעולת המשתמש.
שיטה 4: Contains() Method
ה ' מכיל שיטת ()' משמשת לבדיקת הזמינות של מחלקות CSS ספציפיות על פני אלמנט ה-HTML והיישום שלה מצוין להלן:
< תַסרִיט >פוּנקצִיָה פעולה ( ) {
תן x = מסמך. getElementById ( 'נבחר' ) . classList . מכיל ( 'גודל גופן' ) ;
מסמך. getElementById ( 'מִבְחָן' ) . innerHTML = איקס ;
}
תַסרִיט >
החלק של HTML ו-CSS נשאר זהה. רק ב-< תַסרִיט >' תג, השיטה 'contains()' מוחלת על האלמנט שנבחר כדי לבדוק אם ה-' גודל גופן ' מוחל על רכיב זה או לא. לאחר מכן, התוצאה מוצגת בדף האינטרנט ברכיב HTML בעל מזהה ' מִבְחָן '.
לאחר הידור של הקוד לעיל, דף האינטרנט מופיע כך:
הפלט מראה שהערך של ' נָכוֹן ” מוחזר, כלומר מחלקת ה-CSS הספציפית מוחלת על אלמנט ה-HTML שנבחר.
שיטה 5: Item() Method
ה ' פריט שיטת ()' בוחרת את האסימון או מחלקת ה-CSS בהתאם למספר האינדקס שלהם, החל מ-' 0 ', כפי שמוצג מטה:
< גוּף >< סגנון h1 = 'צבע: כחול צוער;' > לינוקס h1 >
< כפתור בלחיצה = 'פעולה()' > בּוֹדֵק לַחְצָן >
< ע > ה-CSS מעמד אשר מוקצה בהתחלה , מוחזר : ע >
< h3 מזהה = 'useCase' מעמד = 'firstCls secondCls thirdCls' > h3 >
< תַסרִיט >
פוּנקצִיָה פעולה ( ) {
תן demoList = מסמך. getElementById ( 'useCase' ) . classList . פריט ( 0 ) ;
מסמך. getElementById ( 'useCase' ) . innerHTML = demoList ;
}
תַסרִיט >
גוּף >
הסבר על הקוד לעיל:
- ראשית, מחלקות CSS מרובות מוקצות לרכיב הנבחר שלנו עם מזהה של ' useCase ' ושיטת 'action()' המופעלת באמצעות ' בלחיצה 'אירוע.
- בפונקציה זו, ' פריט שיטת ()' עם אינדקס של ' 0 ' מתחברת לרכיב הנבחר. התוצאה נשמרת במשתנה ' demoList ' אשר לאחר מכן מודפס על גבי דף האינטרנט באמצעות ' innerHTML ' תכונה.
לאחר סיום ההידור, הפלט מגיע כך:
הפלט מציג את השם של מחלקת ה-CSS אשר חלה בהתחלה על האלמנט הנבחר ומתקבלת.
שיטה 6: אורך נכס
ה ' אורך ” המאפיין של tokenList מחזיר את מספר האלמנטים או המחלקות המוקצות אשר מוחלים על האלמנט הנבחר. תהליך היישום מצוין להלן:
< תַסרִיט >פוּנקצִיָה פעולה ( ) {
לתת להם להרוס = מסמך. getElementById ( 'useCase' ) . classList . אורך ;
מסמך. getElementById ( 'useCase' ) . innerHTML = לַהֲרוֹס ;
}
תַסרִיט >
בגוש הקוד שלמעלה:
- קודם ה ' אורך 'נכס צמוד ל' classList ' מאפיין כדי לאחזר את מספר המחלקות המוקצות על האלמנט הנבחר.
- לאחר מכן, התוצאה של המאפיין מאוחסנת במשתנה ' לַהֲרוֹס ' שיוצג על פני דף האינטרנט ברכיב עם המזהה של ' useCase '.
- שאר הקוד נשאר כמו בסעיף לעיל.
הפלט שנוצר לאחר ההידור מצוין להלן:
הפלט מחזיר את המחלקות המיושמות מעל האלמנט.
שיטה 7: Replace() Method
ה ' החלף ()' השיטה היא כזו שלוקחת שני פרמטרים לפחות ומחליפה את הפרמטר הראשון בפרמטר השני עבור האלמנט הנבחר, כפי שמוצג להלן:
< תַסרִיט >פוּנקצִיָה פעולה ( ) {
תן demoList = מסמך. getElementById ( 'useCase' ) . classList . החלף ( 'גודל גופן' , 'צֶבַע' ) ;
}
תַסרִיט >
הנה, ה-CSS ' גודל גופן 'מחלקה מוחלפת ב-CSS' צֶבַע ' מחלקה עבור רכיב עם מזהה של ' useCase '. שאר קוד ה-HTML וה-CSS נשאר אותו דבר כמו בסעיפים לעיל.
לאחר שינוי ה' תַסרִיט ' חלק וקומפילציה של קובץ ה-HTML הראשי, הפלט נראה כך:
הפלט מראה שמחלקת ה-CSS הספציפית הוחלפה במחלקה אחרת.
שיטה 8: נכס ערך
ה ' ערך ” מאפיין רשימת האסימון מאחזר את הערכים הנדרשים שהוקצו לרכיב ה-HTML שנבחר. כשהוא מחובר ליד ' classList ' מאפיין, המחלקות שהוקצו לרכיבים שנבחרו מאוחזרות, כפי שמודגם להלן:
< תַסרִיט >פוּנקצִיָה פעולה ( ) {
תן demoVal = מסמך. getElementById ( 'useCase' ) . classList . ערך ;
מסמך. getElementById ( 'הדפס' ) . innerHTML = demoVal ;
}
תַסרִיט >
תיאור של קטע הקוד שצוין לעיל:
- בתוך ה ' פעולה ()' גוף הפונקציה, ה-' ערך ' הנכס צמוד ליד ' classList ' מאפיין כדי לאחזר את כל המחלקות שהוקצו של רכיבי ה-HTML שנבחרו.
- לאחר מכן, התוצאה של המאפיין לעיל נשמרת במשתנה ' demoVal ' והוכנס מעל האלמנט בעל המזהה 'הדפס'.
לאחר סיום שלב ההידור, הפלט בדף אינטרנט נוצר באופן הבא:
הפלט מציג את השם של מחלקות CSS המוחלות על האלמנט הנבחר.
סיכום
האובייקט HTML DOM TokenList הוא כמו מערך המאחסן שיטות ומאפיינים מרובים המשמשים להחלת פונקציונליות ספציפית על אלמנט ה-HTML המסופק. כמה מהשיטות החשובות והנפוצות ביותר שמסופקות על ידי TokenList הן ' add()', 'remove()', 'toggle()', 'contains()', 'item()', ו-'replace() '. המאפיינים שמסופקים על ידי TokenList הם ' אורך ' ו' ערך '. מאמר זה הסביר את ההליך לעבודה עם אובייקט JavaScript HTML DOMTokenList.