CRainyDay

JS的DOM基础查询

一.获取元素节点

元素节点, 即HTML标签对象

DOM(document)对象的方法:

方法 描述
getElementById() 返回对拥有指定 id 的第一个对象的引用
getElementsByName() 返回带有指定name属性的对象集合
getElementsByTagName() 返回带有指定标签名的对象集合
write() 向文档写 HTML 表达式 或 JavaScript 代码
writeln() 等同于 write() 方法, 不同的是在每个表达式之后写一个换行符

通过例子, 看一下获取元素节点的三个DOM方法

样式表:

点击显/隐内容
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
@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;
}

html的body:

点击显/隐内容
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
<body>
<div id="total">
<div class="inner">
<p>你喜欢哪个城市?</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<br /><br />
<p>你喜欢哪款单机游戏?</p>
<ul id="game">
<li id="rl">红警</li>
<li>实况</li>
<li>极品飞车</li>
<li>魔兽</li>
</ul>
<br /><br />
<p>你手机的操作系统是?</p>
<ul id="phone">
<li>IOS</li>
<li id="android">Android</li>
<li>Windows Phone</li>
</ul>
</div>
<div class="inner">
gender:
<input class="hello" type="radio" name="gender" value="male" /> Male
<input class="hello" type="radio" name="gender" value="female" /> Female
<br /><br /> name:
<input type="text" name="name" id="username" value="abcde" />
</div>
</div>
<div id="btnList">
<div><button id="btn01">查找#bj节点</button></div>
<div><button id="btn02">查找所有li节点</button></div>
<div><button id="btn03">查找name=gender的所有节点</button></div>
<div><button id="btn04">查找#city下所有li节点</button></div>
<div><button id="btn05">返回#city的所有子节点</button></div>
<div><button id="btn06">返回#phone的第一个子节点</button></div>
<div><button id="btn07">返回#bj的父节点</button></div>
<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
</div>
</body>

1.getElementById

1
2
3
4
5
6
7
8
9
10
window.onload = function() {
//为id为btn01的按钮绑定一个单击响应函数
var btn01 = document.getElementById("btn01");
btn01.onclick = function() {
//查找id为bj的节点
var bj = document.getElementById("bj");
//innerHTML 通过这个属性可以获取到元素内部的html代码
alert(bj.innerHTML);
};
}

2.getElementsByTagName

1
2
3
4
5
6
7
8
9
10
11
12
13
14
window.onload = function() {
//为id为btn02的按钮绑定一个单击响应函数
var btn02 = document.getElementById("btn02");
btn02.onclick = function() {
//查找所有li节点
//getElementsByTagName()可以根据标签名来获取一组元素节点对象
//这个方法会给我们返回一个类数组对象,所有查询到的元素都会封装到对象中
//即使查询到的元素只有一个,也会封装到数组中返回
var lis = document.getElementsByTagName("li");
for(var i = 0; i < lis.length; i++) {
alert(lis[i].innerHTML);
}
};
}

3.getElementsByName

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
window.onload = function() {
//为id为btn03的按钮绑定一个单击响应函数
var btn03 = document.getElementById("btn03");
btn03.onclick = function() {
//查找name属性,值为gender的所有节点
var inputs = document.getElementsByName("gender");
for(var i = 0; i < inputs.length; i++) {
/* innerHTML用于获取元素内部的HTML代码的
* 对于自结束标签,这个属性没有意义
*/
/* 如果需要读取自结束标签的属性
* 直接使用 元素.属性名
* 例: 元素.id 元素.name 元素.value
* 注意: class属性不能采用这种方式
* 读取class属性时需要使用 元素.className
*/
var str = "class=\""+inputs[i].className+
"\" type=\""+inputs[i].type+"\" name=\""+
inputs[i].name+"\" value=\""+inputs[i].value+"\"";
alert(str);
}
};
}

二.获取元素节点的子节点

