尽管 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 。
