כיצד לסנן לחצות עץ DOM עם

האם ידעת שיש ממשק API של JavaScript שמשימתו היחידה היא לסנן ולצאת דרך הצמתים אנחנו רוצים מעץ DOM? למעשה, לא אחד אבל יש שני APIs כאלה: NodeIterator ו טריוולקר. הם דומים למדי זה לזה, עם כמה הבדלים שימושיים. שניהם יכולים להחזיר רשימה של צמתים אשר נמצאים תחת הצומת שורש נתון תוך עמידה כל כללי מסנן מוגדרים מראש ו / או מותאמים אישית חל עליהם.

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

כיצד להשתמש NodeIterator API

א NodeIterator אובייקט ניתן ליצור באמצעות createNodeIterator () השיטה של מסמך ממשק. השיטה הזאת לוקח שלושה טיעונים. הראשון הוא נדרש; זה”s צומת שורש שמכיל את כל הצמתים שאנחנו רוצים לסנן.

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

לדוגמה, אם NodeFilter.SHOW_TEXT קבוע הוא הוסיף את הפרמטר השני הוא יחזיר iterator עבור רשימה של כל צמתים הטקסט מתחת הצומת שורש. NodeFilter.SHOW_ELEMENT יחזור רק את הצומת רכיב. ראה רשימה מלאה של כל הקבועים הזמינים.

הארגומנט השלישי (המסנן המותאם אישית) הוא פונקציה מיישמת את המסנן.

הנה קטע קוד לדוגמה - -You

        
כותרת
 
 זה עטיפת הדף 
שלום
 
מה שלומך?
 
 טקסט איזה קישור    

בהנחה שאנחנו רוצים לחלץ את התוכן של כל צמתים טקסט כי הם בתוך #wrapper div, זה איך אנחנו הולכים על זה באמצעות NodeIteratorYou

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT); בעוד (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * console output [התחבר] זהו עטיפת הדף [התחבר] שלום [התחבר] [התחבר] מה שלומך? [יומן] * / 

ה NextNode () השיטה של NodeIterator API מחזירה את הצומת הבא ברשימה של צמתים טקסט איטרבל. כאשר אנו משתמשים בו ב בזמן לולאה כדי לגשת לכל צומת ברשימה, אנו נכנסים תוכן גזוז של כל צומת טקסט לתוך המסוף. ה referenceNode רכוש של NodeIterator מחזירה את הצומת שהאיטרנט מחובר אליה כעת.

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

 var div = document.querySelector ('# wrapper'); var nodeIterator = document.createNodeIterator (div, NodeFilter.SHOW_TEXT, function (node) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); בעוד (nodeIterator.nextNode ()) console.log (nodeIterator.referenceNode.nodeValue.trim ());  / * console output [התחבר] זהו דף השער [יומן] שלום [התחבר] מה שלומך? * / 

פונקציית המסנן המותאמת אישית מחזירה את הקבוע NodeFilter.FILTER_ACCEPTאם צומת הטקסט אינו ריק, אשר מוביל הכללה של הצומת ברשימה של צמתים iterator יהיה איטרטינג מעל. לעומת זאת, NodeFilter.FILTER_REJECT קבוע הוא חזר על מנת לא לכלול את בלוטות הטקסט הריקות מתוך רשימה של צמתים.

כיצד להשתמש טריוולקר API

כפי שציינתי קודם, NodeIterator ו טריוולקר ממשקי API הם דומים זה לזה.

טריוולקר ניתן ליצור באמצעות CreateTreeWalker () השיטה של מסמך ממשק. שיטה זו, בדיוק כמו createNodeFilter (), לוקח שלושה טיעוניםYou את צומת הבסיס, מסנן מוגדר מראש ומסנן מותאם אישית.

אם אנחנו להשתמש ב טריוולקר API במקום NodeIterator קטע הקוד הקודם נראה כך:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_TEXT, function (node) return (node.nodeValue.trim ()! == "")? NodeFilter.FILTER_ACCEPT: NodeFilter.FILTER_REJECT;); בעוד (treeWalker.nextNode ()) console.log (treeWalker.currentNode.nodeValue.trim ());  / * output [התחבר] זהו דף השער [יומן] שלום [התחבר] מה שלומך? * / 

במקום referenceNode, ה נוכחי רכוש של טריוולקר ממשק API משמש לגשת הצומת אליו הוא מחובר כרגע. בנוסף ל NextNode () שיטה, טריווקר יש שיטות שימושיות אחרות. ה הקודםNode () שיטה NodeIterator) מחזירה את הצומת הקודם של הצומת איטרטור כרגע מעוגן.

פונקציונליות דומה מבוצעת על ידי parentNode (), ילד ראשון(), ילד אחרון(), PreviousSibling (), ו הבא הבא שיטות. שיטות אלה הן זמין רק ב טריוולקר API.

הנה דוגמה לקוד זה פלט את הילד האחרון של הצומת האיטרנט מעוגן:

 var div = document.querySelector ('# wrapper'); var treeWalker = document.createTreeWalker (div, NodeFilter.SHOW_ELEMENT); console.log (treeWalker.lastChild ()); / * פלט [התחבר] 
מה שלומך?
 * / 

איזה ממשק API לבחור

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