《JavaScript DOM编程艺术》笔记
# 《JavaScript DOM 编程艺术》笔记
# 第 1 章 DOM
# 查找页面元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<button>按钮b</button>
<button id="btn" class="btn">按钮</button>
<script>
var btn = document.getElementById('btn'),
btns = document.getElementsByClassName('btn'),
btnTags = document.getElementsByTagName('button')
console.log(btn)
console.log(btns)
console.log(btnTags)
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
# 模拟 getElementsByClassName
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<script>
/**
* 根据类名查找元素
* @param node DOM树搜索的起点
* @param classname 类名
* @returns {any[]|*}
*/
function getElementsByClassName(node, classname) {
if (node.getElementsByClassName) {
// 使用现有的方法
return node.getElementsByClassName(classname)
} else {
var results = new Array()
var elems = node.getElementsByTagName('*')
for (var i = 0; i < elems.length; i++) {
if (elems[i].className.indexOf(classname) != -1) {
results[results.length] = elems[i]
}
}
return results
}
}
</script>
</body>
</html>
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
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
# 属性的获取和设置
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<button id="btn">按钮</button>
<script>
let byId = document.getElementById('btn')
if (!byId.getAttribute('title')) {
byId.setAttribute('title', '按钮')
}
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
# 获取元素所有的子节点
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Title</title>
</head>
<body>
<script>
function onBodyChildCount() {
let elementsByTagNameElement = document.getElementsByTagName('body')[0]
alert(elementsByTagNameElement.childNodes.length) // 获取元素所有子节点
}
window.onload = onBodyChildCount
</script>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
编辑 (opens new window)
上次更新: 2021/08/03 20:55:47