v148 · in developer trial

PI Query Explorer

Paste HTML containing processing instructions and use a TreeWalker(SHOW_PROCESSING_INSTRUCTION) to query, filter, and inspect PI nodes live in your browser. Filter by target name, see DOM path, and generate the TreeWalker code needed to replicate each query.

Presets:

HTML input —

DOM tree with PI nodes:

Parse the HTML to see the DOM tree.

TreeWalker query —

Generated TreeWalker code

// Parse HTML first to generate the TreeWalker code.

how TreeWalker finds PI nodes

The SHOW_PROCESSING_INSTRUCTION filter (value 64) tells TreeWalker to visit only ProcessingInstruction nodes. Chrome 148 parses <?target data?> in HTML into real PI nodes, so this query now works on HTML documents — not just XML.

const doc = new DOMParser().parseFromString(html, 'text/html');
const walker = doc.createTreeWalker(
  doc.body,
  NodeFilter.SHOW_PROCESSING_INSTRUCTION, // 64
  {
    acceptNode(node) {
      if (target === '*') return NodeFilter.FILTER_ACCEPT;
      return node.target === target
        ? NodeFilter.FILTER_ACCEPT
        : NodeFilter.FILTER_REJECT;
    }
  }
);
let node;
while ((node = walker.nextNode())) {
  console.log(node.target, node.data); // e.g. "start", 'name="intro"'
}

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