dom2html

Serializes a dom-like tree into HTML

Usage no npm install needed!

<script type="module">
  import dom2html from 'https://cdn.skypack.dev/dom2html';
</script>

README

dom2html

Serializes a dom-like JSON tree into HTML. This is helpful if you end up with a DOM-like JSON object and need to serialize it to HTML. An example use case is using puppeteer to get the DOM tree from a page and wanting to recreate the flattened HTML including shadow roots, and by default, the contents of iframes.

Usage

const serialize = require('dom2html');
const jsonDOM = require('./dom.json');

console.log(serialize(jsonDOM, true, 'all'));

Parameters

serialize accepts three inputs

serialize(jsonDOM, includeIframes, domErrorOutput)

jsonDom is the nodelke JSON tree includeIframes is a boolean flag to define if you want to serialize iframe content, optional, defaults to true domErrorOutput is a string that defines where dom2html outputs errors if it cannot serialzie a node, 'all' outputs to console & inserts a html comment in the outputted html, 'console' only outputs to console.log(), 'comments' only outputs to html comments and silent outputs to neither. optional, defaults to all

An example

Let's say we have this JSON representation of a webpage:

{
    "nodeId": 1,
    "backendNodeId": 3,
    "nodeType": 9,
    "nodeName": "#document",
    "localName": "",
    "nodeValue": "",
    "childNodeCount": 2,
    "children": [{
        "nodeId": 2,
        "parentId": 1,
        "backendNodeId": 8,
        "nodeType": 10,
        "nodeName": "html",
        "localName": "",
        "nodeValue": "",
        "publicId": "",
        "systemId": ""
    }, {
        "nodeId": 3,
        "parentId": 1,
        "backendNodeId": 9,
        "nodeType": 1,
        "nodeName": "HTML",
        "localName": "html",
        "nodeValue": "",
        "childNodeCount": 2,
        "children": [{
            "nodeId": 4,
            "parentId": 3,
            "backendNodeId": 10,
            "nodeType": 1,
            "nodeName": "HEAD",
            "localName": "head",
            "nodeValue": "",
            "childNodeCount": 1,
            "children": [{
                "nodeId": 5,
                "parentId": 4,
                "backendNodeId": 11,
                "nodeType": 1,
                "nodeName": "STYLE",
                "localName": "style",
                "nodeValue": "",
                "childNodeCount": 1,
                "children": [{
                    "nodeId": 6,
                    "parentId": 5,
                    "backendNodeId": 12,
                    "nodeType": 3,
                    "nodeName": "#text",
                    "localName": "",
                    "nodeValue": "\n      h1 { color: red; }\n    "
                }],
                "attributes": []
            }],
            "attributes": []
        }, {
            "nodeId": 7,
            "parentId": 3,
            "backendNodeId": 13,
            "nodeType": 1,
            "nodeName": "BODY",
            "localName": "body",
            "nodeValue": "",
            "childNodeCount": 5,
            "children": [{
                "nodeId": 8,
                "parentId": 7,
                "backendNodeId": 4,
                "nodeType": 1,
                "nodeName": "H1",
                "localName": "h1",
                "nodeValue": "",
                "childNodeCount": 1,
                "children": [{
                    "nodeId": 9,
                    "parentId": 8,
                    "backendNodeId": 14,
                    "nodeType": 3,
                    "nodeName": "#text",
                    "localName": "",
                    "nodeValue": "Hello World!"
                }],
                "attributes": []
            }, {
                "nodeId": 10,
                "parentId": 7,
                "backendNodeId": 5,
                "nodeType": 1,
                "nodeName": "P",
                "localName": "p",
                "nodeValue": "",
                "childNodeCount": 1,
                "children": [{
                    "nodeId": 11,
                    "parentId": 10,
                    "backendNodeId": 15,
                    "nodeType": 3,
                    "nodeName": "#text",
                    "localName": "",
                    "nodeValue": "This is some content."
                }],
                "attributes": []
            }, {
                "nodeId": 12,
                "parentId": 7,
                "backendNodeId": 16,
                "nodeType": 1,
                "nodeName": "P",
                "localName": "p",
                "nodeValue": "",
                "childNodeCount": 1,
                "children": [{
                    "nodeId": 13,
                    "parentId": 12,
                    "backendNodeId": 6,
                    "nodeType": 1,
                    "nodeName": "IMG",
                    "localName": "img",
                    "nodeValue": "",
                    "childNodeCount": 0,
                    "children": [],
                    "attributes": ["src", "http://placekitten.com/200/300", "alt", "Some image"]
                }],
                "attributes": []
            }, {
                "nodeId": 14,
                "parentId": 7,
                "backendNodeId": 7,
                "nodeType": 1,
                "nodeName": "P",
                "localName": "p",
                "nodeValue": "",
                "childNodeCount": 1,
                "children": [{
                    "nodeId": 15,
                    "parentId": 14,
                    "backendNodeId": 17,
                    "nodeType": 3,
                    "nodeName": "#text",
                    "localName": "",
                    "nodeValue": "Data-Attributes!"
                }],
                "attributes": ["data-test", "works"]
            }, {
                "nodeId": 16,
                "parentId": 7,
                "backendNodeId": 18,
                "nodeType": 1,
                "nodeName": "SCRIPT",
                "localName": "script",
                "nodeValue": "",
                "childNodeCount": 1,
                "children": [{
                    "nodeId": 17,
                    "parentId": 16,
                    "backendNodeId": 19,
                    "nodeType": 3,
                    "nodeName": "#text",
                    "localName": "",
                    "nodeValue": " window.title = 'Hello world!' "
                }],
                "attributes": []
            }],
            "attributes": []
        }],
        "attributes": ["lang", "en"],
        "frameId": "D46CBAE99B5CABE7F1FF6DDEE269E6A6"
    }],
    "documentURL": "http://test.local/test-simple.html",
    "baseURL": "http://test.local/test-simple.html",
    "xmlVersion": ""
}

and we want to get the HTML representation:

<html>
<head>
  <style>
    h1 { color: red; }
  </style>
</head>
<body>
    <h1>Hello World!</h1>
    <p>This is some content.</p>
    <p><img src="http://placekitten.com/200/300" alt="Some image"></p>
    <p data-test="works">Data-Attributes!</p>
    <script>window.title = 'Hello world!'; </script>
</body>
</html>

For this we can use the following code:

const serialize = require('dom2html');
const jsonDOM = require('./dom.json');

console.log(serialize(jsonDOM));

Prevent