封装函数

尽管 DOM 提供了 API ，可是当我们使用 DOM API 的时候却不尽人意，它提供的功能实在是有限，并且有些方法还没有，所以我们先来封装两个函数。第一个函数作用是获取一个元素节点的所有兄弟，第二个函数作用是可以对一个节点添加或者删除 class 。

获取一个元素节点的所有兄弟

当调用 getSiblings 函数的时候只需要传入一个元素节点即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
 
function getSiblings(node) {
           
        let allchild = node.parentNode.children
        let siblings = {
           
            length: 0
        }
        for (let i = 0, len = allchild.length; i < len; i++) {
           
            if (allchild[i] !== node) {
           
                siblings[siblings.length] = allchild[i]
                siblings.length += 1
            }
        }
        return siblings;
    }

操纵一个节点的 class 可以进行添加和删除

调用 operationClass 时，需要传入一个节点和一个 classes 对象operationClass( node, { className: true, className: false } )

1
2
3
4
5
6
 
function operationClass(node,classes){
           
        for(let key in classes){
           
            let method = classes[key] ? 'add' : 'remove'
            node.classList[method](key)
        }
    }

命名空间

利用命名空间，从而对上述两个函数进行优化
调用方法：
DOM.operationClass.call(undefined,node,{className:true,className:false})
console.log(DOM.getSiblings.call(undefined,node))

1
2
3
4
5
6