封装一个DOM库

手写DOM

因为DOM原生API太难用了

源代码链接

对象风格

• window.dom 是我们提供的全局对象

增加节点

• dom.append(parent,child)  // 用于新增儿子节点
  

• dom.wrap(`<div></div>`)   // 用于新增爸爸节点
  

dom.create 函数

dom.create(`<div><span>hi</span></div>`) // 用于创建节点

• 一般我们创造节点的目的就是在别的节点中插入此节点，
• 那么我要封装一个 以输入 html格式的 的 create函数
• 能够在创造节点的同时在里面加一些其他节点
• 传入的字符串要是以有标签的 以html的形式来

dom.create源代码

create(string) {
   
    // 创建容器    template标签可以容纳任意元素
    const container = document.createElement('template')
    // 要trim，防止拿到空字符
    container.innerHTML = string.trim()
    // 必须要 使用 .content  要不然拿不到
    return container.content.firstChild

    // 或者
    // container.innerHTML = string
    // return container.content.children[0]
  }

示例

const div = dom.create('<div><span>hello</span></div>')
console.log(div);

dom.after 函数

由于dom中的api由于只有添加前面的节点的方法，如果想要往某个节点的后面插入节点非常的费劲

dom.after(node,newNode)     // 用于新增下一个（弟弟）节点

dom.after 源代码

这里不比担心 如果 node 这个节点是最后一个节点怎么办。 即使为null，依然能插入的

 after(node, newNode) {
   
    // 找到此节点的爸爸然后调用insertBefore（插入某个节点的前面）方法，
    //把 newNode 插入到下一个节点的前面
    return node.parentNode.insertBefore(newNode, node.nextSibling)
  }

示例

dom.before 函数

这个方法和 dom.after 方法思路一致，

dom.before(node,node2)   // 用于新增上一个(哥哥)节点

dom.before 源代码

before(node, newNode) {
   
    // 正常的返回DOM原生的添加前面的节点的方法即可
    return node.parentNode.insertBefore(newNode, Node)
  }

dom.append 函数

dom.append(parent,child)  // 用于新增儿子节点

dom.append 源代码

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

dom.wrap函数

实现思路: 先把这个节点先从DOM树中移出来，把原来的位置插入新的(爸爸)节点，然后在这个爸爸节点中插入原来的节点

dom.wrap(`<div></div>`)   // 用于添加在此节点外面套一个节点   (爸爸)节点

dom.wrap 源代码

  wrap(node, newNode) {
   
    // 先把newNode放在node节点的前面   后面也行
    dom.before(node, newNode)
    // 然后把node节点放在newNode里面
    dom.append(newNode, node)
  }

实现思路图：

示例：