对象风格

也叫命名空间风格，Window.dom是我们提供全局对象，方便使用

增

dom.create('<div>hi</div>') //用于创建节点
dom.after(node,node2) //新增同级元素
dom.before(node,node2)  //新增同级元素
dom.append(parent,child) //创建一个子级元素
dom.wrap('<div></div>') //新增一个上级元素

window.dom = {
  create(string) {
    const container = document.createElement("template");
    container.innerHTML = string.trim();
    return container.content.firstChild;
  }, //用于创建一个节点
  after(node, node2) {
    node.parentNode.insertBefore(node2, node.nextSibling);
  }, //创建一个弟弟
  before(node, node2) {
    console.log(node);
    console.log(node2);
    window.abc = node;
    node.parentNode.insertBefore(node2, node);
  }, //创建一个哥哥
  append(parent, node) {
    parent.appendChild(node);
  }, //创建一个儿子
  wrap(node, parent) {
    dom.before(node, parent);
    dom.append(parent, node);
  }, //创建一个爸爸
  }

删

dom.remove(node) //删除节点
dom.empty(parent) //清空元素

  remove(node) {
    node.parentNode.removeChild(node);
    return node;
  },
  empty(node) {
    const array = [];
    let x = node.firstChild;
    while (x) {
      array.push(dom.remove(node.firstChild));
      x = node.firstChild;
    }
    return array; //返回数组
  },

改

dom.attr(node,'title',?)  //用于读写属性
dom.text(node,?)  //用于读写文本内容
dom.html(node,?)  //用于读写HTML内容
dom.style(node,{color:'red'})  //修改style
dom.class.add(node,blue)  //用于添加class
dom.on(node,'click',fn)  //添加事件监听
dom.off(node,'click',fn)  //删除事件监听

  attr(node, name, value) {
    //重载
    if (arguments.length === 3) {
      node.setAttribute(name, value);
    } else {
      return node.getAttribute(name);
    }
  },
  text(node, string) {
    //适配
    if (arguments.length === 2) {
      if (`innerText` in node) {
        node.innerText = string;
      } else {
        node.textContent = string;
      }
    } else if (arguments.length === 1) {
      if (`innerText` in node) {
        return node.innerText;
      } else {
        return node.textContent;
      }
    }
  },
  html(node, sting) {
    if (arguments.length === 2) {
      node.innerHtml = string;
    } else if (arguments.length === 1) {
      return node.innerHtml;
    }
  },
  style(node, name, value) {
    if (arguments.length === 3) {
      node.style[name] = value;
    } else if (arguments.length === 2) {
      if (typeof name === `string`) {
        return node.style[name];
      } else if (name instanceof Object) {
        for (let key in name) {
          node.style[key] = name[key];
        }
      }
    }
  },
  class: {
    add(node, className) {
      node.classlist.add(className);
    },
    remove(node, className) {
      node.classlist.remove(className);
    },
    has(node, className) {
      node.classlist.contains(className);
    },
  },
  on(node, eventName, fn) {
    node.addEventListener(eventName, fn);
  },
  off(node, eventName, fn) {
    node.removeEventListener(eventName, fn);
  },