原生 DOM 节点的用法

新增节点

createElement()
createTextNode()
createDocumentFragment()

添加、移除、替换、插入(父元素调用)

• appendChild()
• removeChild()
• replaceChild()
• insetBefore()

插入哥哥节点

window.dom = {
  before(node, node2) {
    //找到当前节点的父元素，调用父元素方法插入子节点
    node.parentNode.inserBefore(node2, node)
  }
}

插入弟弟节点

window.dom = {
  after(node, node2) {
    node.parentNode.insertBefore(node2, node.nextSibling)
  }
}

插入儿子节点

window.dom = {
  append(parent, node) {
    parent.appendChild(node)
  }
}

插入爸爸节点

window.dom = {
  wrap(node, parent) {
    dom.before(node, parent)
    dom.apend(parent, node)
  }
}

插入替换节点

var div = document.createElement('div')
var a = document.createElement('a')
document.body.replaceChild(a, div)

插入删除节点

div.remove() //删除div节点

window.dom = {
  remove(node) {
    node.parentNode.removeChild(node)
    return node //保持对节点的引用
  }
}

插入 class 节点

window.dom = {
  class: {
    //添加class
    add(node, className) {
      node.classList.add(className)
    },
    //删除class
    remove(node, className) {
      node.classList.remove(className)
    },
    //查找class
    has(node, className) {
      return node.classList.contains(className)
    }
  }
}

查找（document 调用）

getElementByTagName()
getElementByName()
getElementById()
getElementByClassName()
querySelectorAll('选择器')
querySelector('选择器')

查询节点

获取父元素

window.dom = {
  parent(node) {
    return node.parentNode
  }
}

获取子元素

window.dom = {
  children(node) {
    return node.children
  }
}

https://blog.csdn.net/Charissa2017/article/details/103829514