Parse processing instructions in HTML

at a glance

what processing instructions are

Processing instructions (PIs) are a construct from XML with the syntax <?target data?>. They exist in the DOM as ProcessingInstruction nodes (a subclass of CharacterData) with target and data properties. They are already first-class citizens in XML/XHTML DOM but have historically been stripped by the HTML5 parser.

Typical use cases include:

• Streaming markers — a PI can mark a range boundary in out-of-order HTML streaming without introducing visible elements or affecting CSS layout.
• Parser directives — a PI can instruct a server-side or client-side rendering engine about how to buffer, inject, or process the surrounding content.
• Lightweight annotations — PIs provide a way to embed metadata in the DOM tree without wrapping content in extra elements.

shape of the API

Processing instructions are accessible through normal DOM traversal: TreeWalker, NodeIterator, childNodes, querySelector (does not match PIs, but iteration does).

example

<!-- HTML source with processing instructions -->
<div id="content">
  <?stream-start id="chunk-1"?>
  <p>First paragraph</p>
  <?stream-end id="chunk-1"?>
</div>

<script>
// Chrome 150+: PIs are now in the DOM
const walker = document.createTreeWalker(
  document.getElementById('content'),
  NodeFilter.SHOW_PROCESSING_INSTRUCTION
);
let node;
while ((node = walker.nextNode())) {
  console.log(node.target, node.data);
  // "stream-start" "id=\"chunk-1\""
  // "stream-end"   "id=\"chunk-1\""
}

// Access via childNodes
const div = document.getElementById('content');
for (const child of div.childNodes) {
  if (child.nodeType === Node.PROCESSING_INSTRUCTION_NODE) {
    console.log('PI:', child.target, child.data);
  }
}
</script>

browser support

see also

• Chrome Platform Status — Parse processing instructions in HTML
• DOM Living Standard — ProcessingInstruction