DOM封装（自己写一个DOM库）

前言

DOM提供的api实在是不好用，各种各样的都有，需要记住的又多，特性不一，还要考虑兼容性问题。
在学习DOM原生api的同时，自己封装一套好用的api，即把原生api学会了，又做出一套好用的api；

首先是把声明一个dom全局变量，并挂载在window上。
dom = window.dom

一，增加节点

创建节点dom.create(<div>hi</div>)

create(string) {
   
    const container = document.createElement("template");
    container.innerHTML = string.trim();
    return container.content.children[0];
  }

思路：用一个template标签，把传进来的内容包裹住，再返回需要创建的标签。
应为可能创建的标签是全部，比如li标签，div不能直接包裹住li标签。
所以template是最合适的。

新增弟弟dom.after(node, node2)

after(node, node2) {
   
    node.parentNode.insertBefore(node2, node.nextSibling);
  }

先来熟悉原生api

• insertBefore(node1, node2)：把node1插入到node2前面
• node.nextSibling：node的下一个兄弟节点

思路：找到父节点，插入到node后面兄弟节点的前面。

新增哥哥 dom.before(node, node2)

before(node, node2) {
   
    node.parentNode.insertBefore(node2, node);
  },

思路：找到父节点，插入到node节点前面

新增儿子 dom.append(parent, child)

append(parent, node) {
   
    parent.appendChild(node);
  }

这个差不多只是把单词字母变少了，和原生的api没有本质区别

新增爸爸 dom.wrap(<div></div>)

wrap(node, parent) {
   
    dom.before(node, parent);
    dom.append(parent, node);
  },

代码很精简，但是理解起来不是很好理解。
举个栗子node1->node2
现在来一个node3，要求不顺序变成node1->node3->node2
思路：把node3插入到node2前面，node2和node3变成兄弟节点，再把node2变成node3的子节点。

删除

删除节点 dom.remove(node)

remove(node) {
   
    node