5、BOM编程 DOM编程（2）
DOM
创建新节点
document.createElement("标签名") 创建新元素节点
elt.setAttribute("属性名", "属性值") 设置属性
elt.appendChild(e) 添加元素到elt中最后的位置
elt.insertBefore(new, child); 添加到elt中，child之前。
// 参数1：要插入的节点参数2插入目标元素的位置
elt.removeChild(eChild) 删除指定的子节点
案例：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
/*
创建节点：
document.createElement("标签名") 创建新元素节点
elt.setAttribute("属性名", "属性值") 设置属性
添加节点到文档树上:
elt.appendChild(e) 添加元素到elt中最后的位置 把元素添加最后一个子节点的后面。
elt.insertBefore(new, child); 添加到elt中，child之前。
// 参数1：要插入的节点 参数2：插入目标元素的位置
*/
/*
function add(){
//
var inputNode = document.createElement("input"); // 创建一个节点的对象
inputNode.setAttribute("type","file"); //给新节点设置type的属性值。
var body = document.getElementsByTagName("body")[0];
body.appendChild(inputNode); //把新节点添加到body体中。
}
*/
var count = 1;
function add(){
var trNode = document.createElement("tr");
var tdNode = document.createElement("td");
var inputNode = document.createElement("input");
inputNode.setAttribute("type","button");
inputNode.setAttribute("value",count+"");
count++;
tdNode.appendChild(inputNode);
trNode.appendChild(tdNode);
//trNode添加 到指定 的位置上。
var tbodyNode = document.getElementsByTagName("tbody")[0];
//tableNode.appendChild(trNode);
var button1 = document.getElementById("b1");
tbodyNode.insertBefore(trNode,button1); // 注意： 使用obj.insertBefore(o1,o2)这个方法的时候
//obj必须是o1,o2的直接父节点。
//alert(button1.nodeName+"~~"+trNode.nodeName+"~~"+tableNode.nodeName);
}
script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档title>
head>
<body>
<table>
<tr>
<td>
<input type="button" value="0">
td>
tr>
<tr id="b1">
<td>
<input type="button" value="添加" onclick="add()">
td>
tr>
table>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
function addFile(){
var trNode = document.createElement("tr");
var td1 = document.createElement("td");
var td2 = document.createElement("td");
td1.innerHTML="";
td2.innerHTML="删除附件"
trNode.appendChild(td1);
trNode.appendChild(td2);
//把trNode添加 到添加按钮上面
var addButton = document.getElementById("addButton");
var tbody = document.getElementsByTagName("tbody")[0];
tbody.insertBefore(trNode,addButton);
}
function deleteFile(deleteNode){
//找到要删除的tr a---->td---->tr
var trNode = deleteNode.parentNode.parentNode; //获取到了要删除的tr节点。
// 找 到trNode的父节点
var tbodyNode =document.getElementsByTagName("tbody")[0];
tbodyNode.removeChild(trNode);
//trNode.removeNode(true); // removeNode() 在firefox上不 支持，在ie支持。
}
script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档title>
head>
<body>
<table>
<tr>
<td><input type="file">td>
<td><a href="#" onclick="deleteFile(this)">删除附件a>td>
tr>
<tr id="addButton">
<td>
<input type="button" value="添加附件" onclick="addFile()"/>
td>
tr>
table>
body>
html>
案例
生成二级城市联动菜单
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档title>
<style type="text/css">
select{
width:100px;
}
style>
<script type="text/javascript">
function selcity()
{
//定义数据对应关系
//城市有很多，所以通过数组存储。每一个省对应一个城市数组，怎么建立对应关系呢？
//每一个省都有自己的角标。通过角标和数组建立对应关系，这就是二维数组。
var arr = [['--选择城市--'],['海淀区','朝阳区','东城区','西城区']
,['沈阳','大连','鞍山','抚顺']
,['济南','青岛','烟台','威海']
,['石家庄','廊坊','唐山','秦皇岛']];
//获取选择的省的角标。
var selNode = document.getElementById("selid");
var index = selNode.selectedIndex;
var cities = arr[index];
var subSelNode = document.getElementById("subselid");
//有更简单清除方式，只要改变下拉菜单的长度即可。
subSelNode.options.length = 0;
/*
//清除上一次选择的子菜单内容。
for(var x=1; x
for(var x=0; xvar optNode = document.createElement("option");
optNode.innerHTML = cities[x];
subselid.appendChild(optNode);
}
}
script>
head>
<body>
<select id="selid" onchange="selcity()">
<option>--选择省市--option>
<option>北京市option>
<option>辽宁省option>
<option>山东省option>
<option>河北省option>
select>
<select id="subselid">
<option>--选择城市--option>
select>
body>
html>
动态生成年、月、日字段
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/**
* @author Administrator
*/
//通过js创建年,月,日
//获取Dom
var dom = window.document;
function myYear() {
//获取年的select
var year = dom.getElementById("year");
//创建年
var minYear = 1900;
var maxYear = new Date().getFullYear();
for (var i = minYear; i <= maxYear; i++) {
//创建Option
var opt = dom.createElement("option");
//设置Option,标签体.
opt.innerHTML = i;
opt.value = i;
//挂载节点
year.appendChild(opt);
}
}
function myMonth() {
var month = dom.getElementById("month");
//创建月
for (var i = 1; i <= 12; i++) {
//创建Option
var opt = dom.createElement("option");
//设置Option,标签体.
if (i < 10) {
opt.innerHTML = "0" + i;
opt.value = i;
} else {
opt.innerHTML = i;
opt.value = i;
}
month.appendChild(opt);
}
month.onchange = myDay;
}
function myDay() {
clear();
//创建天
// 大月1 3 5 7 8 10 12 ,小月4 6 9 11 闰年2月 非闰年的2月
//获取年
var year = dom.getElementById("year").value;
//获取月
var month = dom.getElementById("month").value;
if (year == "") {
alert("请选择年");
return;
}
if (month == "") {
alert("请选择月");
return;
}
//获取天select
var day = dom.getElementById("day");
//一个月至少有28天.
for (var i = 1; i <= 28; i++) {
var opt = dom.createElement("option");
if (i < 10) {
opt.innerHTML = "0" + i;
opt.value = "0" + i;
} else {
opt.innerHTML = i;
opt.value = i;
}
day.appendChild(opt);
}
//大月
var isBigMonth = month == 1 || month == 3 || month == 5 || month == 7 || month == 8 || month == 10 || month == 12;
//小月
var isSmallMonth = month == 4 || month == 6 || month == 9 || month == 11;
//闰年 可以整除4但不能整除100 或者 年份可以整除400.
var isLeapYear = (year % 4 == 0 && year % 100 != 0) || year % 400 == 0;
//判断,如果是大月,添加3天
if (isBigMonth) {
//添加3天
for (var i = 29; i <= 31; i++) {
var opt = dom.createElement("option");
opt.innerHTML = i;
opt.value = i;
day.appendChild(opt);
}
} else if (isSmallMonth) {
//添加2天
for (var i = 29; i <= 30; i++) {
var opt = dom.createElement("option");
opt.innerHTML = i;
opt.value = i;
day.appendChild(opt);
}
} else if (isLeapYear) {
//如果是闰年,添加一天.专门处理闰年2月.
var opt = dom.createElement("option");
opt.innerHTML = 29;
opt.value = 29;
day.appendChild(opt);
}
}
function clear() {
var day = dom.getElementById("day");
var optArr = day.childNodes;
for (var i = optArr.length - 1; i >= 0; i--) {
day.removeChild(optArr[i]);
}
}
function getBirthday() {
//获取Dom
var dom = window.document;
myYear();
myMonth();
}
getBirthday();
script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascripttitle>
head>
<body>
生日:
<select id="year">
<option>年option>
select>
<select id="month">
<option>月option>
select>
<select id="day">
<option>日option>
select>
body>
html>
生产一个验证码
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript">
/**
* @author Administrator
*/
//验证码 ,4位的,由字符,数字组成.
function createCode() {
var datas = ["A", "B", "C", "D", "E", "F", "G", "H", "Z", "0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
//随机的从数组中取出4个元素.
var mess = "";
var index = 0;
for (var i = 0; i < 4; i++) {
//生成随机数.而且是在数组的长度范围内.
//0-9之间的随机数. Math.floor(Math.random()*10)
//0到数组长度(不包含)之间的浮点数.,向下取整,
var index = Math.floor(Math.random() * datas.length);
mess += datas[index];
};
//
var codeSpan = window.document.getElementById("codeSpan");
codeSpan.style.color = "red";
codeSpan.style.fontSize = "20px";
codeSpan.style.background = "gray";
codeSpan.style.fontWeight = "900";
codeSpan.style.fontStyle = "italic";
codeSpan.style.textDecoration = "line-through";
codeSpan.innerHTML = mess;
codeSpan.value = mess;
}
createCode();
script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascripttitle>
head>
<body>
<span id="codeSpan">span><a href="#" onclick="createCode()">看不清楚a>
body>
html>
正则表达式
位置：
^ 开头
$ 结尾
次数：
* 0或多个
+ 1或多个
? 0或1个
{n} 就是n个
{n,} 至少n个
{n,m} 最少n个，最多m个
通配符：
\d 任意数字
\D 任意非数字
\s 任意空白
\S 任意非空白
. 任意字符（除'\n'外）
组合：
[a-z]
[0-9]
等
组：
(正则) 匹配括号中正则表达式对应的结果，并暂存这个结果。
(?:正则) 匹配括号中正则表达式对应的结果，但不暂存这个结果。
\数字 使用第n个组匹配的结果
使用正则的工具（RegExp类与相关方法）
创建：
// 方式一
var regex = new RegExp("正则表达式", "标志");
// 方式二
var regex = /正则表达式/标志
参数说明：
正则表达式：
参见上面的规则
标志：
g （全文查找出现的所有 pattern）
i （忽略大小写）
m （多行查找）
方法：
Regexp.test( str )
String.replace( regex, str )
案例：校验表单
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
//用户名的规则： 第一位是字母，只有由数字与字母 组成，6位。
function checkName(){
//获取到了用户名的值
var userName = document.getElementById("username").value;
var userSpan = document.getElementById("userId");
var reg = /^[a-z][a-z0-9]{5}$/i;
if(reg.test(userName)){
//符合规则
userSpan.innerHTML="正确".fontcolor("green");
return true;
}else{
//不符合规则
userSpan.innerHTML="错误".fontcolor("red");
return false;
}
}
//校验密码 6位
function checkPass(){
var password = document.getElementById("pwd").value;
if(password.length>0){
var reg = /^\w{6}$/;
var passSPan = document.getElementById("passId");
if(reg.test(password)){
//符合规则
passSPan.innerHTML="正确".fontcolor("green");
return true;
}else{
//不符合规则
passSPan.innerHTML="错误".fontcolor("red");
return false;
}
}
}
//检验密码是否正确
function ensurepass(){
var password1 = document.getElementById("pwd").value; //第一次 输入的密码
var password2 = document.getElementById("ensurepwd").value;
if(password2.length>0){
var enSpan = document.getElementById("ensure");
if(password1.valueOf()==password2.valueOf()){
enSpan.innerHTML="正确".fontcolor("green");
return true;
}else{
enSpan.innerHTML="错误".fontcolor("red");
return false;
}
}
}
//校验邮箱
function checkEmail(){
var email = document.getElementById("email").value;
var reg = /^[a-z0-9]\w+@[a-z0-9]{2,3}(\.[a-z]{2,3}){1,2}$/i; // .com .com.cn
var emailspan = document.getElementById("emailspan");
alert(reg.test(email));
if(reg.test(email)){
//符合规则
emailspan.innerHTML="正确".fontcolor("green");
return true;
}else{
//不符合规则
emailspan.innerHTML="错误".fontcolor("red");
return false;
}
}
//校验兴趣爱好： 至少要算中其中 的 一个。
function checkHoby(){
var likes = document.getElementsByName("like");
var hobySpan =document.getElementById("hobbySpan")
var flag = false;
for(var i = 0 ; iif (likes[i].checked){
flag =true;
break;
}
}
if(flag){
//符合规则
hobySpan.innerHTML="正确".fontcolor("green");
return true;
}else{
//不符合规则
hobySpan.innerHTML="错误".fontcolor("red");
return false;
}
}
//总体校验表单是否可以提交了 如果返回的true表单才可以提交。 上面的表单项必须要每个都填写正确。
function checkForm(){
var userName = checkName();
var pass = checkPass();
var ensure = ensurepass();
var email = checkEmail();
var hoby = checkHoby();
if(userName&&pass&&ensure&&email&&hoby){
return true;
}else{
return false;
}
}
script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>正则表达式title>
head>
<body>
<form action="success.html" method="get" onsubmit="return checkForm()">
<table border="1px" width="50%" align="center" cellspacing="0px" cellpadding="3px">
<tr>
<td width="25%">姓名:td>
<td>
<input type="text" name="username" id="username" onblur="checkName()"/>
<span id="userId">span>
td>
tr>
<tr>
<td >密码:td><td>
<input type="password" name="pwd" id="pwd" onblur="checkPass()"/>
<span id="passId">span>
td>
tr>
<tr>
<td>确认密码:td><td>
<input type="password" name="ensurepwd" id="ensurepwd" onblur="ensurepass()" /> <span id="ensure">span>
td>
tr>
<tr>
<td>邮箱td><td>
<input type="text" name="email" id="email" onblur="checkEmail()"/>
<span id="emailspan">span>
td>
tr>
<tr>
<td>性别td><td>
<input type="radio" checked="ture" name="gender" id="male" value="male"/>
男
<input type="radio" name="gender" value="female"/>
女td>
tr>
<tr>
<td>爱好:td><td>
<input type="checkbox" checked="checked" name="like" />
eat
<input type="checkbox" name="like" />
sleep
<input type="checkbox" name="like"/>
play
<span id="hobbySpan">span>
td>
tr>
<tr>
<td>城市td><td>
<select name="city" id="city">
<option value=""> 请选择option>
<option value="bj"> 北京 option>
<option value="gz"> 广州 option>
<option value="sh"> 上海 option>
select>
td>
tr>
<tr>
<td>自我介绍td><td> <textarea cols="15" rows="5" name="myInfo" id="myInfo">textarea>td>
tr>
<tr align="center">
<td colspan="2">
<input type="submit"/>
td>
tr>
table>
form>
body>
html>