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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
|
window.dom = {
/* 改 用于读写属性 */
/* 用判断 arguments 的个数来重载函数 */
/* 重载
** 有三个形参时，就是设置；
** 第二个形参时，就是读取
*/
attr(node, name, value) {
// 组合
if (arguments.length === 3) {
node.setAttribute(name, value); // 原生DOM setAttribute(name, value)
} else if (arguments.length === 2) {
return node.getAttribute(name); // 原生DOM getAttribute(name) 并返回值
}
},
/* 用于读/写文本内容 */
/* 重载
** 有两个形参时，就是设置；
** 第一个形参时，就是读取
*/
text(node, string) {
// 设计模式 之 适配
// console.log('innerText' in node) //true
if (arguments.length === 2) {
/* 写 */
if ("innerText" in node) {
node.innerText = string; // IE // 会将节点原本的所有内容，包括标签全部改变
} else {
node.textContent = string; // Chrome/ Firefox // 会将节点原本的所有内容，包括标签全部改变
}
} else if (arguments.length === 1) {
/* 读 */
if ("innerText" in node) {
return node.innerText; // IE // 会将节点原本的所有内容，包括标签全部改变
} else {
return node.textContent; // Chrome/ Firefox // 会将节点原本的所有内容，包括标签全部改变
}
}
},
/* 用于读/写HTML内容 */
html(node, string) {
if (arguments.length === 2) {
node.innerHTML = string;
} else if (arguments.length === 1) {
return node.innerHTML;
}
},
/* 用于修改style */
/* 重载
** 第二个形参是对象时，就是设置；dom.style(div, {color: "red"})
** 有三个形参时，也是设置；dom.style(div, 'color', 'red')
** 第二个形参是字符串时，就是读取 dom.style(div, 'color')
*/
style(node, name, value) {
if (arguments.length === 3) {
// dom.style(div, "color", "red"')
return node.style[name] = value;
// node.style.name = value;
} else if (arguments.length === 2) {
if (typeof name === "string") {
// 读取 dom.style(div, 'color')
return node.style[name];
} else if (name instanceof Object /* true */ ) {
// dom.style(div, {color:'red'})
const object = name;
for (let key in object) {
// 遍历读取所有对应的key
// key: border | color | ···
// node.style.border = ...
// node.style.color = ...
// 调用属性值 []方法 读取的时变量;点方法 读取的是字符串
// node.style.key; // 字符串
node.style[key] = object[key];
}
return object
}
}
},
class: {
/* 用于添加class */
add(node, className) {
node.classList.add(className)
},
/* 用于删除class */
remove(node, className) {
node.classList.remove(className)
},
has(node, className) {
return node.classList.contains(className)
}
},
/* 事件相关 */
on(node, eventName, fn) {
node.addEventListener(eventName, fn)
},
off(node, eventName, fn) {
console.log(`${eventName}取消事件`)
node.removeEventListener(eventName, fn)
},
toggle(node, eventName, fn) {
node.addEventListener("mousedown", function() {
console.log("鼠标按下了");
node.addEventListener(eventName, fn);
node.addEventListener("mouseup", function() {
console.log("鼠标抬起了");
node.removeEventListener(eventName, fn)
})
});
}
}
|