DOM查找元素节点的3种方法：
getElementById()
寻找一个有着给定 id 属性值的元素，返回值是一个有着给定 id 属性值的元素节点。如果不存在这样的元素，它返回 null.
var oElement = document.getElementById ( sID )
该方法只能用于 document 对象
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2
<html>
3
<head>
4
<title>form.html</title>
5
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
6
<meta http-equiv="description" content="this is my page">
7
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
8
</head>
9
<body>
10
<form name="form1" action="test.html" method="post" >
11
<input type="text" name="username" value="请叫我木丁西 QQ1012421396" id="tid" onchange="" >
12
<input type="button" name="ok" value="保存1"/>
13
</form>
14
</body>
15
<script language="JavaScript">
16
// <input type="text" name="username" value="请叫我木丁西 QQ1012421396" id="tid" οnchange="" >标签value属性的值
17
var inputObj = document.getElementById("tid");
18
alert(inputObj.value);
19
20
//输出 <input type="text" name="username" value="请叫我木丁西 QQ1012421396" id="tid" οnchange="" >标签type属性的值
21
var typeValue = inputObj.type;
22
alert(typeValue);
23
24
</script>
25
</html>
getElementsByName()
寻找有着给定name属性的所有元素，这个方法将返回
一个节点集合，这个集合可以当作一个数组来处理。这个集合的
length 属性等于当前文档里有着给定name属性的所有元素的总个数。
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2
<html>
3
<head>
4
<title>form.html</title>
5
6
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
7
<meta http-equiv="description" content="this is my page">
8
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
9
</head>
10
11
<body>
12
<form name="form1" action="test.html" method="post" >
13
<input type="text" name="tname" value="请叫我木丁西1 QQ1012421396" id="tid_1" ><br>
14
<input type="text" name="tname" value="请叫我木丁西 2 QQ1012421396" id="tid_2" ><br>
15
<input type="text" name="tname" value="请叫我木丁西 3 QQ1012421396" id="tid_3" ><br>
16
<input type="button" name="ok" value="保存1"/>
17
</form>
18
</body>
19
20
<script language="JavaScript">
21
//通过元素的name属性获取所有元素的引用
22
var eles = document.getElementsByName("tname");
23
24
//测试该数据的长度
25
var len = eles.length;
26
alert(len);
27
28
//遍历元素,输出所有value属性的值
29
for(var i=0; i<len; i++){
30
var attValue = eles[i].value;
31
alert(attValue);
32
}
33
34
//为每个文本框(<input type="text">)增加onchange事件,当值改变时,输出改变的值
35
for(var i=0; i<len; i++){
36
eles[i].onchange = function(){
37
alert(this.value);
38
};
39
}
40
41
</script>
42
</html>
getElementsByTagName()
寻找有着给定
标签名的所有元素，这个方法将返回
一个节点集合，这个集合可以当作一个数组来处理。这个集合的 length 属性等于当前文档里有着给定标签名的所有元素的总个数。
var elements = document.getElementsByTagName(tagName);
var elements = element.getElementsByTagName(tagName);
该方法不必非得用在整个文档上。它也可以用来在某个特定元素的子节点当中寻找有着给定标签名的元素。
var container = document.getElementById(“sid”);
var elements = container.getElementsByTagName(“p”);
alert(elements .length);
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2
<html>
3
<head>
4
<title>form.html</title>
5
6
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
7
<meta http-equiv="description" content="this is my page">
8
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
9
</head>
10
<body>
11
<form name="form1" action="test.html" method="post" >
12
<input type="text" name="tname" value="请叫我木丁西 QQ1012421396_1" id="tid_1" ><br>
13
<input type="text" name="tname" value="请叫我木丁西 QQ1012421396_2" id="tid_2" ><br>
14
<input type="text" name="tname" value="请叫我木丁西 QQ1012421396_3" id="tid_3" ><br>
15
<input type="button" name="ok" value="保存1"/>
16
</form>
17
18
<select name="edu" id="edu" >
19
<option value="博士">博士^^^^^</option>
20
<option value="硕士">硕士^^^^^</option>
21
<option value="本科" selected="selected" >本科^^^^^</option>
22
<option value="幼儿园">幼儿园^^^^^</option>
23
</select>
24
25
<select name="job" id="job" >
26
<option value="美容">美容^^^^^</option>
27
<option value="IT">IT^^^^^</option>
28
<option value="程序员">程序员^^^^^</option>
29
<option value="建筑师">建筑师^^^^^</option>
30
</select>
31
32
</body>
33
34
<script language="JavaScript">
35
//
36
//获取所有的input元素,返回值是数组
37
var inputObjs = document.getElementsByTagName("input");
38
39
//测试长度
40
var len = inputObjs.length;
41
alert(len);
42
43
//遍历输出value的值
44
for(var i=0; i<len; i++){
45
var inputValue = inputObjs[i].value;
46
alert(inputValue);
47
}
48
49
//
50
//输出type="text"中 value属性的值 不包含按钮(button)
51
for(var i=0; i<len; i++){
52
if(inputObjs[i].type == "text" ){
53
var inputValue = inputObjs[i].value;
54
alert(inputValue);
55
}
56
}
57
58
///
59
60
//输出所有下拉选 id="edu" 中option标签中value属性的值
61
var eduSelectObj = document.getElementById("edu");
62
var eduOptionObjs = eduSelectObj.getElementsByTagName("option");
63
var eduOptionObjsLength = eduOptionObjs.length;
64
for(var i=0; i<eduOptionObjsLength; i++){
65
alert(eduOptionObjs[i].value);
66
}
67
68
//输出id="edu"中 所有下拉选项的内容
69
for(var i=0; i<eduOptionObjsLength; i++){
70
alert(eduOptionObjs[i].text);
71
}
72
73
74
//输出下拉选选中的值
75
alert(eduSelectObj.value);
76
77
eduSelectObj.onchange = function(){
78
alert(eduSelectObj.value);
79
}
80
</script>
81
</html>
查看是否存在子节点：
hasChildNodes()
该方法用来检查一个元素是否有子节点，返回值是 true 或 false.
var booleanValue = element.hasChildNodes();
文本节点和属性节点不可能再包含任何子节点，所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false.
如果 hasChildNodes 方法的返回值是 false，则 childNodes,firstChild,lastChild 将是空数组和空字符串。
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2
<html>
3
<head>
4
<title>form.html</title>
5
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
6
<meta http-equiv="description" content="this is my page">
7
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
8
</head>
9
10
<body>
11
12
<form name="form1" action="test.html" method="post" >
13
<input type="text" name="tname" value="请叫我木丁西 QQ1012421396_1" id="tid_1" ><br>
14
<input type="text" name="tname" value="请叫我木丁西 QQ1012421396_2" id="tid_2" ><br>
15
<input type="text" name="tname" value="请叫我木丁西 QQ1012421396_3" id="tid_3" ><br>
16
<input type="button" name="ok" value="保存1"/>
17
</form>
18
19
<select name="edu" id="edu">
20
<option value="博士">博士^^^^^</option>
21
<option value="硕士">硕士^^^^^</option>
22
<option value="本科" selected="selected" >本科^^^^^</option>
23
<option value="幼儿园">幼儿园^^^^^</option>
24
</select>
25
26
<select name="job" id="job" >
27
<option value="美容">美容^^^^^</option>
28
<option value="IT">IT^^^^^</option>
29
<option value="程序员">程序员^^^^^</option>
30
<option value="建筑师">建筑师^^^^^</option>
31
</select>
32
</body>
33
34
<script language="JavaScript">
35
//查看id="edu"的节点是否含有子节点
36
var eduSelectObj = document.getElementById("edu");
37
if(eduSelectObj.hasChildNodes()){
38
alert("id=edu的节点有子节点")
39
}else{
40
alert("id=edu的节点没有子节点")
41
}
42
43
44
45
//查看id="tid_1"的节点是否含有子节点
46
var tid_1Obj = document.getElementById("tid_1");
47
if(tid_1Obj.hasChildNodes()){
48
alert("id=tid_1的节点有子节点")
49
}else{
50
alert("id=tid_1的节点没有子节点");
51
}
52
</script>
53
</html>
1126
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
