封装函数

尽管 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
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
let DOM = {}
DOM.operationClass = (node,classes) => {
for(let key in classes){
let method = classes[key] ? 'add' : 'remove'
node.classList[method](key)
}
}
DOM.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;
}

最终优化

方案一

在 Node.prototype 上添加方法,调用方法是:
node.operationClass.call(node,{className:true,className:false})
node.getSiblings.call(node)
缺点:改变了 Node.prototype

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Node.prototype.operationClass = function(classes){
for(let key in classes){
let method = classes[key] ? 'add' : 'remove'
this.classList[method](key)
}
}

Node.prototype.getSiblings = function(){
let allchild = this.parentNode.children
let siblings = {
length: 0
}

for (let i = 0, len = allchild.length; i < len; i++) {
if (allchild[i] !== this) {
siblings[siblings.length] = allchild[i]
siblings.length += 1
}
}
return siblings;
}

方案二

创造一个新的接口,使用全局变量 otherNode ,无侵入式调用。
调用方法:

let node = otherNode.call(undefined,node)
node.operationClass.call(undefined,{red:true,blue:false})
node.getSiblings.call(undefined))
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
window.otherNode = (node) => {
return {
operationClass: (classes) => {
for (let key in classes) {
let method = classes[key] ? 'add' : 'remove'
node.classList[method](key)
}
},
getSiblings : () => {
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;
}
}
}
方案二优化

优化方向:

  • 允许用户传入一个 CSS 选择器
  • 添加了操作文本的功能
    调用方法:
    1
    2
    3
    let node = otherNode.call(undefined,'#id')
    node.getSiblings.call(undefined)
    node.operationClass.call(undefined,{red:true,blue:false})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
window.otherNode = (nodeOrSelector) => {
let node
if(typeof nodeOrSelector === 'string'){
node = document.querySelector(nodeOrSelector)
}else{
node = nodeOrSelector
}
return {
operationClass: (classes) => {
for (let key in classes) {
let method = classes[key] ? 'add' : 'remove'
node.classList[method](key)
}
},
setText:(text) => {
node.textContent = text;
},
getSiblings : () => {
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;
}
}
}
方案二再优化

优化方向:

  • 满足更多的 CSS 选择器,例如 ul > li
  • 简化了 text 功能,不传参数,就是获取,传参数就是设置
    使用方法:
    1
    2
    3
    4
    5
    6
    7
    let node = otherNode.call(undefined, 'ul > li')
    node.text()
    node.text('hello world')
    node.operationClass.call(undefined, {
    className: false,
    className: true
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
window.otherNode = (nodeOrSelector) => {
let nodes = {}
if (typeof nodeOrSelector === 'string') {
let temp = document.querySelectorAll(nodeOrSelector)
for (let i = 0, len = temp.length; i < len; i++) {
nodes[i] = temp[i]
}
nodes.length = temp.length
} else if (nodeOrSelector instanceof Node) {
nodes = {
0: nodeOrSelector,
length: 1
}
}
nodes.operationClass = (classes) => {
for (let key in classes) {
let method = classes[key] ? 'add' : 'remove'
for (let i = 0, len = nodes.length; i < len; i++) {
nodes[i].classList[method](key)
}
}
},
nodes.text = (text) => {
if (text === undefined) {
let texts = []
for (let i = 0, len = nodes.length; i < len; i++) {
texts.push(nodes[i].textContent)
}
return texts
} else {
for (let i = 0, len = nodes.length; i < len; i++) {
nodes[i].textContent = text;
}
}
}
return nodes
}

jQuery

jQuery 就是将 otherNode 更名为 jQuery,当然 jQuery 的兼容性更好、功能更加丰富(DOM 操作、动画、AJAX操作等等),并且它使用了 prototype 。