v150 · HTML · DOM

Live PI Editor

Type HTML containing <?target data?> processing instructions. Chrome 150 preserves them as ProcessingInstruction DOM nodes (type 7) — the tree on the right shows every node the parser creates, with PIs highlighted in green.

Checking ProcessingInstruction support…
Presets:
HTML input
DOM tree
ProcessingInstruction nodes found
none

querying ProcessingInstruction nodes

// Chrome 150: PIs survive the HTML parser as real DOM nodes
const doc = new DOMParser().parseFromString(html, 'text/html');

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

let pi;
while ((pi = walker.nextNode())) {
  console.log(pi.nodeType);  // 7 (Node.PROCESSING_INSTRUCTION_NODE)
  console.log(pi.target);    // e.g. "start"
  console.log(pi.data);      // e.g. "article"
}

// Serialises back correctly
console.log(doc.body.innerHTML);
// → <?start article?> ... <?end article?>

see also

implementation reference

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