DOM TreeWalker API

Το TreeWalker API: Ένα ισχυρό εργαλείο για τη διέλευση του δέντρου DOM.

Το DOM TreeWalker API

Το TreeWalker API επιτρέπει στους προγραμματιστές να δημιουργήσουν ένα αντικείμενο treeWalker το οποίο μπορεί να χρησιμοποιηθεί για τη διέλευση του δέντρου DOM. Το treeWalker έχει έναν αριθμό μεθόδων που μπορούν να χρησιμοποιηθούν για τη μετακίνηση της τρέχουσας θέσης του treeWalker μέσα στο δέντρο DOM, καθώς και για την επιστροφή πληροφοριών σχετικά με τον τρέχοντα κόμβο.

Το TreeWalker API είναι ένα ισχυρό εργαλείο για τη διέλευση του δέντρου 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". Μόλις συναντήσει έναν τέτοιο κόμβο, προσθέτει ένα μαύρο περίγραμμα 1 px σε αυτόν. Αυτό είναι απλώς ένα απλό παράδειγμα του τι μπορείτε να κάνετε με το TreeWalker API.

(Σχεδόν) όλο πράσινο

Μία από τις προκλήσεις κατά τη χρήση του TreeWalker API είναι ότι μπορεί να είναι εύκολο να χαθεί η παρακολούθηση του τρέχοντος κόμβου. Αυτό συμβαίνει επειδή το API δεν παρέχει μεθόδους για την εύρεση ενός συγκεκριμένου κόμβου. Αντίθετα, πρέπει να χρησιμοποιήσετε τις μεθόδους για να μετακινηθείτε γύρω από το δέντρο, κάτι που μπορεί να είναι δύσκολο. Μια άλλη πρόκληση είναι ότι το API δεν υποστηρίζεται πολύ καλά από προγράμματα περιήγησης, επομένως ίσως χρειαστεί να χρησιμοποιήσετε ένα πολυγέμισμα.

Περίληψη

Το TreeWalker API είναι ένα ισχυρό εργαλείο για τη διέλευση του δέντρου DOM. Παρέχει έναν αριθμό μεθόδων για τη μετακίνηση γύρω από το δέντρο, καθώς και για τη λήψη πληροφοριών σχετικά με τον τρέχοντα κόμβο. Το API παρέχει επίσης ορισμένες πρακτικές μεθόδους για κοινές λειτουργίες. Ωστόσο, το API μπορεί να είναι δύσκολο στη χρήση και δεν υποστηρίζεται καλά από προγράμματα περιήγησης.

Άλλα ενδιαφέροντα API που σχετίζονται με την ανάκτηση δεδομένων DOM είναι τα ακόλουθα, τα οποία μπορεί να καλύψω στο μέλλον.

  • Το API εύρους DOM
  • Το DOM NodeIterator API