命名空间

var dom = {}
dom.getSiblings(node)
dom.addClass(node, {a:true,b:false})

获取兄弟结点的方法

function getSiblings(node){
    var allChildren = node.parentNode.children
    
    var array = {
        length: 0
    }
    for(let i = 0; i < allChildren.length; i++){
        if(allChildren[i] !== node){
            array[array.length] = allChildren[i]
            array.length += 1
        }
    }
    return array
}

添加类的方法

function addClass(node, classes){
    for(let key in classes){
        var value = classes[key]
        if(value) {
            node.classList.add(key)
        } else {
            node.classList.remove(key)
        }
        /*if else可改写为
        var methodName = value ? 'add':'remove'
        node.classList[methodName](key)
        */
    }
}
addClass(item3, {a:true,b:false,c:true}) //添加为true的类，删除为false的类

将node放在前面的方法

• 拓展Node接口

  直接在Node.prototype上添加函数

• 新的接口BetterNode

  //无侵入
  function Node2(node){
      return {
          element: node,
          getSiblings:function(){    
          
          },
          addClass:function(){
              
          }
      }
  }
  let node = document.getElementById('x')
  let node2 = Node2(node)
  node2.getSiblings()
  node2.addClass()

给 Node2 改个名字

function jQuery(nodeOrSelector){
    let node
    if(typeof nodeOrSelector === 'string'){
        node = document.querySelector(nodeOrSelector)
    } else{
        node = nodeOrSelector
    }
    
    return {
        getSiblings: function() {
            var allChildren = node.parentNode.children
            
            var array = {
                length: 0
            }
            for (let i = 0; i < allChildren.length; i++) {
                if(allChildren[i] !== node) {
                    array[array.length] = allChildren[i]
                    array.length += 1
                }
            }
            return array
        },
        addClass: function(classes) {
            classes.forEach( (value) => node.classList.add(value) )
        }
    }
}

再给个缩写

window.$ = jQuery

多个节点

function jQuery(nodeOrSelector){
    let nodes = {}
    if(typeof nodeOrSelector === 'string'){
    	let temp = document.querySelectorAll(nodeOrSelector) //伪数组
        for (let i = 0; i < temp.length; i++){
            nodes[i] = temp[i]
        }
        nodes.length = temp.length
    } else{
        nodes = {
            0: nodeOrSelector,
            length: 1
        }
    }
    
  
    nodes.getSiblings = function() {
    }
   	nodes.addClass = function(classes) {
        classes.forEach((value) => {
            for(let i = 0; i < nodes.length; i++){
                nodes[i].classList.add(value)
            }
        })
    }
    nodes.getText = function(){
        var texts = []
        for(let i = 0; i < nodes.length; i++){
            texts.push(nodes[i].textContent)
        }
        return texts
    }
    nodes.setText = function(text){
        for(let i = 0; i < nodes.lenth; i++){
            nodes[i].textContent = text
        }
    }
    /*
    nodes.text = functionn(text) {
        if(text === undefined) {
            var texts = []
            for(let i = 0; i < nodes.length; i++) {
                texts.push(nodes[i].textContent)
            }
            return texts
        } else {
            for(let i = 0; i < nodes.length; i++) {
                nodes[i].textContent = text
            }
    	}
    }
    */
    return nodes
}

var node2 = jQuery('ul > li')
node2.addClass(['blue'])