一、JS操作DOM之checkbox
1.图示
2.html代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>复选框</title>
<script type="text/javascript" src="checkbox.js"></script>
</head>
<body>
请选择你的爱好:<br/>
<input type="checkbox" id="checkAll"/>全选/全不选
<div id="hobbycheck">
<input type="checkbox" name="hobby"/>Java
<input type="checkbox" name="hobby"/>JS
<input type="checkbox" name="hobby"/>C
<input type="checkbox" name="hobby"/>C++
<input type="checkbox" name="hobby"/>pyth
</div>
<div>
<input type="button" value="全选" onclick="checkAll(true);"/>
<input type="button" value="全不选" onclick="checkAll(false);"/>
<input type="button" value="反选" onclick="checkUnAll();"/>
</div>
</body>
</html>3.js代码
/**
* js DOM操作练习：checkbox
*/
window.onload = function() {
document.getElementById("checkAll").onclick=function(){
//this在这里就是表示当前获得的元素对象
checkAll(this.checked);
}
}
function checkAll(flag) {
var El = document.getElementsByName("hobby");
// for-in其中：e表示数组的索引从0开始，El表示获得的节点数组名
for (e in El) {
El[e].checked = flag;
}
// console.debug(El);
document.getElementById("checkAll").checked = flag;
}
function checkUnAll() {
var El = document.getElementsByName("hobby");
// for-in其中：e表示数组的索引从0开始，El表示获得的节点数组名
for (e in El) {
El[e].checked = !El[e].checked;
}
document.getElementById("checkAll").checked = false;
}二、JS操作DOM之select
1.图示
2.HTML代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>列表移动</title>
<script type="text/javascript" src="select.js"></script>
</head>
<body>
<table border="1">
<tr>
<td>
<select id="s1" style="width:100px;" size="10" multiple="multiple" >
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
<option>选项4</option>
<option>选项5</option>
<option>选项6</option>
<option>选项7</option>
<option>选项8</option>
<option>选项9</option>
</select>
</td>
<td align="center">
<input type="button" value="==>" onclick="moveAll('s1', 's2')"/><br/>
<input type="button" value="-->" onclick="moveSelected('s1', 's2')"/><br/>
<input type="button" value="<--" onclick="moveSelected('s2', 's1')"/><br/>
<input type="button" value="<==" onclick="moveAll('s2', 's1')"/>
</td>
<td>
<select id="s2" style="width:100px;" size="10" multiple="multiple" >
</select>
</td>
</tr>
</table>
</body>
</html>3.js代码
/**
* js DOM操作练习：select
*/
//全部移动
function moveAll(s1, s2) {
var E1 = document.getElementById(s1);
var E2 = document.getElementById(s2);
//console.debug(E1);
//console.debug(E2);
//不要用for，数组下标会变动，用while
while(E1.hasChildNodes()){
E2.appendChild(E1.firstChild);
}
}
//移动选中
function moveSelected(s1, s2) {
var E1 = document.getElementById(s1);
var E2 = document.getElementById(s2);
//获得s1下的所有option
var opts=E1.getElementsByTagName("option");
//用for，将数组从后往前取
for (var i = opts.length-1; i>=0 ; i--) {
//判断是否选中
if(opts[i].selected){
E2.appendChild(opts[i]);
}
}
}
三、JS操作DOM之table
1.图示
2.HTML代码
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>新增用户</title>
<script type="text/javascript" src="table.js"></script>
</head>
<body>
<form>
<center>
用户录入<br/>
用户名:<input id="username" type="text"/>
邮箱:<input id="email" type="text"/>
电话:<input id="tel" type="text"/><br/>
<input id="btn_submit" type="button" value="添加"/>
<input id="btn_removeAll" type="button" value="删除所有"/><br/>
</center>
</form>
<hr/>
<table border="1" width="50%" align="center">
<thead>
<tr>
<th>用户名</th>
<th>邮箱</th>
<th>电话</th>
<th>操作</th>
</tr>
</thead>
<tbody id="data">
<tr>
<td>王宝强</td>
<td>[email protected]</td>
<td>18888888888</td>
<td><a href="javascript:" onclick="delRow(this);">删除</a></td>
</tr>
<tr>
<td>马蓉</td>
<td>[email protected]</td>
<td>19999999999</td>
<td><a href="javascript:" onclick="delRow(this);">删除</a></td>
</tr>
</tbody>
</table>
</body>
</html>3.js代码
/**
* js DOM操作练习：table
*/
//表单操作
console.debug("测试：表单操作");
window.onload=function(){
//获得<tbody>元素
var data=document.getElementById("data");
//添加按钮点击事件
document.getElementById("btn_submit").onclick=function(){
//获得填入的数据
var username=document.getElementById("username").value;
var email=document.getElementById("email").value;
var tel=document.getElementById("tel").value;
//创建element元素
var trEl=document.createElement("tr");
var usernameTd=document.createElement("td");
var emailTd=document.createElement("td");
var telTd=document.createElement("td");
var delTd=document.createElement("td");
//给相应的元素赋值，由页面获得的数据
usernameTd.innerHTML=username;
emailTd.innerHTML=email;
telTd.innerHTML=tel;
delTd.innerHTML="<a href='javascript:' onclick='delRow(this);'>删除</a>";
//设置节点的层级关系将<td>添加到父节点<tr>中
trEl.appendChild(usernameTd);
trEl.appendChild(emailTd);
trEl.appendChild(telTd);
trEl.appendChild(delTd);
//设置节点的层级关系，再将<tr>添加到其父节点<tbody>中
data.appendChild(trEl);
};
//删除所有按钮点击事件
document.getElementById("btn_removeAll").onclick=function(){
//删除所有，就是将<tbody id="data">标签下的html内容清除
data.innerHTML="";
};
}
//单个删除方法
function delRow(obj){
//this传进来的是一个<a href="javascript:" onclick="delRow(this);">删除</a> 标签对象，其父节点<td></td>,它的父节点又是<tr></tr>
//单行删除，是要通过<a>标签找到它的爷爷<tr>并删除
var El=obj.parentNode.parentNode;
//删除节点，要用该节点的父节点操作
El.parentNode.removeChild(El);
}