DOM常用方法【DOM】
DOM方法:是我们可以在节点(HTML 元素)上执行的动作。
①appendChild(Node newChild)
作用:为给定元素的最后增加一个子节点:
var newreference = element.appendChild(newChild).
给定子节点 newChild 将成为给定元素节点 element 的最后一个子节点。
方法的返回值是一个指向新增子节点的引用指针。
该方法通常与 createElement() createTextNode() 配合使用
新节点可以被追加给文档中的任何一个元素。
②insertBefore(Node newChild, Node refChild)
作用:把一个给定节点插入到一个给定元素节点的给定子节点的前面
var reference = element.insertBefore(newNode,targetNode);
节点 newNode 将被插入到元素节点 element 中并出现在节点 targetNode 的前面.
节点 targetNode 必须是 element 元素的一个子节点。
该方法通常与 createElement() 和 createTextNode() 配合使用。
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2
<html>
3
<head>
4
<title>insertBefore.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
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
9
</head>
10
<body>
11
<ul>
12
<li id="bj" name="beijing">北京</li>
13
<li id="sh" name="shanghai">上海</li>
14
<li id="cq" name="chongqing">重庆</li>
15
</ul>
16
</body>
17
18
<script language="JavaScript">
19
// 插入新的节点 <li id="tj" name="tianjin">天津</li>
20
var tj_node = document.createElement("li");
21
tj_node.setAttribute("name", "tianjin");
22
var text_node = document.createTextNode("天津");
23
tj_node.appendChild(text_node);
24
// 在 <li id="cq" name="chongqing">重庆</li>的前面
25
var cq_node = document.getElementById("cq");
26
cq_node.parentNode.insertBefore(tj_node, cq_node);
27
28
</script>
29
</html>
③自定义的insertAfter(Node newChild, Node refChild)
作用:把一个给定节点插入到一个给定元素节点的给定子节点的后面
自定义js函数代码:
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2
<html>
3
<head>
4
<title>insertBefore.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
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
9
</head>
10
<body>
11
<ul>
12
<li id="bj" name="beijing">北京</li>
13
<li id="sh" name="shanghai">上海</li>
14
<li id="cq" name="chongqing">重庆</li>
15
<li id="hb" name="hubei">湖北</li>
16
</ul>
17
</body>
18
19
<script language="JavaScript">
20
//******************************插入新的节点 <li id="tj" name="tianjin">天津</li>
21
var tj_node = document.createElement("li");
22
tj_node.setAttribute("name", "tianjin");
23
var text_node = document.createTextNode("天津");
24
tj_node.appendChild(text_node);
25
// 在 <li id="sh" name="shanghai">上海</li>的后面
26
var sh_node = document.getElementById("sh");
27
insertAfter(tj_node, sh_node);
28
29
function insertAfter(newChild, refChild){
30
//获取目标元素的父类节点
31
var parent_node = refChild.parentNode;
32
if(parent_node.lastChild == refChild){ //如果目标元素是最后一个元素,则新元素插入到目标元素的后面
33
parent_node.appendChild(newChild);
34
}else{//说明目标元素不是最后一个元素,则获取目标元素的下一个元素,在它之前插入新的节点
35
var refChild_next = refChild.nextSibling;
36
parent_node.insertBefore(newChild, refChild_next);
37
}
38
}
39
</script>
40
</html>
41
④replaceChild(Node newChild, Node refChild)
作用:把一个给定父元素里的一个子节点替换为另外一个子节点
var reference = element.replaceChild(newChild,oldChild);
返回值是一个指向已被替换的那个子节点的引用指针。
如果被插入的子节点还有子节点,则那些子节点也被插入到目标节点中
案例代码:
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
您喜欢的城市:<br>
13
<ul>
14
<li id="bj" value="beijing" >北京</li>
15
<li id="sh" value="shanghai">上海</li>
16
<li id="cq" value="chongqing"> 重庆</li>
17
</ul>
18
19
您喜欢的游戏:<br>
20
<ul>
21
<li id="fk" value="fangkong">反恐<p>精英</p></li>
22
<li id="ms" value="moshou">魔兽</li>
23
<li id="cq" value="chuanqi">**</li>
24
</ul>
25
</body>
26
27
<script language="JavaScript">
28
//点击北京节点, 将被反恐节点替换
29
var bj_node = document.getElementById("bj");
30
bj_node.onclick = function(){
31
var fk_node = document.getElementById("fk");
32
var bj_parent_node = bj_node.parentNode;
33
bj_parent_node.replaceChild(fk_node, bj_node);
34
}
35
</script>
36
37
</html>
演示:
⑤removeChild(Node oldChild)
作用:从一个给定元素里删除一个子节点
var reference = element.removeChild(node);
返回值是一个指向已被删除的子节点的引用指针。
某个节点被removeChild()方法删除时,这个节点所包含的所有子节点将同时被删除。
如果想删除某个节点,但不知道它的父节点是哪一个,parentNode 属性可以帮忙。
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2
<html>
3
<head>
4
<title>insertBefore.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
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
9
</head>
10
<body>
11
<ul id="city">
12
<li id="bj" name="beijing">北京</li>
13
<li id="sh" name="shanghai">上海</li>
14
<li id="cq" name="chongqing">重庆</li>
15
</ul>
16
</body>
17
18
<script language="JavaScript">
19
//删除<ul id="city"> 下<li id="bj" name="beijing">北京</li>这个节点</ul>
20
var bj_node = document.getElementById("bj");
21
var remove_obj = bj_node.parentNode.removeChild(bj_node);//返回删除的对象
22
alert(remove_obj.name)
23
</script>
24
</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>
⑦getAttribute(String name)
作用:返回一个给定元素的一个给定属性名称的节点的值
var attributeValue = element.getAttribute(attributeName);
给定属性的名字必须以字符串的形式传递给该方法。
给定属性的值将以字符串的形式返回,如果给定属性不存在,getAttribute() 将返回一个空字符串.
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
您喜欢的城市:<br>
13
<ul>
14
<li id="bj" value="beijing">北京</li>
15
<li id="sh" value="shanghai">上海</li>
16
<li id="cq" value="chongqing">重庆</li>
17
</ul>
18
19
您喜欢的游戏:<br>
20
<ul>
21
<li id="fk" value="fangkong">反恐</li>
22
<li id="ms" value="moshou">魔兽</li>
23
<li id="xj" value="xingji">星际争霸</li>
24
</ul>
25
</body>
26
27
<script language="JavaScript">
28
//打印<li id="xj" value="xingji">星际争霸</li>节点的value属性的值
29
var xj_node = document.getElementById("xj");
30
alert(xj_node.getAttribute("value") + "#" + xj_node.value);//由于是标签,xj_node.value=1 并不是“xingji”而是1
31
</script>
32
</html>
⑧getAttributeNode(String attributeNodeName)
作用:返回一个给定元素的一个给定属性名称的节点
var value_node = xj_node.getAttributeNode("value");//获取value属性的属性节点
⑨setAttribute(String name, String value)
作用:将给定元素节点添加一个新的属性值或改变它的现有属性的值。
element.setAttribute(attributeName,attributeValue);
属性的名字和值必须以字符串的形式传递给此方法
如果这个属性已经存在,它的值将被刷新;
如果不存在,setAttribute()方法将先创建它再为其赋值。
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
13
您喜欢的城市:<br>
14
<ul>
15
<li id="bj" value="beijing">北京</li>
16
<li id="sh" value="shanghai">上海</li>
17
<li id="cq" value="chongqing">重庆</li>
18
</ul>
19
20
您喜欢的游戏:<br>
21
<ul>
22
<li id="fk" value="fangkong">反恐</li>
23
<li id="ms" value="moshou">魔兽</li>
24
<li id="xj" value="xingji">星际争霸</li>
25
</ul>
26
</body>
27
28
<script language="JavaScript">
29
//给这个节点增加 name属性 <li id="xj" value="xingji" name="xingjizhengba">星际争霸</li>
30
var xj_node = document.getElementById("xj");
31
xj_node.setAttribute("name", "xingjizhengba");
32
alert(xj_node.getAttribute("name"));
33
</script>
34
</html>
⑩createElement(String tagName)
作用:按照给定的标签名创建一个新的元素节点。方法只有一个参数:将被创建的元素的名字,是一个字符串.
var reference = document.createElement(element);
方法的返回值:是一个指向新建节点的引用指针。返回值是一个元素节点,所以它的 nodeType 属性值等于 1。
新元素节点不会自动添加到文档里,新节点没有 nodeParent 属性,它只是一个存在于 JavaScript 上下文的对象.
例如: var pElement = document.createElement("p");
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
您喜欢的城市:<br>
13
<ul id="city">
14
<li id="bj" value="beijing">北京</li>
15
<li id="sh" value="shanghai">上海</li>
16
<li id="cq" value="chongqing">重庆</li>
17
</ul>
18
19
您喜欢的游戏:<br>
20
<ul>
21
<li id="fk" value="fangkong">反恐</li>
22
<li id="ms" value="moshou">魔兽</li>
23
<li id="xj" value="xingji">星际争霸</li>
24
</ul>
25
</body>
26
<script language="JavaScript">
27
//增加城市节点 <li id="tj" value="tianjin">天津</li>
28
//创建元素节点
29
var li_Ele = document.createElement("li");
30
li_Ele.setAttribute("id", "tj");
31
li_Ele.setAttribute("value", "tianjin");
32
//添加文本子节点
33
var text_node = document.createTextNode("天津");
34
li_Ele.appendChild(text_node);
35
//获取city节点
36
var city_node = document.getElementById("city");
37
//追加子节点
38
city_node.appendChild(li_Ele);
39
40
</script>
41
</html>
⑪createTextNode(String data)
作用:创建一个包含着给定文本的新文本节点。这个方法的返回值是一个指向新建文本节点引用指针。
var textNode = document.createTextNode(text);
方法只有一个参数:新建文本节点所包含的文本字符串
方法的返回值:是一个指向新建节点的引用指针。它是一个文本节点,所以它的 nodeType 属性等于 3.
新元素节点不会自动添加到文档里,新节点没有 nodeParent 属性。
例如:
var pElementText=document.createElement("li");
var textElement=document.createTextNode("南京");
pElementText.appendChild(textElement);
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
<select name="edu" id="edu">
13
<option value="博士">博士^^^^^</option>
14
<option value="硕士">硕士^^^^^</option>
15
<option value="本科">本科^^^^^</option>
16
<option value="幼儿园">幼儿园^^^^^</option>
17
18
</select>
19
20
</body>
21
<script language="JavaScript">
22
//增加节点<option value="大专">大专^^^^^</option>
23
var option_Ele = document.createElement("option");
24
option_Ele.setAttribute("value", "大专");
25
var text_node = document.createTextNode("大专^^^^^");
26
option_Ele.appendChild(text_node);
27
var edu_node = document.getElementById("edu");
28
edu_node.appendChild(option_Ele);
29
30
</script>
31
</html>
综合案例1:
案例代码:
1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
2
<html>
3
<head>
4
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5
<title>添加用户</title>
6
</head>
7
<body>
8
<center>
9
<br><br>
10
添加用户:<br><br>
11
姓名: <input type="text" name="name" id="name" />
12
email: <input type="text" name="email" id="email" />
13
电话: <input type="text" name="tel" id="tel" /><br><br>
14
<button id="addUser">提交</button>
15
<br><br>
16
<hr>
17
<br><br>
18
<table id="usertable" border="1" cellpadding="5" cellspacing=0>
19
<tr>
20
<th>姓名</th>
21
<th>email</th>
22
<th>电话</th>
23
<th>操作</th>
24
</tr>
25
</table>
26
</center>
27
</body>
28
<script language="JavaScript">
29
30
//获取提交按钮
31
var addUser_obj = document.getElementById("addUser");
32
//添加onclick事件
33
addUser_obj.onclick = function(){
34
//获取姓名
35
var name = document.getElementById("name").value;
36
//获取email
37
var email = document.getElementById("email").value;
38
//获取电话
39
var tel = document.getElementById("tel").value;
40
41
//获取表格usertable节点
42
var usertable_node = document.getElementById("usertable");
43
//创建tbody
44
var tbody_node = document.createElement("tbody");
45
//创建tr元素
46
var tr = document.createElement("tr");
47
//创建td元素
48
var td1 = document.createElement("td");
49
td1.innerHTML = name;
50
var td2 = document.createElement("td");
51
td2.innerHTML = email;
52
var td3 = document.createElement("td");
53
td3.innerHTML = tel;
54
var td4 = document.createElement("td");
55
var a_Ele = document.createElement("a");
56
a_Ele.setAttribute("href", "#");
57
var text_a_Ele = document.createTextNode("删除");
58
a_Ele.appendChild(text_a_Ele);
59
60
a_Ele.onclick = function(){
61
var tr = a_Ele.parentNode.parentNode;
62
var td = tr.firstChild.firstChild;
63
var tbody = tr.parentNode;
64
var flag = window.confirm("确定删除" + td.nodeValue + "?");
65
if(flag){
66
tbody.removeChild(tr);
67
}
68
}
69
70
td4.appendChild(a_Ele);
71
tr.appendChild(td1);
72
tr.appendChild(td2);
73
tr.appendChild(td3);
74
tr.appendChild(td4);
75
76
tbody_node.appendChild(tr);
77
usertable_node.appendChild(tbody_node);
78
}
79
</script>
80
</html>
案例演示:
综合案例2:
案例代码:
1
<html>
2
<head>
3
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
4
<title>无标题文档</title>
5
6
<style type="text/css">
7
<!--
8
BODY
9
{
10
font-family:"Courier";
11
font-size: 12px;
12
margin:0px 0px 0px 0px;
13
overflow-x:no;
14
overflow-y:no;
15
background-color: #B8D3F4;
16
}
17
td
18
{
19
font-size:12px;
20
}
21
.default_input
22
{
23
border:1px solid #666666;
24
height:18px;
25
font-size:12px;
26
}
27
.default_input2
28
{
29
border:1px solid #666666;
30
height:18px;
31
font-size:12px;
32
}
33
.nowrite_input
34
{
35
border:1px solid #849EB5;
36
height:18px;
37
font-size:12px;
38
background-color:#EBEAE7;
39
color: #9E9A9E;
40
}
41
.default_list
42
{
43
font-size:12px;
44
border:1px solid #849EB5;
45
}
46
.default_textarea
47
{
48
font-size:12px;
49
border:1px solid #849EB5;
50
}
51
52
.nowrite_textarea
53
{
54
border:1px solid #849EB5;
55
font-size:12px;
56
background-color:#EBEAE7;
57
color: #9E9A9E;
58
}
59
60
.wordtd5 {
61
font-size: 12px;
62
text-align: center;
63
vertical-align:top;
64
padding-top: 6px;
65
padding-right: 5px;
66
padding-bottom: 3px;
67
padding-left: 5px;
68
background-color: #b8c4f4;
69
}
70
71
.wordtd {
72
font-size: 12px;
73
text-align: left;
74
vertical-align:top;
75
padding-top: 6px;
76
padding-right: 5px;
77
padding-bottom: 3px;
78
padding-left: 5px;
79
background-color: #b8c4f4;
80
}
81
.wordtd_1 {
82
font-size: 12px;
83
vertical-align:top;
84
padding-top: 6px;
85
padding-right: 5px;
86
padding-bottom: 3px;
87
padding-left: 5px;
88
background-color: #516CD6;
89
color:#fff;
90
}
91
.wordtd_2{
92
font-size: 12px;
93
text-align: right;
94
vertical-align:top;
95
padding-top: 6px;
96
padding-right: 5px;
97
padding-bottom: 3px;
98
padding-left: 5px;
99
background-color: #64BDF9;
100
}
101
.wordtd_3{
102
font-size: 12px;
103
text-align: right;
104
vertical-align:top;
105
padding-top: 6px;
106
padding-right: 5px;
107
padding-bottom: 3px;
108
padding-left: 5px;
109
background-color: #F1DD34;
110
}
111
.inputtd
112
{
113
font-size:12px;
114
vertical-align:top;
115
padding-top: 3px;
116
padding-right: 3px;
117
padding-bottom: 3px;
118
padding-left: 3px;
119
}
120
.inputtd2
121
{
122
text-align: center;
123
font-size:12px;
124
vertical-align:top;
125
padding-top: 3px;
126
padding-right: 3px;
127
padding-bottom: 3px;
128
padding-left: 3px;
129
}
130
.tablebg
131
{
132
font-size:12px;
133
}
134
135
.tb{
136
border-collapse: collapse;
137
border: 1px outset #999999;
138
background-color: #FFFFFF;
139
}
140
.td2{line-height:22px; text-align:center; background-color:#F6F6F6;}
141
.td3{background-color:#B8D3F4; text-align:center; line-height:20px;}
142
.td4{background-color:#F6F6F6;line-height:20px;}
143
.td5{border:#000000 solid;
144
border-right-width:0px;
145
border-left-width:0px;
146
border-top-width:0px;
147
border-bottom-width:1px;}
148
149
.tb td{
150
font-size: 12px;
151
border: 2px groove #ffffff;
152
}
153
154
.noborder {
155
border: none;
156
}
157
158
.button {
159
border: 1px ridge #ffffff;
160
line-height:18px;
161
height: 20px;
162
width: 45px;
163
padding-top: 0px;
164
background:#CBDAF7;
165
color:#000000;
166
font-size: 9pt;
167
font-family:"Courier";
168
}
169
170
.textarea {
171
font-family: Arial, Helvetica, sans-serif, "??";
172
font-size: 9pt;
173
color: #000000;
174
border-bottom-width: 1px;
175
border-top-style: none;
176
border-right-style: none;
177
border-bottom-style: solid;
178
border-left-style: none;
179
border-bottom-color: #000000;
180
background-color:transparent;
181
text-align: left
182
}
183
-->
184
</style></head>
185
186
<body>
187
188
<div style="border:1px dashed #E6E6E6;margin:150px 0px 0px 450px; width:350px; height:200px; background-color:#E6E6E6;">
189
<table width="285" height="169" border="0" align="left" cellpadding="0" cellspacing="0" style="margin:15px 0px 0px 15px;">
190
<tr>
191
<td width="126">
192
<!--multiple="multiple" 能同时选择多个 size="10" 确定下拉选的长度-->
193
<select name="first" size="10" multiple="multiple" class="td3" id="first">
194
<option value="选项1">选项1</option>
195
<option value="选项2">选项2</option>
196
<option value="选项3">选项3</option>
197
<option value="选项4">选项4</option>
198
<option value="选项5">选项5</option>
199
<option value="选项6">选项6</option>
200
<option value="选项7">选项7</option>
201
<option value="选项8">选项8</option>
202
</select>
203
</td>
204
<td width="69" valign="middle">
205
<!-- 把左侧选中的option增加到右侧的选择框中 -->
206
<input name="add" id="add" type="button" class="button" value="-->" />
207
<!-- 把左侧所有的option增加到右侧的选择框中 -->
208
<input name="add_all" id="add_all" type="button" class="button" value="==>" />
209
<!-- 把右侧选中的option增加到左侧的选择框中 -->
210
<input name="remove" id="remove" type="button" class="button" value="<--" />
211
<!-- 把右侧所有的option增加到左侧的选择框中 -->
212
<input name="remove_all" id="remove_all" type="button" class="button" value="<==" />
213
</td>
214
<td width="127" align="left">
215
<select name="second" size="10" multiple="multiple" class="td3" id="second">
216
<option value="选项9">选项9</option>
217
</select>
218
</td>
219
</tr>
220
</table>
221
</div>
222
</body>
223
<script type="text/javascript">
224
225
//******************功能1:把左侧选中的option增加到右侧的选择框中
226
//获取左侧的选择框select节点
227
var first_node = document.getElementById("first");
228
//获取右侧的选择框select节点
229
var second_node = document.getElementById("second");
230
231
//得到id=add的按钮,添加点击事件
232
var add = document.getElementById("add");
233
add.onclick = function(){
234
//得到左侧下拉框中的所有option
235
var option_nodes = first_node.getElementsByTagName("OPTION");
236
//遍历所有被选中部分
237
for(var i=0; i<option_nodes.length; i++){
238
var option_node = option_nodes[i];
239
if(option_node.selected){//如果被选中
240
//将左侧的节点追加到右侧
241
second_node.appendChild(option_node);
242
i--;
243
}
244
}
245
}
246
//******************功能2:把左侧所有的option增加到右侧的选择框中
247
//得到id=add_all的按钮,添加点击事件
248
var add_all = document.getElementById("add_all");
249
add_all.onclick = function(){
250
//得到左侧下拉框中的所有option
251
var option_nodes = first_node.getElementsByTagName("OPTION");
252
var len = option_nodes.length;//注意JavaScript中数组的长度是可变的!!!!这样在下面的循环中会出问题!
253
//遍历所有被选中部分
254
for(var i=0; i<len; i++){
255
var option_node = option_nodes[0];
256
//将左侧的节点追加到右侧
257
second_node.appendChild(option_node);
258
}
259
}
260
//******************功能3:把右侧选中的option增加到左侧的选择框中
261
//得到id=remove的按钮,添加点击事件
262
var remove = document.getElementById("remove");
263
remove.onclick = function(){
264
//得到右侧下拉框中的所有option
265
var option_nodes = second_node.getElementsByTagName("OPTION");
266
//遍历所有被选中部分
267
for(var i=0; i<option_nodes.length; i++){
268
var option_node = option_nodes[i];
269
if(option_node.selected){//如果被选中
270
//将右侧的节点追加到左侧
271
first_node.appendChild(option_node);
272
i--;
273
}
274
}
275
}
276
//******************功能4:把右侧所有的option增加到左侧的选择框中
277
//得到id=remove_all的按钮,添加点击事件
278
var remove_all = document.getElementById("remove_all");
279
remove_all.onclick = function(){
280
//得到右侧下拉框中的所有option
281
var option_nodes = second_node.getElementsByTagName("OPTION");
282
//遍历所有被选中部分
283
for(var i=0; i<option_nodes.length; i++){
284
var option_node = option_nodes[i];
285
//将右侧的节点追加到左侧
286
first_node.appendChild(option_node);
287
i--;
288
}
289
}
290
//******************功能5:双击右侧某一个option增加到左侧的选择框中;双击左侧某一个option增加到右侧的选择框中,在select元素上添加双击事件才“完全”正确!因为有些浏览器不支持在option上添加双击事件
291
//得到所有的select
292
var select_nodes = document.getElementsByTagName("select");
293
for(var i=0; i<select_nodes.length; i++){
294
select_nodes[i].ondblclick = function(){
295
//如果是first,则增加到second中去;如果是second,则增加到first中去
296
//获取当前被选中的option的索引
297
var selectedIndex = this.selectedIndex;
298
//获取当前select元素下所有的option
299
var option_nodes = this.getElementsByTagName("option");//注意这里用这种方法才对,如果用this.childNodes获取其实是不对的,不止option元素,其中还包括了空文本等所有元素
300
if(this.id == "first"){
301
//将双击的节点追加到右侧
302
second_node.appendChild(option_nodes[selectedIndex]);
303
}else{
304
//将双击的节点追加到左侧
305
first_node.appendChild(option_nodes[selectedIndex]);
306
}
307
}
308
}
309
</script>
310
</html>
案例演示:
注意:JavaScript中数组长度是可变的!