HTML DOM
1.1HTML DOM 简介
HTML DOM 是 HTML 的标准对象模型和编程接口。它定义了：
- 作为对象的 HTML 元素
- 所有 HTML 元素的属性
- 访问所有 HTML 元素的方法
- 所有 HTML 元素的事件
1.2实践-列表全选
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
table{
border: 1px solid #000;
width: 400px;
}
</style>
<script type="text/javascript">
function change(){
var all = document.getElementById("checkbox_all");
var cb = document.getElementsByName("personid");
//判断全选按钮是否被选中
if(all.checked){
for(var i = 0; i < cb.length; i++){
cb[i].checked = true;
}
}else{
for(var i = 0; i < cb.length; i++){
cb[i].checked = false;
}
}
}
//反选
function reverse(){
//获取所有的checkbox
var cb = document.getElementsByName("personid");
for(var i = 0; i < cb.length; i++){
if(cb[i].checked){
cb[i].checked = false;
}else{
cb[i].checked = true;
}
}
}
</script>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="0">
<tr>
<th>check all<input type="checkbox" id="checkbox_all" onclick="change()"/></th>
<th>Name</th>
<th>Age</th>
<th>Code</th>
</tr>
<tr>
<td><input type="checkbox" name="personid" /></td>
<td>Steve</td>
<td>20</td>
<td>180128</td>
</tr>
<tr>
<td><input type="checkbox" name="personid"/></td>
<td>Robin</td>
<td>23</td>
<td>150334</td>
</tr>
<tr>
<td><input type="checkbox" name="personid"/></td>
<td>Mary</td>
<td>19</td>
<td>239018</td>
</tr>
<tr>
<td><input type="checkbox" name="personid"/></td>
<td>Zed</td>
<td>21</td>
<td>932023</td>
</tr>
</table>
<input type="button" value="inverse" onclick="reverse()"/>
</body>
</html>
1.3实践-下拉列表左右选择
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.center{
float:left;
margin-left: 100px ;
}
</style>
</head>
<body>
<div class="center">
<select id="select1" multiple style="width:100px;height: 200px;" ondblclick="sel()">
<option value="选项1">张云雷</option>
<option value="选项2">李云龙</option>
<option value="选项3">郑云龙</option>
<option value="选项4">柳云龙</option>
<option value="选项5">阿云嘎</option>
</select>
<input type="button" onclick="sel()" value="将左边选中的选项添加到右边" />
</div>
<div class="center">
<select id="select2" multiple style="width:100px;height: 200px;" ondblclick="cancel_sel()">
</select>
<input type="button" onclick="cancel_sel()" value="将右边选中的选项添加到左边" />
</div>
</body>
<script type="text/javascript">
function sel(){
var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
var select1_options = select1.getElementsByTagName("option");
for(var i = 0; i < select1_options.length; i++){
var opt = select1_options[i];
if(opt.selected){
select2.appendChild(opt);
}
}
}
//取消选中
function cancel_sel(){
var select1 = document.getElementById("select1");
var select2 = document.getElementById("select2");
var select2_options = select2.getElementsByTagName("option");
for(var i = 0; i < select2_options.length; i++){
var opt = select2_options[i];
if(opt.selected){
select1.appendChild(opt);
}
}
}
</script>
</html>
1.4实践-省市联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
select{
width:100px;
}
</style>
</head>
<body>
省：
<select id="sheng" onchange="selectShi()">
<option value="">请选择省份</option>
<option value="0">河北省</option>
<option value="1">山东省</option>
<option value="2">河南省</option>
<option value="3">山西省</option>
</select>
市：
<select id="shi">
<option value="">请选择市</option>
</select>
</body>
<script type="text/javascript">
var arrs = [];
arrs[0] = ["秦皇岛","保定","石家庄","唐山"];
arrs[1] = ["济南","临沂","青岛","威海"];
arrs[2] = ["洛阳","郑州","开封","周口"];
arrs[3] = ["太原","大同","运城","忻州"];
function selectShi(){
var sheng = document.getElementById('sheng').value;
var shi = document.getElementById("shi");
var shis = arrs[sheng];
//清空原来的信息
//获取市的option属性
var shi_opts = shi.getElementsByTagName("option");
//遍历删除市中的option
for(var i= shi_opts.length - 1; i >= 1; i--){
var shi_opt = shi_opts[i];
shi.removeChild(shi_opt);
}
for(var i = 0; i < shis.length; i++){
var textNode = document.createTextNode(shis[i]);
var opt = document.createElement("option");
opt.appendChild(textNode);
shi.appendChild(opt);
}
}
</script>
</html>
1.5DOM综合练习1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>dcoument综合练习</title>
<link rel="stylesheet" href="">
<style type="text/css">
*{
margin: 0 auto;
}
hr{
margin: 10px;
}
div{
width: 500px;
border: 1px solid #c7cbd1;
}
</style>
<!-- -->
<script type="text/javascript">
var _id=1;//全局变量id
//删除某个元素按钮事件
function deletes(id){
//获取父元素的对象
var tbodys=document.getElementsByTagName("tbody")[0];
//获取tr的元素
var trs=tbodys.getElementsByTagName("tr");
//删除指定的行
tbodys.removeChild(trs[id]);
//将被删除后的行的id进行更改
for (var i = id; i < trs.length; i++) {
//先获取每行的最后一个单元格元素，在获取该单元格的孩子元素，
trs[i].lastChild.firstChild.setAttribute("href","javascript:deletes("+i+")");
}
//每删除一个记录总记录的id就减一
_id--;
}
//删除选中的全部记录的方法
function deleteall(){
//获取父元素的对象
var tbodys=document.getElementsByTagName("tbody")[0];
//获取th的元素
var ths=tbodys.getElementsByTagName("th");
alert(ths.length);
//遍历th元素的数组
//需要从后往前删除，如果是从前向后删除则会每次只删除一条记录
for (var i = ths.length-1; i >=0; i--) {
if (ths[i].firstChild.checked==true) {
tbodys.removeChild(ths[i].parentNode);
}
}
//将被删除后的行的id进行更改
for (var i = 0; i < ths.length; i++) {
//从第一个元素进行遍历，对每一个元素都进行更改
ths[i].parentNode.lastChild.firstChild.setAttribute("href","javascript:deletes("+i+")");
}
//设置全局变量id的值为数组长度的值；为添加记录做铺垫
_id=ths.length;
}
//全部选中的方法
function selectall(){
alert("okokoko");
//获取父元素的对象
var tbodys=document.getElementsByTagName("tbody")[0];
//获取th的元素
var ths=tbodys.getElementsByTagName("th");
//利用for循环实现状态的改变（存在一缺点：在点击前选中的选项会变为未选中状态）
for(var i=0;i<ths.length;i++){
//判断是否为选中状态
if(ths[i].firstChild.checked==true){
ths[i].firstChild.checked=false;
}else{
ths[i].firstChild.checked=true;
}
}
}
window.onload=function(){
//添加人员信息的方法：
var _into=document.getElementById("into").onclick=function(){
//获取填写数据并验证是否符合要求！！
var _code=document.getElementById("code").value;
var _name=document.getElementById("name").value;
var _pass=document.getElementById("pass").value;
var _ages=document.getElementById("ages").value;
var _adress=document.getElementById("adress").value;
var message="";//错误信息
var floag=1;//开关变量
if(isNaN(_code)){
message+="编号不可以为空或非数字形式\n";
floag=0;//改变开关变量的状态
}
if(!/^[0-9A-Za-z]{8,12}$/.test(_pass)){
alert("no");
message+="密码为字母数字的8-12位组合\n";
floag=0;
}
if(!/^[0-9]{2,3}$/.test(_ages)){
message+="年龄不合法！\n"
floag=0;
}
if(floag==0){
alert(message);
}else{
//获取第一个tbody对象
var _tbody=document.getElementsByTagName("tbody")[0];
//创建tr元素
var _tr=document.createElement("tr");
//创建td元素
var _td0=document.createElement("th");
var _newcheck=document.createElement("input");
//设置input元素的属性为CheckBox
_newcheck.setAttribute("type","checkbox");
_newcheck.setAttribute("id",_id);//设置CheckBox的id属性
//将input元素添加到单元格中
_td0.appendChild(_newcheck);
var _td1=document.createElement("td");
//添加单元格的文本元素
_td1.innerHTML=_code;
var _td2=document.createElement("td");
_td2.innerHTML=_name;
var _td3=document.createElement("td");
_td3.innerHTML=_pass;
var _td4=document.createElement("td");
_td4.innerHTML=_ages;
var _td5=document.createElement("td");
_td5.innerHTML=_adress;
var _td6=document.createElement("td");
var _newa=document.createElement("a");
//添加超链接的事件属性
var x=1;
_newa.setAttribute("href","javascript:deletes("+_id+")");
_newa.innerHTML="删除";
_td6.appendChild(_newa);
//将td添加到tr中
_tr.appendChild(_td0);
_tr.appendChild(_td1);
_tr.appendChild(_td2);
_tr.appendChild(_td3);
_tr.appendChild(_td4);
_tr.appendChild(_td5);
_tr.appendChild(_td6);
//将tr添加到tbody中
_tbody.appendChild(_tr);
_id++;//全局变量id++
//每次添加完后需要调用重置的方法将输入框内容置空
}
}
//重置按钮的事件方法：
document.getElementById("resert").onclick=function(){
document.getElementById("code").value="";
document.getElementById("name").value="";
document.getElementById("pass").value="";
document.getElementById("ages").value="";
document.getElementById("adress").value="";
}
}
</script>
</head>
<body>
<div>
<table border="1">
<caption>人员信息表</caption>
<thead>
<tr>
<th>选中</th>
<th>编号</th>
<th>用户</th>
<th>密码</th>
<th>年龄</th>
<th>住址</th>
<th>操作</th>
</tr>
<tr>
<th><input type="checkbox" name="checkall" onchange="selectall()"></th>
<th colspan="6" align="center">
<a href="javascript:deleteall()">全部删除</a>
</th>
</tr>
</thead>
<tbody>
<tr>
<th><input type="checkbox" id="0"></th>
<td>001</td>
<td>admin</td>
<td>root</td>
<td>41</td>
<td>香港九龙湾</td>
<td><a href="javascript:deletes(0)">删除</a></td>
</tr>
</tbody>
</table>
<hr border="2"/>
<table border="1" cellspacing="0">
<caption>添加人员信息</caption>
<tbody>
<tr>
<th>编号：</th>
<td><input type="text" id="code"></td>
</tr>
<tr>
<th>用户：</th>
<td><input type="text" id="name"></td>
</tr>
<tr>
<th>密码：</th>
<td><input type="text" id="pass"></td>
</tr>
<tr>
<th>年龄：</th>
<td><input type="text" id="ages"></td>
</tr>
<tr>
<th>住址：</th>
<td><input type="text" id="adress"></td>
</tr>
</tbody>
<tfoot>
<tr>
<th colspan="7">
<button type="button" id="resert">重置</button>
<button type="button" id="into">添加</button>
</th>
</tr>
</tfoot>
</table>
</div>
</body>
</html>
扫一扫
421
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
