demo · v148

PI Tree Inspector

Type HTML into the left pane. The right pane shows the parsed DOM tree using DOMParser. Processing instructions (<?target data>) appear as their own DOM node type — that's the new behaviour in Chrome 148.

About this demo: The parser used here is DOMParser with both text/html (HTML parser; new in 148) and application/xml (always supported) modes. Toggle to see how the same input is interpreted differently.

input · HTML

DOM tree

Processing instructions found: 0

what's happening

The demo wraps your input in a minimal HTML scaffold and parses it twice — once as text/html and once as application/xml. In Chrome 148, both modes now produce ProcessingInstruction nodes for <?target data> syntax. Before this change, the HTML parser silently dropped PIs (or treated them as comments).

const parser = new DOMParser();
const doc = parser.parseFromString(input, "text/html");

function walk(node, indent = 0) {
  for (const child of node.childNodes) {
    switch (child.nodeType) {
      case Node.PROCESSING_INSTRUCTION_NODE:
        // <?target data> — exposed as ProcessingInstruction
        console.log(`PI: target=${child.target} data=${child.data}`);
        break;
      case Node.ELEMENT_NODE:
        console.log(`<${child.tagName.toLowerCase()}>`);
        walk(child, indent + 2);
        break;
      case Node.TEXT_NODE:
        if (child.data.trim()) console.log(`text: ${child.data.trim()}`);
        break;
    }
  }
}
walk(doc.body ?? doc);

see also

implementation reference

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