HTML-парсер, написанный на JavaScript, который принимает строки и выводит объект дерева DOM

Я написал парсер HTML на JavaScript, где он принимает строку, представляющую HTML

const html = 
`<div>
<div>
foo
</div>
<div>
bar
</div>
</div>`

И он должен выводить такой объект

{
    children: [
      { children: ['foo'], value: 'div' },
      { children: ['bar'], value: 'div' },
    ],
    value: 'div',
  }

вот моя попытка

function parser(html) {
  const tokens = html.split('n')
  const stack = []
  tokens.forEach((token) => {
    if (token === '</div>') {
      const children = []
      while (stack[stack.length - 1] !== '<div>') {
        children.unshift(stack.pop()) 
      }
      stack.pop()
      stack.push({
        children,
        value: 'div',
      })
    } else {
      stack.push(token)
    }
  })
  return stack.pop()
}

Мои вопросы:

1. Как я могу изменить код, чтобы его можно было легко расширить для других тегов HTML body, div, span и Т. Д.
2. Сейчас необходимая HTML-строка должна быть действительной. Как я могу изменить код, чтобы он мог обнаруживать недопустимый HTML
3. Прямо сейчас в HTML-строке нет отступов. Как я могу изменить код, чтобы он мог допускать отступы во входных строках?