JS - DOM Traversal

Uczymy się rekurencyjnie przechodzić po drzewie DOM. Lekcja wymaga znajomości pewnych podstaw. Do dzieła.

Na początek – konstrukcja funkcji:

function traverseDOM() {
    
    function traverse(node) {
      if(node == null) 
        return;

      for(var child of node.children) 
        traverse(child);
    }

    traverse(document.documentElement); 
  }

Mamy funkcję główną i tzw. funkcję „_”, czyli z podkreśleniem (pomocniczą, enkapsulacja rekurencji). Dzięki JavaScript closures (domknięcia) nie musimy tak się bawić tylko możemy funkcję „_” zdefiniować wewnątrz głównej.

Dalej:

function traverseDOM() {
    
    function traverse(node) {
      if(node == null) 
        return;
      
      console.log(node);

      for(var child of node.children) 
        traverse(child);
    }

    traverse(document.documentElement); 
  
}

Funkcja wyżej wyświetli nam wszystkie nodes. Problem w tym, że nie widzimy ich głębokości. To też można rozwiązać:

function traverseDOM() {
    
    function traverse(node, depth=1) {
      if(node == null) 
        return;

      
      console.log(node);
      console.log("-".repeat(depth));

      let newDepth = depth + 1;

      for(var child of node.children) 
        traverse(child,newDepth);
    }

    traverse(document.documentElement, 1); 

  }

Tak to będzie wyglądać:

  window.addEventListener('DOMContentLoaded', function(){
    traverseDOM();
  });

//<html lang="en">
//-
//<head>
//-- 
//<meta charset="UTF-8">
//--- 
//<meta name="viewport" content="width=device-width, initial-scale=1.0">
//---
//<title>
//---
//<body>
//--

DOM Traversal to coś, co wykonuje querySelector czy inne funkcje tego typu ilekroć chcemy złapać jakiś element/elementy.

JS – DOM Traversal