ממשק API של DOM TreeWalker

ממשק ה-API של DOM TreeWalker

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

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

שימושים לדוגמה של TreeWalker API

var treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  { acceptNode: function(node) {
      return node.tagName === 'DIV' ?
        NodeFilter.FILTER_ACCEPT :
        NodeFilter.FILTER_SKIP;
  }},
  false
);

while(treeWalker.nextNode()) {
  console.log(treeWalker.currentNode.tagName);
}

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

var treeWalker = document.createTreeWalker(
  document.body,
  NodeFilter.SHOW_ELEMENT,
  { acceptNode: function(node) {
      // Check if the node is a DIV, and if it has the "my-class" class.
      return node.tagName === 'DIV' && node.classList.contains('my-class') ?
        NodeFilter.FILTER_ACCEPT :
        NodeFilter.FILTER_SKIP;
  }},
  false
);

while(treeWalker.nextNode()) {
  // Do something with the node, such as add a border.
  treeWalker.currentNode.style.border = '1px solid black';
}

הקוד שלמעלה עושה את אותו הדבר כמו הדוגמה הקודמת, אבל מקבל רק צמתי DIV שיש להם את המחלקה "my-class". ברגע שהוא נתקל בצומת כזה, הוא מוסיף לו גבול שחור של 1px. זוהי רק דוגמה פשוטה למה שאתה יכול לעשות עם TreeWalker API.

(כמעט) הכל ירוק

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

סיכום

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

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

• ממשק API של טווח DOM
• ממשק ה-API של DOM NodeIterator