19.1 Advanced DOM Traversal

Overview

Beyond basic DOM navigation, JavaScript provides powerful APIs for traversing and manipulating the DOM tree efficiently.

TreeWalker API

┌─────────────────────────────────────────────────────────────────────────┐
│                    TreeWalker Navigation                                │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                         │
│                        ┌─────────┐                                      │
│                        │  root   │                                      │
│                        └────┬────┘                                      │
│                   ┌─────────┼─────────┐                                │
│                   ▼         ▼         ▼                                │
│              ┌────────┐ ┌────────┐ ┌────────┐                          │
│              │ child1 │ │ child2 │ │ child3 │                          │
│              └────┬───┘ └────────┘ └────────┘                          │
│              ┌────┴────┐                                               │
│              ▼         ▼                                               │
│         ┌────────┐ ┌────────┐                                          │
│         │grandch1│ │grandch2│                                          │
│         └────────┘ └────────┘                                          │
│                                                                         │
│  TreeWalker Methods:                                                    │
│  • parentNode()    - Move to parent                                     │
│  • firstChild()    - Move to first child                               │
│  • lastChild()     - Move to last child                                │
│  • previousSibling() - Move to previous sibling                        │
│  • nextSibling()   - Move to next sibling                              │
│  • nextNode()      - Next in document order                            │
│  • previousNode()  - Previous in document order                        │
│                                                                         │
└─────────────────────────────────────────────────────────────────────────┘

Node Filters

Basic TreeWalker

const walker = document.createTreeWalker(
  document.body, // Root node
  NodeFilter.SHOW_ELEMENT, // What to show
  {
    acceptNode: (node) => {
      return node.classList.contains('target')
        ? NodeFilter.FILTER_ACCEPT
        : NodeFilter.FILTER_SKIP;
    },
  }
);

// Navigate the tree
while (walker.nextNode()) {
  console.log(walker.currentNode);
}

Range API

// Create a range
const range = document.createRange();

// Select node contents
range.selectNodeContents(element);

// Set specific boundaries
range.setStart(startNode, startOffset);
range.setEnd(endNode, endOffset);

// Extract contents
const fragment = range.extractContents();

Selection API

// Get current selection
const selection = window.getSelection();

// Get selected text
const text = selection.toString();

// Get selected range
const range = selection.getRangeAt(0);

// Modify selection
selection.removeAllRanges();
selection.addRange(newRange);

Custom Queries

// Find by custom attribute pattern
function findByDataPrefix(prefix) {
  return document.querySelectorAll(`[data-${prefix}]`);
}

// Find text nodes containing string
function findTextContaining(text) {
  const walker = document.createTreeWalker(
    document.body,
    NodeFilter.SHOW_TEXT,
    {
      acceptNode: (node) =>
        node.textContent.includes(text)
          ? NodeFilter.FILTER_ACCEPT
          : NodeFilter.FILTER_REJECT,
    }
  );

  const results = [];
  while (walker.nextNode()) {
    results.push(walker.currentNode);
  }
  return results;
}

Summary

• •TreeWalker for controlled DOM traversal
• •NodeIterator for simpler linear traversal
• •Range API for selecting DOM regions
• •Selection API for user selections
• •Combine filters for precise node finding