DOM常用方法【DOM】

原创

请叫我木丁西 2022-10-19 15:26:31 博主文章分类：DOM ©著作权

文章标签 html 子节点 css 文章分类 运维

©著作权归作者所有：来自51CTO博客作者请叫我木丁西的原创作品，请联系作者获取转载授权，否则将追究法律责任

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() 配合使用。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>insertBefore.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

</head>

<body>

<ul>

<li id="bj" name="beijing">北京</li>

<li id="sh" name="shanghai">上海</li>

<li id="cq" name="chongqing">重庆</li>

</ul>

</body>

<script language="JavaScript">

// 插入新的节点 <li id="tj" name="tianjin">天津</li>

var tj_node = document.createElement("li");

tj_node.setAttribute("name", "tianjin");

var text_node = document.createTextNode("天津");

tj_node.appendChild(text_node);

// 在 <li id="cq" name="chongqing">重庆</li>的前面

var cq_node = document.getElementById("cq");

cq_node.parentNode.insertBefore(tj_node, cq_node);

</script>

</html>

③自定义的insertAfter(Node newChild, Node refChild)

作用：把一个给定节点插入到一个给定元素节点的给定子节点的后面

自定义js函数代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>insertBefore.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

</head>

<body>

<ul>

<li id="bj" name="beijing">北京</li>

<li id="sh" name="shanghai">上海</li>

<li id="cq" name="chongqing">重庆</li>

<li id="hb" name="hubei">湖北</li>

</ul>

</body>

<script language="JavaScript">

//******************************插入新的节点 <li id="tj" name="tianjin">天津</li>

var tj_node = document.createElement("li");

tj_node.setAttribute("name", "tianjin");

var text_node = document.createTextNode("天津");

tj_node.appendChild(text_node);

// 在  <li id="sh" name="shanghai">上海</li>的后面

var sh_node = document.getElementById("sh");

insertAfter(tj_node, sh_node);

