1、封装
获取当前元素的兄弟元素
/*1. 获取当前元素的所有兄弟元素 */
window.customDom = {}
customDOM.getAllSiblings = function (node) {
let allChildren = node.parentNode.children
let array = {length: 0}
for (let i = 0; i < allChildren.length; i++) {
if (allChildren[i] !== node) {
array[array.length] = allChildren[i]
array.length++
}
}
return array
}
/*2. 一次性添加多个class*/
/*通过遍历数组来添加多个class*/
customDOM.addClass = function (node, class) {
for (let key in class) {
let value = class[key]
let method = value ? 'add' : 'remove'
node.classList[method](key)
}
}
/*增加命名空间*/
window.customDOM = {}
customDOM.getAllSiblings = getAllSiblings()
customDOM.addClass = addClass()
上面代码我们根据提供的node节点获取父节点的所有子节点，然后遍历这个子节点形成一个新的伪数组，就可以获得操作节点的所有兄弟元素。然后操作获取的伪数组来进行批量添加class，经过封装后我们可以通过调用函数的方式实现这个功能，调用方法如下：
customDom.getAllSiblings(item3)
但对于我们来说经常使用的调用方法是下面这种：
item3.getAllSiblings(item3)
若要实现下面这种更为合理的调用方式我们可以将该功能直接写入Node的共用属性里：
/*1. 获取当前元素的所有兄弟元素 */
Node.prototype.getAllSiblings = function () {
let allChildren = this.parentNode.children
let array = {length: 0}
for (let i = 0; i < allChildren.length; i++) {
if (allChildren[i] !== this) {
array[array.length] = allChildren[i]
array.length++
}
}
return array
}
/*2. 一次性添加多个class*/
/*通过遍历数组来添加多个class*/
Node.prototype.addClass = function (class) {
for (let key in class) {
let value = class[key]
let method = value ? 'add' : 'remove'
this.classList[method](key)
}
}
item3.addClass({a: true, b: false, c:true)
//item3.addClass.call(item3, {a: true, b: false, c:true})
这里的this就是方法被调用时前面的对象。
通过上面代码将函数功能写入共用属性我们就可以直接通过API的形式直接调用。
但是，我们直接更改共用属性的函数可能会被别人更改或者覆盖掉，我们可以这样做：
window.Node2 = function (node) {
return {
/*1. 获取当前元素的所有兄弟元素 */
getAllSiblings: function () {
let allChildren = node.parentNode.children
let array = {length: 0}
for (let i = 0; i < allChildren.length; i++) {
if (allChildren[i] !== node) {
array[array.length] = allChildren[i]
array.length++
}
}
return array
},
/*2. 一次性添加多个class*/
addClass: function (class){
for (let key in class) {
let value = class[key]
let method = value ? 'add' : 'remove'
node.classList[method](key)
}
}
}
}
let node2 = Node2(item3)
node2.getAllSiblings()
node2.addClass({a: true, b: false, c: true})
这里Node2是一个函数，我们想获得方法就变成了Node2函数的返回值，调用时的参数item3在Node2中已经传了。这种调用方法更简洁。如果我们把Node2的名字改为：jquery。由此我们可以看出：jQuery()实际上是一个构造函数，它接收一个参数，这个参数可以是一个节点或选择器（用来选择某个元素或节点），然后返回一个方法对象去操作节点。（对其进行某种操作）。
