DOM查询的剩余方法
一.document属性
| 属性名 |
描述 |
| body |
对应网页的body标签 |
| documentElement |
对应网页的html根标签 |
| all |
对应网页中的所有标签 |
1.获取body
1
2
3
4
5
6
7
8
| window.onload = function() {
var body1 = document.getElementsByTagName("body")[0];
console.log(body);
var body2 = document.body;
console.log(body1==body2);
};
|
获取html根标签同理, 但用属性获取时要用document.documentElement获取
2.获取页面中的所有元素
1
2
3
4
5
6
7
8
9
10
11
| window.onload = function() {
var all1 = document.getElementsByTagName("*");
var all2 = document.all;
console.log(all1==all2);
for(var i = 0;i < all1.length;i ++){
console.log(all1[i]==all2[i]);
console.log(all1[i]);
}
};
|
二.其他DOM查询方法
| 方法 |
描述 |
| getElementsByClassName() |
根据元素的class属性值查询一组节点对象 |
| querySelector() |
根据CSS选择器来查询第一个满足条件的元素节点对象 |
| querySelectorAll() |
根据CSS选择器来查询所有满足条件的元素节点对象 |
1.getElementsByClassName()
根据元素的class属性值查询一组节点对象, 兼容性IE9+
1
2
3
4
5
6
7
8
9
10
| <body>
<div class="box">One</div>
<div class="box">Two</div>
<div id="mybox">Three</div>
<script type="text/javascript">
var boxs = document.getElementsByClassName("box");
console.log(boxs);
console.log(boxs[0].innerText);
</script>
</body>
|
2.querySelector()
- 参数: 内容为CSS选择器的字符串
- 该方法只会查询满足条件的第一个元素对象
- 兼容性IE8+. 可以用来代替getElementsByClassName()方法
1
2
3
4
5
6
7
8
| <body>
<div class="box">One</div>
<div class="box">Two</div>
<script type="text/javascript">
var box = document.querySelector(".box");
console.log(box.innerText);
</script>
</body>
|
3.querySelectorAll()
- 和querySelector()方法类似, 只是它的返回值是一个数组
- 即使满足条件的元素只有一个, 返回的也是数组
1
2
3
4
5
6
7
8
9
10
| <body>
<div class="box">One</div>
<div class="box">Two</div>
<div id="mybox">Three</div>
<script type="text/javascript">
var box = document.querySelectorAll("#mybox");
console.log(box);
console.log(box[0].innerText);
</script>
</body>
|
三.DOM增删改
| 方法 |
描述 |
| appendChild() |
把新的子节点添加到指定节点 |
| removeChild() |
删除子节点 |
| replaceChild() |
替换子节点 |
| insertBefore() |
在指定的子节点前面插入新的子节点 |
| createElement() |
创建元素节点 |
| createTextNode() |
创建文本节点。 |
1.html
One More Thing 👇
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
| <html>
<head>
<style type="text/css">
@CHARSET "UTF-8";
body {
width: 800px;
margin-left: auto;
margin-right: auto;
}
button {
width: 300px;
margin-bottom: 10px;
}
#btnList {
float: left;
}
#total {
width: 450px;
float: left;
}
ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}
.inner li {
border-style: solid;
border-width: 1px;
padding: 5px;
margin: 5px;
background-color: #99ff99;
float: left;
}
.inner {
width: 400px;
border-style: solid;
border-width: 1px;
margin-bottom: 10px;
padding: 10px;
float: left;
}
</style>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
</div>
</div>
<div id="btnList">
<div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
<div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
<div><button id="btn04">删除#bj节点</button></div>
<div><button id="btn05">读取#city内的HTML代码</button></div>
<div><button id="btn06">设置#bj内的HTML代码</button></div>
<div><button id="btn07">创建一个"广州"节点,添加到#city下</button></div>
</div>
</body>
</html>
|
2.创建追加节点
- appendChild() 将一个节点追加到指定加点之后
- createElement() 创建指定名字的元素节点
- createTextNode() 创建指定内容的文本节点
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
| function myClick(idStr, fun) {
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
window.onload = function() {
myClick("btn01", function() {
var city = document.getElementById("city");
var gz = document.createElement("li");
var text = document.createTextNode("广州");
gz.appendChild(text);
city.appendChild(gz);
});
myClick("btn02",function(){
var city = document.getElementById("city");
alert(city.innerHTML);
});
myClick("btn06",function(){
var bj = document.getElementById("bj");
bj.innerHTML = "日本";
});
myClick("btn06",function(){
var city = document.getElementById("city");
var gz = document.createElement("li");
gz.innerHTML = "广州";
city.appendChild(gz);
});
}
|
3.插入替换删除节点
- insertBefore() 由父元素调用, 在第二个参数节点之前插入新节点(第一个参数)
- replaceChild() 由父元素调用, 将第二个参数节点替换为新节点(第一个参数)
- removeChild() 由父元素调用, 删除指定元素节点
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.onload = function() {
myClick("btn02", function() {
var city = document.getElementById("city");
var bj = document.getElementById("bj");
var gz = document.createElement("li");
gz.innerHTML = "广州";
city.insertBefore(gz,bj);
});
myClick("btn03", function() {
var city = document.getElementById("city");
var bj = document.getElementById("bj");
var gz = document.createElement("li");
gz.innerHTML = "广州";
city.replaceChild(gz,bj);
});
myClick("btn04", function() {
var city = document.getElementById("city");
var bj = document.getElementById("bj");
city.removeChild(bj);
});
}
|
