DOM 的构建

界面组件做的主要事情之一是创建 DOM 结构。 我们再也不想直接使用冗长的 DOM 方法，所以这里是elt函数的一个稍微扩展的版本。

  1. function elt(type, props, ...children) {
  2.   let dom = document.createElement(type);
  3.   if (props) Object.assign(dom, props);
  4.   for (let child of children) {
  5.     if (typeof child != "string") dom.appendChild(child);
  6.     else dom.appendChild(document.createTextNode(child));
  7.   }
  8.   return dom;
  9. }

这个版本与我们在第 16 章中使用的版本之间的主要区别在于，它将属性（property）分配给 DOM 节点，而不是属性（attribute）。 这意味着我们不能用它来设置任意属性（attribute），但是我们可以用它来设置值不是字符串的属性（property），比如onclick，可以将它设置为一个函数，来注册点击事件处理器。

这允许这种注册事件处理器的方式：

  1. <body>
  2.   <script>
  3.     document.body.appendChild(elt("button", {
  4.       onclick: () => console.log("click")
  5.     }, "The button"));
  6.   </script>
  7. </body>