すでに 110. 二分木の直列化と復元を解けたでしょうか。DOM treeに対して同じことはできるとお気づきになりましたか？

HTMLはある意味での直列化→ブラウザはHTMLを解釈(復元）し→ DOM treeを構築する。

XML baseの他、JSONも行ける。Reactでのelementをこうログすれば：

const el = <div>
 <h1> this is </h1>
 <p className="paragraph"> a <button> button </button> from <a href="https://bfe.dev"><b>BFE</b>.dev</a>
 </p>
</div>;

console.log(el)

以下のobject literalが得られる( refとkeyなど重要じゃない情は除かれる）

{
  type: 'div',
  props: {
    children: [
      {
        type: 'h1',
        props: {
          children: ' this is '
        }
      },
      {
        type: 'p',
        props: {
          className: 'paragraph',
          children: [
            ' a ',
            {
              type: 'button',
              props: {
                children: ' button '
              }
            },
            ' from',
            {
              type: 'a',
              props: {
                href: 'https://bfe.dev',
                children: [
                  {
                    type: 'b',
                    props: {
                      children: 'BFE'
                    }
                  },
                  '.dev'
                ]
              }
            }
          ]
        }
      }
    ]
  }
}

一目瞭然で、これはtreeですね、ただobject literalで表記しているだけ。

では、DOM treeと直列化と復元をやってください, Reactみたいに。

補足

Event HandlerやCustom Componentなどfunctionを利用する場面は無視し、基本的なHTML タグだけ考慮すれば良い。

こちらはサポートしてください。

TextNode (string) as children
single child and multiple children
camelCased properties.

virtualize() はDOM treeを受け， object literalを返す。

render()はobject literalを受け、DOM treeを返す。

動画リスト - JavaScript コーディング問題113. Virtual DOM I

動画リスト - JavaScript コーディング問題
113. Virtual DOM I