DOM是用于操作网页元素的，但使用DOM操作，太过繁琐。这一次，我试着将DOM进行封装，将整个过程进行简化。

首先需要提供一个全局对象

  1. window.dom = {}

接下来，将封装的DOM放入其中。

增

创建节点

  1. dom.create(`<div>hi</div>`) 
  3. create(string){
  4.         //template能够包裹任何元素    
  5.         const container = document.createElement("template")  
  6.          //防止空格的出现导致获取出现问题
  7.         container.innerHTML = string.trim()
  8.         return container.content.firstChild
  9. }

新增弟弟

  1. dom.after(node,node2)
  3. after(node,node2){
  4.         node.parentNode.insertBefore(node2,node.nextSibling)  
  5.         //原来用于将节点插入某节点前，这里的意思是将node2插入到node节点的下一个        节点前，即插到node节点后面
  6. }

新增哥哥

  1. dom.before(node,node2)
  3. before(node,node2){
  4.         node.parentNode.insertBefore(node2,node)  
  5. }

新增儿子

  1. dom.append(parent,node)
  3. append(parent,node){
  4.         parent.appendChild(node)
  5. }

新增爸爸

  1. dom.wrap(node,parent)
  3. wrap(node,parent){
  4.         //增加父元素
  5.         dom.before(node,parent)  //将父元素插到节点前面
  6.         dom.append(parent,node)  //将node插到parent(父元素)里面
  7. }

删

删除结点

  1. dom.remove(node)
  3. remove(node){
  4.         node.parentNode.removeChild(node)
  5.         return node
  6. }

删除后代

  1. dom.empty(node)
  3. empty(node){
  4.         const {childNodes} = node
  5.         //是const childNodes = node.childNodes的简写
  6.         const array = []
  7.         let x = node.firstChild
  8.         while(x){
  9.             array.push(dom.remove(node.firstChild))
  10.             x = node.firstChild
  11.         }
  12.         return array
  13. }

改

读写属性

  1. dom.attr(node,'title',?)
  3. attr(node,name,value){
  4.         if(arguments.length===3){
  5.             node.setAttribute(name,value)
  6.         }else if(arguments.length===2){
  7.             return node.getAttribute(name)
  8.         }
  9. }

读写文本内容

  1. dom.text(node, ?)
  3. text(node, string){
  4.         // 适配
  5.         if(arguments.length ===2 ){
  6.           if('innerText' in node){
  7.             node.innerText = string 
  8.           }else{
  9.             node.textContent = string 
  10.           }
  11.         }else if(arguments.length === 1){
  12.           if('innerText' in node){
  13.             return node.innerText
  14.           }else{
  15.             return node.textContent
  16.           }
  17.         }
  18. }

读写HTML内容

  1. dom.html(node, string)
  3. html(node, string){
  4.         if(arguments.length === 2){
  5.           node.innerHTML = string
  6.         }else if(arguments.length === 1){
  7.           return node.innerHTML 
  8.         }
  9. }

修改style

  1. dom.style(div, {color: 'red'})
  3. style(node, name, value){
  4.         // dom.style(div, 'color', 'red') 
  5.         if(arguments.length===3){
  6.             node.style[name] = value
  7.         }else if(arguments.length===2){   // dom.style(div, 'color') 
  8.         if(typeof name === 'string'){         
  9.             return node.style[name]
  10.         }else if(name instanceof Object){
  11.         // dom.style(div, {color: 'red'})  
  12.             const object = name
  13.             for(let key in object){
  14.             node.style[key] = object[key]
  15.             }
  16.           }
  17.         }
  18. }

添加class、删除calss

  1. dom.class.add(node,'blue')
  2. dom.class.remove(node,'blue')
  4. class:{
  5.         add(node,className){
  6.             node.classList.add(className)
  7.         },
  8.         remove(node,className){
  9.             node.classList.remove(className)
  10.         },
  11.         has(node,className){
  12.             return node.classList.contains(className)
  13.         }
  14. }

添加事件监听

  1. dom.off(node,'click',fn)
  3. on(node,eventName,fn){
  4.         node.addEventListener(eventName,fn)
  5. }

删除事件监听

  1. dom.off(node,'click',fn)
  3. off(node,eventName,fn){
  4.         node.removeEventListener(eventName,fn)
  5. }

查

获取标签或标签们

  1. dom.find('选择器')
  3. find(selector,scope){
  4.         return (scope||document).querySelectorAll(selector)
  5. }

获取父元素

  1. dom.parent(node)
  3. parent(node){
  4.         return node.parentNode
  5. }

获取子元素

  1. dom.children(node)
  3. children(node){
  4.         return node.children
  5. }

获取同级元素

  1. dom.siblings(node)
  3. siblings(node){
  4.         return            Array.from(node.parentNode.children).filter(n=>n!==node)         
  5.         //删除自身
  6. }

获取弟弟

  1. dom.next(node)
  3. next(node){
  4.         let x = node.nextSibling
  5.         while(x&&x.nodeType===3){   //过滤掉文本节点
  6.             x=x.nextSibling
  7.         }
  8.         return x
  9. }

获取哥哥

  1. dom.previous(node)
  3. previous(node){
  4.         let x = node.previousSibling
  5.         while(x && x.nodeType === 3){ //同next
  6.             x = x.previousSibling
  7.         }
  8.         return x
  9. }

遍历所有节点

  1. dom.each(nodes,fn)
  3. each(nodeList,fn){
  4.         for(let i=0;i<nodeList;i++){
  5.             fn.call(null,nodeList[i])
  6.         }
  7. }

获取排行第几

  1. dom.index(node)
  3. index(node){
  4.         const list = dom.children(node.parentNode)  
  5.         let i  
  6.         for(i=0;i<list.length;i++){
  7.           if(list[i] === node){
  8.             break
  9.           }
  10.         }
  11.         return i
  12. }