Parser de l'html afin de récupérer l'ensemble des éléments

Bonjour à tous,

Je cherche à développer un plugin figma (donc en js) et je souhaiterais parser de l'html (peu importe la structure de celui-ci) et récupérer un certain nombres d'information en fonction de la balise html.

J'ai commencé avec l'exemple ci-dessous qui fonctionne (à voir si c'est optimal...).
`
const html = '<form><label for="username">Nom dutilisateur:</label><input placeholder="your username" class="test toto" value ="xavier" type="text" id="username" name="username"><br><label for="password">Mot de passe:</label><input type="password" id="password" name="password"><br><br><input type="submit" value="Se connecter"></form>';

const parser = new DOMParser();
const htmlDoc = parser.parseFromString(html, 'text/html');

const El = htmlDoc.querySelector('body');

let ElChildren = El.children;
const htmlElements = [];
let childObj = {};

for (let i = 0; i < ElChildren.length; i++) {
let child = ElChildren[i];

switch(child.tagName) {
  case 'BR':
    break;
  case 'INPUT':
    childObj = {
      tag: child.tagName,
      value: child.value,
      class: Array.from(child.classList),
      placeholder: child.getAttribute("placeholder")
    }
    htmlElements.push(childObj);
    break;

  case 'LABEL':
    childObj = {
      tag: child.tagName,
      text: child.textContent
    }
    htmlElements.push(childObj);
    break;

  default:
    childObj = {
      tag: child.tagName,
      value: child.value,
      text: child.textContent
    }
    htmlElements.push(childObj);
    break;

}

}
`

Dans l'idée ça fonctionne : je récupère bien un tableau avec les objets childObj.
Seulement je voudrais aussi pouvoir récupérer la liste de tous les enfants de chaque élément.
Quelqu'un aurait une idée de comment faire ça ?

Par exemple, si dans le l'html j'ai quelque chose comme ça : <div><p>....</p></div> je voudrais que mon childObj ressemble à ça :
childObj = { tag: DIV, childrens: arrayChildrens[] }

J'espère que je suis clair ^^
Merci :)