واجهة برمجة تطبيقات DOM TreeWalker

واجهة برمجة تطبيقات DOM TreeWalker

تسمح واجهة برمجة تطبيقات TreeWalker للمطورين بإنشاء كائن TreeWalker الذي يمكن استخدامه لاجتياز شجرة DOM. يحتوي TreeWalker على عدد من الطرق التي يمكن استخدامها لتحريك الموضع الحالي لـ treeWalker داخل شجرة DOM ، وكذلك لإرجاع معلومات حول العقدة الحالية.

تعد TreeWalker API أداة قوية لاجتياز شجرة DOM. باستخدامه ، يمكنك التنقل بسهولة حول الشجرة والحصول على معلومات حول العقد التي تصادفها. توفر واجهة برمجة التطبيقات أيضًا عددًا من طرق الراحة للعمليات الشائعة ، مثل الحصول على الشقيق التالي أو السابق للعقدة ، أو الحصول على العقدة الأصلية.

أمثلة على استخدامات 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". بمجرد أن تواجه مثل هذه العقدة ، فإنها تضيف حدًا أسود 1 بكسل إليها. هذا مجرد مثال بسيط لما يمكنك القيام به باستخدام TreeWalker API.

(تقريبا) كلها خضراء

تتمثل إحدى التحديات عند استخدام TreeWalker API في أنه قد يكون من السهل فقدان مسار العقدة الحالية. هذا لأن API لا يوفر أي طرق للعثور على عقدة معينة. بدلاً من ذلك ، عليك استخدام طرق التنقل حول الشجرة ، والتي قد تكون صعبة. التحدي الآخر هو أن واجهة برمجة التطبيقات لا تدعمها المتصفحات جيدًا ، لذلك قد تضطر إلى استخدام polyfill.

ملخص

تعد TreeWalker API أداة قوية لاجتياز شجرة DOM. يوفر عددًا من الطرق للتنقل حول الشجرة ، وكذلك للحصول على معلومات حول العقدة الحالية. يوفر API أيضًا بعض طرق الراحة للعمليات الشائعة. ومع ذلك ، يمكن أن تكون واجهة برمجة التطبيقات صعبة الاستخدام ، ولا تدعمها المتصفحات جيدًا.

واجهات برمجة التطبيقات الأخرى المثيرة للاهتمام المتعلقة باسترداد بيانات DOM هي التالية ، والتي قد أغطيها في المستقبل.

• نطاق DOM API
• واجهة برمجة تطبيقات DOM NodeIterator