דף הבית » קידוד » שיטות JavaScript עבור מניפולציה DOM עבור מפתחי אינטרנט

    שיטות JavaScript עבור מניפולציה DOM עבור מפתחי אינטרנט

    כמפתח אינטרנט, לעתים קרובות אתה צריך לתפעל את DOM, מודל האובייקט המשמש את הדפדפנים ל ציין את המבנה הלוגי של דפי אינטרנט, ועל בסיס זה מבנה להפוך רכיבי HTML על המסך.

    HTML מגדיר את מבנה ברירת המחדל של DOM. עם זאת במקרים רבים ייתכן שתרצה לתפעל את זה עם JavaScript, בדרך כלל על מנת להוסיף פונקציות נוספות לאתר.

    IMAGE: Google Developers

    בהודעה זו, תמצא רשימה של 15 שיטות בסיסיות של כי סיוע DOM מניפולציה. סביר להניח שאתה משתמש בשיטות אלה לעתים קרובות בקוד שלך, ואתה גם להיתקל בהם ב- JavaScript שלנו Tutorials.

    1. querySelector ()

    ה querySelector () שיטה מחזירה את האלמנט הראשון התואם בורר CSS אחד או יותר. אם לא נמצאה התאמה, היא תחזור ריק.

    לפני querySelector () היה הציג, מפתחים בשימוש נרחב getElementById () אשר אשר מביא אלמנט עם שצוין id ערך.

    למרות ש getElementById () היא עדיין שיטה שימושית, אבל עם החדש querySelector () ו querySelectorAll () שיטות אנו חופשיים אלמנטים היעד מבוסס על כל בורר CSS, ולכן יש לנו גמישות רבה יותר.

    תחביר
    var ele = document.querySelector (בורר);
    • ele - רכיב ההתאמה הראשון או ריק (אם אף רכיב אינו תואם לסלקטורים)
    • 28 - בורר CSS אחד או יותר, כגון "#fooId", ".fooClassName", ".class1.class2", או ".class1, .class2"
    דוגמה קוד

    בדוגמה זו, הראשונה

    נבחר עם querySelector () השיטה והצבע שלה משתנה לאדום.

     
    פסקה 1
     
    פסקה 2
     
    אחת
     
    פסקה שלוש
     
    12te
     
     var firstDiv = document.querySelector ('div'); firstDiv.style.color = 'red';
    הדגמה אינטראקטיבית

    בדוק את querySelector () שיטה בהדגמה אינטראקטיבית הבאה. כל שעליך לעשות הוא להקליד בורר התואם את אלה שתוכל למצוא בתוך תיבות הכח הכחולות (למשל. #three), ולחץ על הלחצן 'בחר'. שים לב שאם אתה מקליד .בלוק, רק במקרה הראשון שלה ייבחרו.

    2. querySelectorAll ()

    בניגוד querySelector () המחזירה רק את המופע הראשון של כל האלמנטים התואמים, querySelectorAll () מחזירה את כל האלמנטים התואמים את בורר CSS שצוין.

    האלמנטים התואמים מוחזרים כ- a NodeList אובייקט שיהיה אובייקט ריק אם לא נמצאו רכיבים תואמים.

    תחביר
    var eles = document.querySelectorAll (סלקטור);
    • eles - א NodeList אובייקט עם כל האלמנטים התואמים כערכי מאפיינים. האובייקט ריק אם לא נמצאו התאמות.
    • 28 - בורר CSS אחד או יותר, כגון "#fooId", ".fooClassName", ".class1.class2", או ".class1, .class2"
    דוגמה קוד

    הדוגמה שבהמשך משתמשת באותה HTML כמו הקודמת. עם זאת, בדוגמה זו, כל הסעיפים נבחרים עם querySelectorAll (), והם בצבע כחול.

     
    פסקה 1
     
    פסקה 2
     
    אחת
     
    פסקה שלוש
     
    12te
     
     var paragraph = document.querySelectorAll ('p'); עבור (var p של פסקאות) p.style.color = 'כחול';

    3. addEventListener ()

    אירועים עיין במה שקורה לאלמנט HTML, כגון לחיצה, מיקוד או טעינה, שאליהם אנו יכולים להגיב עם JavaScript. אנחנו יכולים להקצות פונקציות JS ל להקשיב עבור אירועים אלה באלמנטים ולעשות משהו כאשר האירוע התרחש.

    ישנן שלוש דרכים שאתה יכול להקצות פונקציה לאירוע מסוים.

    אם foo () היא פונקציה מותאמת אישית, אתה יכול לרשום את זה כמו מאזין אירוע לחץ (התקשר אליו כאשר לוחצים על הלחצן) בשלוש דרכים:

    1.  
    2.  var btn = document.querySelector ('לחצן'); btn.onclick = foo;
    3.  var btn = document.querySelector ('לחצן'); btn.addEventListener ('click', foo);

    השיטה addEventListener () (הפתרון השלישי) יש כמה יתרונות; זה הסטנדרט האחרון - המאפשר הקצאה של יותר מפונקציה אחת כמו מאזיני האירוע לאירוע אחד - ומגיע עם קבוצה שימושית של אפשרויות.

    תחביר
    ele.addEventListener (evt, מאזין, [אפשרויות]);
    • ele - רכיב HTML המאזין האירוע יהיה להקשיב.
    • Evt - האירוע הממוקד.
    • מאזינה - בדרך כלל, פונקציית JavaScript.
    • אפשרויות - (אופציונלי) אובייקט עם קבוצה של תכונות בוליאניות (המפורטות להלן).
    אפשרויות מה קורה, מתי זה מוגדר נכון?
    ללכוד

    עצירת האירוע מבעבעת, כלומר מונעת קריאה של מאזיני אירוע עבור אותו סוג אירוע באבות של האלמנט.

    כדי להשתמש בתכונה זו, ניתן להשתמש בשני תחביר:

    1. ele.addEventListener (evt, מאזין, נכון)
    2. ele.addEventListener (evt, מאזין, ללכוד: נכון);
    פעם אחת

    המאזין נקרא רק בפעם הראשונה שהאירוע מתרחש, ואז הוא מנותק באופן אוטומטי מהאירוע, ולא יופעל על ידו עוד.
    פסיבי

    לא ניתן לעצור את פעולת ברירת המחדל של האירוע בשיטת מניע ().
    דוגמה קוד

    בדוגמה זו, אנו מוסיפים מאזין לאירועי קליקים foo, אל ה 

     var btn = document.querySelector ('לחצן'); btn.addEventListener ('click', foo); function foo () Alert ('hello');
    הדגמה אינטראקטיבית

    הקצה את foo () פונקציה מותאמת אישית כמאזין אירועים לכל אחד משלושת האירועים הבאים: קלט, לחץ על או עכבר הפעל את האירוע שנבחר בשדה הקלט התחתון על ידי ריחוף, לחיצה עליו או הקלדתו.

    4. removeEventListener ()

    ה removeEventListener () שיטה מנתק מאזין לאירועים נוסף בעבר עם addEventListener () שיטה מהאירוע הוא מקשיב.

    תחביר
    ele.removeEventListener (evt, listener, [options]);

    משתמש באותה תחביר כמו הנ"ל addEventListener () שיטה (למעט פעם אחת אפשרות שאינה נכללת). האפשרויות משמשות להיות ספציפיות מאוד על זיהוי המאזין להיות מנותק.

    דוגמה קוד

    בעקבות קוד דוגמה השתמשנו ב addEventListener (), כאן אנו מסירים את המאזין האירוע לחץ נקרא foo מ ה