BOM对象Demo：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//添加元素
function addElement() {
var city = document.getElementById("city");
//创建一个元素
var LiEl = document.createElement("li");
//创建一个文本节点
var text = document.createTextNode("深圳");
//把文本节点添加到元素中
LiEl.appendChild(text);
//把元素添加到city这个列表中
city.appendChild(LiEl);
}
//删除元素
function delElement() {
var city = document.getElementById("city");
var count = city.childNodes.length;
//alert(count);
city.removeChild(city.childNodes[count-1]);
}
</script>
</head>
<body>
<input type="button" value="添加元素" onclick="addElement()" />
<input type="button" value="删除元素" onclick="delElement()" />
<ul id="city">
<li>北京
<li>上海
</ul>
</body>
</html>
实现省市二级联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册界面</title>
<style>
.bodyDiv{
width: 90%;
margin:0 auto;/*设置body居中*/
}
.logoDiv{
/*border: 1px solid red;*/
width: 33%;
float: left;
height: 80px;
}
.logoDiv a{
text-decoration:none;/*去下划线*/
/*overflow: hidden; /*防止内容超出容器或者产生自动换行*/
}
.clear{
clear: both;
}
.menuDiv{
height: 40px;
background-color: black;
width: 100%;
/*border: 1px solid red;*/
}
.menuDiv a{
text-decoration:none;/*去下划线*/
color: white;
font-size: 20px;
}
</style>
<script>
//定义二维数组
var arr = new Array(5);
arr[0] = new Array("福州市","厦门市","漳州市","泉州市","莆田市","宁德市","龙岩市","三明市","南平市");
arr[1] = new Array("杭州市","宁波市","义乌市","温州市","嘉兴市","金华市","余姚市");
arr[2] = new Array("南京市","苏州市","无锡市","扬州市","连云港市");
arr[3] = new Array("广州市","深圳市","东莞市","珠海市","汕头市","佛山市","湛江市","中山市");
arr[4] = new Array("石家庄市","秦皇岛市","廊坊市","唐山市","张家口市");
function selectCity(value) {
var city = document.getElementById("city");
//选择新的省份首先要清除原来的城市
for(var i = city.options.length;i>0;i--) {
city.options[i] = null;
}
for(var i = 0;i < arr.length;i++) {
if(value == i) {
for(var j = 0;j < arr[i].length;j++) {
//创建元素
var opEl = document.createElement("option");
//创建文本
var cityText = document.createTextNode(arr[i][j]);
//将文本添加到元素中
opEl.appendChild(cityText);
//将元素添加到city列表里面
city.appendChild(opEl);
}
}
}
}
</script>
</head>
<body>
<div class="bodyDiv">
<div>
<div class="logoDiv">
<img src="img/logo2.png" />
</div>
<div class="logoDiv">
<img src="img/header.jpg" />
</div>
<div class="logoDiv" style="margin-left:150px ;margin-top: 35px;height: 45px;width: 180px;">
<a href="#" >登录</a>
<a href="#" >注册</a>
<a href="#" >购物车</a>
</div>
<div class="clear"></div>
</div>
<div class="menuDiv">
<a href="#">首页</a>
<a href="#">手机数码</a>
<a href="#">电脑办公</a>
<a href="#">烟酒茶糖</a>
<a href="#">鞋靴箱包</a>
</div>
<!--
注册表
-->
<div style="height: 600px;width: 100%;background-image: url(image/regist_bg.jpg);">
<div style="height: 450px;
background: white;
width: 600px;
position: absolute;
margin-top: 70px;
margin-left: 300px;
border: 5px solid gray;">
<form onsubmit="return checkForm()">
<table width="100%" cellspacing="15" >
<tr>
<td>用户名</td>
<td><input type="text" name="userName" id="userName"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="passWord" id="password"></td>
</tr>
<tr>
<td>确认密码</td>
<td><input type="password" name="repassWord" id="repassword"></td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男" />男<input type="radio" name="sex" value="女" />女
</td>
</tr>
<tr>
<td>籍贯</td>
<td>
<select name="province" id="provice" onchange="selectCity(this.value)">
<option value="">--请选择--</option>
<option value="0">福建</option>
<option value="1">浙江</option>
<option value="2">江苏</option>
<option value="3">广东</option>
<option value="4">河北</option>
</select>
<select name="city" id="city">
<option>--请选择--</option>
</select>
</td>
</tr>
<tr>
<td>爱好</td>
<td>
<input type="checkbox" name="hobby" value="篮球"/>篮球
<input type="checkbox" name="hobby" value="足球" />足球
<input type="checkbox" name="hobby" value="排球" />排球
</td>
</tr>
<tr>
<td>邮箱</td>
<td>
<input type="email" name="email" id="email"/>
</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="注册" />
<input type="submit" value="取消" />
</td>
</tr>
</table>
</form>
</div>
</div>
<!--图片栏-->
<div style="width: 100%;">
<img src="image/footer.jpg" width="100%"/>
</div>
<!--底栏-->
<center>
<div class="linkDiv" >
<a href="#" >关于我们</a>
<a href="#" >联系我们</a>
<a href="#" >招贤纳士</a>
<a href="#" >法律声明</a>
<a href="#" >友情链接</a>
<a href="#" >支付方式</a>
<a href="#" >配送方式</a>
<a href="#" >服务方式</a>
<a href="#" >广告声明</a>
</div>
<div>
<font>--------------------------------------------------------------------------------------------------</font>
<br />
<font> Copyright © 2005-2016 传智商城 版权所有 </font>
</div>
</center>
</div>
</body>
</html>