v150 · HTML · DOM Explorer

Processing Instruction DOM Explorer

Type HTML containing <?target data?> processing instructions and see the DOM nodes Chrome 150 creates. Click any ProcessingInstruction node to inspect its target and data properties.

Chrome 150 required. Older browsers drop processing instructions during parsing — they appear as Comment nodes or nothing at all. Chrome 150 creates proper ProcessingInstruction nodes (nodeType 7).

live explorer

1. Load example markup

Presets only replace the editor text. They do not parse until you run the parser.

No preset loaded.

2. Parse editor

Parse whatever is currently in the HTML input and rebuild the DOM tree.

HTML input (edit directly or load a preset):
DOM tree (click a PI node for details):
Load a preset or edit the HTML, then press "Parse current HTML".

code

// Parse HTML with processing instructions
const parser = new DOMParser();
const doc = parser.parseFromString(`
  <div>
    <?start header?>
    <h1>Title</h1>
    <?end header?>
  </div>
`, 'text/html');

// Walk the DOM tree for ProcessingInstruction nodes
const walker = document.createTreeWalker(
  doc.body,
  NodeFilter.SHOW_PROCESSING_INSTRUCTION
);

let pi;
while (pi = walker.nextNode()) {
  console.log(pi.nodeType);  // 7 = PROCESSING_INSTRUCTION_NODE
  console.log(pi.target);    // "start" or "end"
  console.log(pi.data);      // "header"
}

see also

implementation reference

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