Implement a parseHtmlDocument function

May 07, 2024

HTML parsing, is the process when you navigate through an HTML document and create an object representation of it, you’re essentially creating a data structure that mirrors the structure of the HTML elements, attributes, and their relationships.

For example, let’s consider the following HTML document:

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./src/index.css" />
    <title>Document</title>
  </head>

  <body>
    <div class="root-wrapper" id="root" data-id="root">
      <p class="info-text">Hello World</p>
      <div>
        <button id="target-btn">Click me!</button>
      </div>
    </div>
  </body>
</html>

The object tree representation for the document would be:

const tree = {
  type: 'div',
  props: {
    id: 'root',
    class: 'root-wrapper',
    'data-id': 'root',
    children: [
      {
        type: 'p',
        props: {
          class: 'info-text',
          children: 'Hello World'
        }
      },
      {
        type: 'div',
        props: {
          children: [
            {
              type: 'button',
              id: 'target-btn',
              props: {
                children: 'Click me!'
              }
            }
          ]
        }
      }
    ]
  }
};

1. Basic implementation

We have to implement a parseHtmlDocument() function which takes a root element and generates the document tree as sampled above.

function parseHtmlDocument(rootEl) {
  // when no rootEl is present
  if (!rootEl) {
    return {};
  }

  function traverse(el) {
    const props = {};

    // gather all attributes from element
    el.getAttributeNames().forEach((attribute) => {
      props[attribute] = el.getAttribute(attribute);
    });

    // if the el has no children
    if (!el.children.length) {
      props.children = el.textContent;
    } else {
      // else recursively go and collect the children
      props.children = Array.from(el.children).map((child) => traverse(child));
    }

    return {
      type: el.tagName.toLowerCase(),
      props
    };
  }

  return traverse(rootEl);
}

// Usage
const rootEl = document.getElementById('root');

const output = parseHtmlDocument(rootEl);

console.log(output); // Yields the tree shown above