DOM TreeWalker API

די DOM TreeWalker API

די TreeWalker API אַלאַוז דעוועלאָפּערס צו שאַפֿן אַ TreeWalker אַבדזשעקט וואָס קענען זיין גענוצט צו דורכפאָר די DOM בוים. די טרעעוואַלקער האט אַ נומער פון מעטהאָדס וואָס קענען זיין גענוצט צו מאַך די קראַנט שטעלע פון די טרעעוואַלקער אין די 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';
}

דער קאָד אויבן טוט די זעלבע ווי די פריערדיקע בייַשפּיל, אָבער בלויז אַקסעפּץ דיוו נאָודז וואָס האָבן די "מיין-קלאַס" קלאַס. אַמאָל עס ינקאַונטערז אַזאַ אַ נאָדע, עס מוסיף אַ 1 פּקס שוואַרץ גרענעץ צו עס. דאָס איז בלויז אַ פּשוט בייַשפּיל פון וואָס איר קענען טאָן מיט די TreeWalker API.

(כּמעט) אַלע גרין

איינער פון די טשאַלאַנדזשיז ווען ניצן די TreeWalker API איז אַז עס קען זיין גרינג צו פאַרלירן שפּור פון דעם קראַנט נאָדע. דאָס איז ווייַל די אַפּי גיט קיין מעטהאָדס צו געפֿינען אַ ספּעציפיש נאָדע. אַנשטאָט, איר האָבן צו נוצן די מעטהאָדס פֿאַר מאָווינג אַרום דעם בוים, וואָס קענען זיין טריקי. אן אנדער אַרויסרופן איז אַז די אַפּי איז נישט זייער געזונט געשטיצט דורך בראַוזערז, אַזוי איר קען האָבן צו נוצן אַ פּאָליפילל.

קיצער

די TreeWalker API איז אַ שטאַרק געצייַג פֿאַר דורכפאָר די DOM בוים. עס גיט אַ נומער פון מעטהאָדס פֿאַר מאָווינג אַרום דעם בוים, ווי געזונט ווי צו באַקומען אינפֿאָרמאַציע וועגן דעם קראַנט נאָדע. די אַפּי אויך גיט עטלעכע קאַנוויניאַנס מעטהאָדס פֿאַר פּראָסט אַפּעריישאַנז. אָבער, די אַפּי קענען זיין טשאַלאַנדזשינג צו נוצן און איז נישט געזונט געשטיצט דורך בראַוזערז.

אנדערע טשיקאַווע אַפּיס שייַכות צו DOM דאַטן ריטריוואַל זענען די פאלגענדע אָנעס, וואָס איך קען דעקן אין דער צוקונפֿט.

• די DOM Range API
• די DOM NodeIterator API