function insertAfter(newChild, refChild){

//获取目标元素的父类节点

var parent_node = refChild.parentNode;

if(parent_node.lastChild == refChild){ //如果目标元素是最后一个元素,则新元素插入到目标元素的后面

parent_node.appendChild(newChild);

}else{//说明目标元素不是最后一个元素，则获取目标元素的下一个元素，在它之前插入新的节点

var refChild_next = refChild.nextSibling;

parent_node.insertBefore(newChild, refChild_next);

</script>

</html>

④replaceChild(Node newChild, Node refChild)

作用：把一个给定父元素里的一个子节点替换为另外一个子节点

var reference = element.replaceChild(newChild,oldChild);

返回值是一个指向已被替换的那个子节点的引用指针。

如果被插入的子节点还有子节点，则那些子节点也被插入到目标节点中

案例代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>form.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

</head>

<body>

您喜欢的城市:<br>

<ul>

<li id="bj" value="beijing" >北京</li>

<li id="sh" value="shanghai">上海</li>

<li id="cq" value="chongqing"> 重庆</li>

</ul>

您喜欢的游戏:<br>

<ul>

<li id="fk" value="fangkong">反恐<p>精英</p></li>

<li id="ms" value="moshou">魔兽</li>

<li id="cq" value="chuanqi">传奇</li>

</ul>

</body>

<script language="JavaScript">

//点击北京节点， 将被反恐节点替换

var bj_node = document.getElementById("bj");

bj_node.onclick = function(){

var fk_node = document.getElementById("fk");

var bj_parent_node = bj_node.parentNode;

bj_parent_node.replaceChild(fk_node, bj_node);

</script>

</html>

演示：

DOM常用方法【DOM】_子节点

⑤removeChild(Node oldChild)

作用：从一个给定元素里删除一个子节点

var reference = element.removeChild(node);

返回值是一个指向已被删除的子节点的引用指针。

某个节点被removeChild()方法删除时,这个节点所包含的所有子节点将同时被删除。

如果想删除某个节点，但不知道它的父节点是哪一个， parentNode 属性可以帮忙。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>insertBefore.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

</head>

<body>

<ul id="city">

<li id="bj" name="beijing">北京</li>

<li id="sh" name="shanghai">上海</li>

<li id="cq" name="chongqing">重庆</li>

</ul>

</body>

<script language="JavaScript">

//删除<ul id="city"> 下<li id="bj" name="beijing">北京</li>这个节点</ul>

var bj_node = document.getElementById("bj");

var remove_obj = bj_node.parentNode.removeChild(bj_node);//返回删除的对象

alert(remove_obj.name)

</script>

</html>

⑥hasChildNodes()

作用：该方法用来检查一个元素是否有子节点，返回值是 true 或 false.

var booleanValue = element.hasChildNodes();

文本节点和属性节点不可能再包含任何子节点，所以对这两类节点使用 hasChildNodes 方法的返回值永远是 false.

如果 hasChildNodes 方法的返回值是 false，则 childNodes,firstChild,lastChild 将是空数组和空字符串。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>form.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

</head>

<body>

<form name="form1" action="test.html" method="post" >

<input type="text" name="tname" value="请叫我木丁西 QQ1012421396_1"  id="tid_1"  ><br>

<input type="text" name="tname" value="请叫我木丁西 QQ1012421396_2"  id="tid_2"  ><br>

<input type="text" name="tname" value="请叫我木丁西 QQ1012421396_3"  id="tid_3"  ><br>

<input type="button" name="ok" value="保存1"/>

</form>

<select name="edu" id="edu">

<option value="博士">博士^^^^^</option>

<option value="硕士">硕士^^^^^</option>

<option value="本科" selected="selected" >本科^^^^^</option>

<option value="幼儿园">幼儿园^^^^^</option>

</select>

<select name="job" id="job" >

<option value="美容">美容^^^^^</option>

<option value="IT">IT^^^^^</option>

<option value="程序员">程序员^^^^^</option>

<option value="建筑师">建筑师^^^^^</option>

</select>

</body>

<script language="JavaScript">

//查看id="edu"的节点是否含有子节点

var eduSelectObj = document.getElementById("edu");

if(eduSelectObj.hasChildNodes()){

alert("id=edu的节点有子节点")

else{

alert("id=edu的节点没有子节点")

//查看id="tid_1"的节点是否含有子节点

var tid_1Obj = document.getElementById("tid_1");

if(tid_1Obj.hasChildNodes()){

alert("id=tid_1的节点有子节点")

else{

alert("id=tid_1的节点没有子节点");

</script>

</html>

⑦getAttribute(String name)

作用：返回一个给定元素的一个给定属性名称的节点的值

var attributeValue = element.getAttribute(attributeName);

给定属性的名字必须以字符串的形式传递给该方法。

给定属性的值将以字符串的形式返回，如果给定属性不存在，getAttribute() 将返回一个空字符串.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>form.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

</head>

<body>

您喜欢的城市:<br>

<ul>

<li id="bj" value="beijing">北京</li>

<li id="sh" value="shanghai">上海</li>

<li id="cq" value="chongqing">重庆</li>

</ul>

您喜欢的游戏:<br>

<ul>

<li id="fk" value="fangkong">反恐</li>

<li id="ms" value="moshou">魔兽</li>

<li id="xj" value="xingji">星际争霸</li>

</ul>

</body>

<script language="JavaScript">

//打印<li id="xj" value="xingji">星际争霸</li>节点的value属性的值

var xj_node = document.getElementById("xj");

alert(xj_node.getAttribute("value") + "#" + xj_node.value);//由于是标签，xj_node.value=1 并不是“xingji”而是1

</script>

</html>

⑧getAttributeNode(String attributeNodeName)

作用： 返回一个给定元素的一个给定属性名称的节点

var value_node = xj_node.getAttributeNode("value");//获取value属性的属性节点

⑨setAttribute(String name, String value)

作用：将给定元素节点添加一个新的属性值或改变它的现有属性的值。

element.setAttribute(attributeName,attributeValue);

属性的名字和值必须以字符串的形式传递给此方法

如果这个属性已经存在，它的值将被刷新；

如果不存在，setAttribute()方法将先创建它再为其赋值。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>form.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

</head>

<body>

您喜欢的城市:<br>

<ul>

<li id="bj" value="beijing">北京</li>

<li id="sh" value="shanghai">上海</li>

<li id="cq" value="chongqing">重庆</li>

</ul>

您喜欢的游戏:<br>

<ul>

<li id="fk" value="fangkong">反恐</li>

<li id="ms" value="moshou">魔兽</li>

<li id="xj" value="xingji">星际争霸</li>

</ul>

</body>

<script language="JavaScript">

//给这个节点增加 name属性 <li id="xj" value="xingji" name="xingjizhengba">星际争霸</li>

var xj_node = document.getElementById("xj");

xj_node.setAttribute("name", "xingjizhengba");

alert(xj_node.getAttribute("name"));

</script>

</html>

⑩createElement(String tagName)

作用：按照给定的标签名创建一个新的元素节点。方法只有一个参数：将被创建的元素的名字，是一个字符串.

var reference = document.createElement(element);

方法的返回值：是一个指向新建节点的引用指针。返回值是一个元素节点，所以它的 nodeType 属性值等于 1。

新元素节点不会自动添加到文档里，新节点没有 nodeParent 属性，它只是一个存在于 JavaScript 上下文的对象.

例如： var pElement = document.createElement("p");

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>form.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

</head>

<body>

您喜欢的城市:<br>

<ul id="city">

<li id="bj" value="beijing">北京</li>

<li id="sh" value="shanghai">上海</li>

<li id="cq" value="chongqing">重庆</li>

</ul>

您喜欢的游戏:<br>

<ul>

<li id="fk" value="fangkong">反恐</li>

<li id="ms" value="moshou">魔兽</li>

<li id="xj" value="xingji">星际争霸</li>

</ul>

</body>

<script language="JavaScript">

//增加城市节点 <li id="tj" value="tianjin">天津</li>

//创建元素节点

var li_Ele = document.createElement("li");

li_Ele.setAttribute("id", "tj");

li_Ele.setAttribute("value", "tianjin");

//添加文本子节点

var text_node = document.createTextNode("天津");

li_Ele.appendChild(text_node);

//获取city节点

var city_node = document.getElementById("city");

//追加子节点

city_node.appendChild(li_Ele);

</script>

</html>

⑪createTextNode(String data)

作用：创建一个包含着给定文本的新文本节点。这个方法的返回值是一个指向新建文本节点引用指针。

var textNode = document.createTextNode(text);

方法只有一个参数：新建文本节点所包含的文本字符串

方法的返回值：是一个指向新建节点的引用指针。它是一个文本节点，所以它的 nodeType 属性等于 3.

例如：

var pElementText=document.createElement("li");

var textElement=document.createTextNode("南京");

pElementText.appendChild(textElement);

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>form.html</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

<meta http-equiv="description" content="this is my page">

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

</head>

<body>

<select name="edu" id="edu">

<option value="博士">博士^^^^^</option>

<option value="硕士">硕士^^^^^</option>

<option value="本科">本科^^^^^</option>

<option value="幼儿园">幼儿园^^^^^</option>

</select>

</body>

<script language="JavaScript">

//增加节点<option value="大专">大专^^^^^</option>

var option_Ele = document.createElement("option");

option_Ele.setAttribute("value", "大专");

var text_node = document.createTextNode("大专^^^^^");

option_Ele.appendChild(text_node);

var edu_node = document.getElementById("edu");

edu_node.appendChild(option_Ele);

</script>

</html>

综合案例1：

案例代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>添加用户</title>

</head>

<body>

<center>

<br><br>

添加用户:<br><br>

姓名: <input type="text" name="name" id="name" />

email: <input type="text" name="email" id="email" />

电话: <input type="text" name="tel" id="tel" /><br><br>

<button id="addUser">提交</button>

<br><br>

<hr>

<br><br>

<table id="usertable" border="1" cellpadding="5" cellspacing=0>

<tr>

<th>姓名</th>

<th>email</th>

<th>电话</th>

<th>操作</th>

</tr>

</table>

</center>

</body>

<script language="JavaScript">

//获取提交按钮

var addUser_obj = document.getElementById("addUser");

//添加onclick事件

addUser_obj.onclick = function(){

//获取姓名

var name = document.getElementById("name").value;

//获取email

var email = document.getElementById("email").value;

//获取电话

var tel = document.getElementById("tel").value;

//获取表格usertable节点

var usertable_node = document.getElementById("usertable");

//创建tbody

var tbody_node = document.createElement("tbody");

//创建tr元素

var tr = document.createElement("tr");

//创建td元素

var td1 = document.createElement("td");

td1.innerHTML = name;

var td2 = document.createElement("td");

td2.innerHTML = email;

var td3 = document.createElement("td");

td3.innerHTML = tel;

var td4 = document.createElement("td");

var a_Ele = document.createElement("a");

a_Ele.setAttribute("href", "#");

var text_a_Ele = document.createTextNode("删除");

a_Ele.appendChild(text_a_Ele);

a_Ele.onclick = function(){

var tr = a_Ele.parentNode.parentNode;

var td = tr.firstChild.firstChild;

var tbody = tr.parentNode;

var flag = window.confirm("确定删除" + td.nodeValue + "?");

if(flag){

tbody.removeChild(tr);

td4.appendChild(a_Ele);

tr.appendChild(td1);

tr.appendChild(td2);

tr.appendChild(td3);

tr.appendChild(td4);

tbody_node.appendChild(tr);

usertable_node.appendChild(tbody_node);

</script>

</html>

案例演示：

DOM常用方法【DOM】_css_02

综合案例2：

案例代码：

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>无标题文档</title>

<style type="text/css">

<!--

BODY

font-family:"Courier";

font-size: 12px;

margin:0px 0px 0px 0px;

overflow-x:no;

overflow-y:no;

background-color: #B8D3F4;

td

font-size:12px;

.default_input

border:1px solid #666666;

height:18px;

font-size:12px;

.default_input2

border:1px solid #666666;

height:18px;

font-size:12px;

.nowrite_input

border:1px solid #849EB5;

height:18px;

font-size:12px;

background-color:#EBEAE7;

color: #9E9A9E;

.default_list

font-size:12px;

border:1px solid #849EB5;

.default_textarea

font-size:12px;

border:1px solid #849EB5;

.nowrite_textarea

border:1px solid #849EB5;

font-size:12px;

background-color:#EBEAE7;

color: #9E9A9E;

.wordtd5

font-size: 12px;

text-align: center;

vertical-align:top;

padding-top: 6px;

padding-right: 5px;

padding-bottom: 3px;

padding-left: 5px;

background-color: #b8c4f4;

.wordtd

font-size: 12px;

text-align: left;

vertical-align:top;

padding-top: 6px;

padding-right: 5px;

padding-bottom: 3px;

padding-left: 5px;

background-color: #b8c4f4;

.wordtd_1

font-size: 12px;

vertical-align:top;

padding-top: 6px;

padding-right: 5px;

padding-bottom: 3px;

padding-left: 5px;

background-color: #516CD6;

color:#fff;

.wordtd_2{

font-size: 12px;

text-align: right;

vertical-align:top;

padding-top: 6px;

padding-right: 5px;

padding-bottom: 3px;

padding-left: 5px;

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>

案例演示：

DOM常用方法【DOM】_css_03

注意：JavaScript中数组长度是可变的！

上一篇：注解_通用BaseDao优化

下一篇：注解

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