CRainyDay

DOM查询的剩余方法

一.document属性

属性名 描述
body 对应网页的body标签
documentElement 对应网页的html根标签
all 对应网页中的所有标签

1.获取body

1
2
3
4
5
6
7
8
window.onload = function() {
//①通过getElementsByTagName()获取
var body1 = document.getElementsByTagName("body")[0];
console.log(body);//object HTMLBodyElement
//②通过document的body属性获取
var body2 = document.body;
console.log(body1==body2);//true
};

获取html根标签同理, 但用属性获取时要用document.documentElement获取

2.获取页面中的所有元素

1
2
3
4
5
6
7
8
9
10
11
window.onload = function() {
//①通过getElementsByTagName()
var all1 = document.getElementsByTagName("*");
//②通过all属性获取
var all2 = document.all;
console.log(all1==all2);//false
for(var i = 0;i < all1.length;i ++){
console.log(all1[i]==all2[i]);//true
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);//object HTMLCollection
console.log(boxs[0].innerText);//One
</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);//One
</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);//object NodeList
console.log(box[0].innerText);//Three
</script>
</body>

三.DOM增删改

方法 描述
appendChild() 把新的子节点添加到指定节点
removeChild() 删除子节点
replaceChild() 替换子节点
insertBefore() 在指定的子节点前面插入新的子节点
createElement() 创建元素节点
createTextNode() 创建文本节点。

1.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
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() {
//创建一个"广州"节点,添加到#city下
myClick("btn01", function() {
var city = document.getElementById("city");
var gz = document.createElement("li");
var text = document.createTextNode("广州");
gz.appendChild(text);
city.appendChild(gz);
});
//读取#city内的HTML代码
myClick("btn02",function(){
var city = document.getElementById("city");
alert(city.innerHTML);
});
//设置#bj内的HTML代码
myClick("btn06",function(){
var bj = document.getElementById("bj");
bj.innerHTML = "日本";
});
//向city中添加广州
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() {
//将"广州"节点插入到#bj前面
myClick("btn02", function() {
var city = document.getElementById("city");
var bj = document.getElementById("bj");
var gz = document.createElement("li");
gz.innerHTML = "广州";
city.insertBefore(gz,bj);
});
//使用"广州"节点替换#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);
});
//删除#bj节点
myClick("btn04", function() {
var city = document.getElementById("city");
var bj = document.getElementById("bj");
city.removeChild(bj);
});
}

 评论



本博客所有文章除特别声明外,均采用[(CC BY-NC-SA 4.0)]许可协议。转载请注明出处!

本站使用 Material X 作为主题 , 总访问量为 次 。
Copyright © 2019 CRainyDay's Blog 版权所有