通过具体的元素节点调用:

方法或属性 简介
getElementsByTagName() 返回当前节点的指定标签名的所有后代节点
childNodes属性 表示当前节点的所有子节点(包括文本节点)
children属性 表示当前节点的所有子元素(即HTML标签)
firstChild属性 表示当前节点的第一个子节点
lastChild属性 表示当前节点的最后一个子节点

1.获取某个元素的所有指定节点

接着上述的练习:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
window.onload = function() {
//为id为btn04的按钮绑定一个单击响应函数
var btn04 = document.getElementById("btn04");
btn04.onclick = function() {
//查找#city下所有li节点
//获取id为city的元素
var city = document.getElementById("city");
//获取city下的所有li元素
var citys = city.getElementsByTagName("li");
for(var i = 0; i < citys.length; i++) {
var str = citys[i].innerHTML;
alert(str);
}
};
}

2.childNodes属性

childNodes, 这个属性会返回节点的所有子节点, 包括文本节点(IE8+,空白文本也算)

children, 这个属性会返回节点的所有子元素(即HTML标签)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
window.onload = function() {
//为id为btn05的按钮绑定一个单击响应函数
var btn05 = document.getElementById("btn05");
btn05.onclick = function() {
//返回#city的所有子节点
//获取id为city的元素
var city = document.getElementById("city");
/* 获取city下的所有节点:
* 这其中包括文本节点
* 空白字符(换行、空格等)也算文本节点
*/
var nodes = city.children;
//若我们只是想获取所有子元素(即HTML标签)可以这样
nodes = city.childNodes;
for(var i = 0; i < nodes.length; i++) {
alert(nodes[i]);
}
};
}

3.firstChild

firstChild属性, 获取当前元素的第一个子节点(包括空白文本节点)

firstElementChild属性(IE9+), 获取当前元素的第一个子元素

1
2
3
4
5
6
7
8
9
10
11
12
window.onload = function() {
//为id为btn06的按钮绑定一个单击响应函数
var btn06 = document.getElementById("btn06");
btn06.onclick = function() {
//返回#phone的第一个子节点
//获取id为phone的元素
var phone = document.getElementById("phone");
var first = phone.firstChild;
alert(first);
//若HTML代码被格式化了,上面输出为:object Text
};
}

lastChild和firstChild属性类似

三.获取父节点和兄弟节点

属性 描述
parentNode 表示当前节点的父节点
previousSibling 表示当前节点的前一个兄弟节点
nextSibling 表示当前节点的后一个兄弟节点

1.parentNode

观察上述代码, 我们做了大量的重复性工作: 先获取到指定id的按钮, 再给该按钮添加一个单击响应函数. 可以考虑将这两个过程封装成一个函数.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function myClick(id,fun){
var btn = document.getElementById(id);
btn.onclick = fun;
}
window.onload = function() {
//获取id为btn07的按钮并为其绑定一个单击响应函数
var btn07 = myClick("btn07",function(){
//返回#bj的父节点,注意:父节点一定是元素即标签
var bj = document.getElementById("bj");
var bjParent = bj.parentNode;
//alert(bjParent.innerHTML);//获取元素的HTML代码
/* innerText属性:获取元素内部的文本内容
* 它会自动将innerHTML中的HTML标签去掉
*/
alert(bjParent.innerText);
});
}

2.previousSibling

previousSibling属性, 获取前一个兄弟节点(包括空白文本节点)

previousElementSibling属性(IE9+), 获取前一个兄弟元素

1
2
3
4
5
6
7
8
9
window.onload = function() {
//获取id为btn08的按钮并为其绑定一个单击响应函数
var btn08 = myClick("btn08",function(){
//返回#android的前一个兄弟节点
var android = document.getElementById("android");
var ardPre = android.previousSibling;
alert(ardPre);
});
}

nextSibling属性和previousSibling属性类似


 上一页

JS

 评论



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

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