DOM 节点遍历可视化

DOM 树是树形结构，且对 DOM 的操作可以在浏览器中看到，那么是否可以借此做对树形结构操作的可视化呢？

今日在写一个用来高亮 DOM 节点中匹配到指定正则的文本的代码时，实现了一个遍历 DOM 节点的函数：

const traverseNode = (node, cb, isChild) => {
  if (node.firstChild) {
    traverseNode(node.firstChild, cb, true);
  }

  cb(node);

  if (isChild && node.nextSibling) {
    traverseNode(node.nextSibling, cb, true);
  }
};

写完之后，我想到一个问题：既然 DOM 树是个树形结构，而且对 DOM 节点样式的修改可以被浏览器反映出来，那么是否可以做出遍历树形结构的可视化呢？

成果：