重点DOM实例

来源：互联网发布：java 执行main 编辑：程序博客网时间：2024/04/29 12:19

级联菜单：

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

<html>

<head>

function selCity()

{

var arr=[[""],["海淀区","朝阳区","东城区","西城区"]

,["武汉","荆州","宜昌","襄樊"]

,["济南","青岛","烟台","威海"]

,["沈阳","大连","鞍山","抚顺"]];

var cityNode=document.getElementById("selid");

var index=cityNode.selectedIndex;

//alert(cityNode.options[index].innerText);

var citys=arr[index];

var selsubNode=document.getElementById("selsubid");

selsubNode.options.length=0;

for(var x=0;x<citys.length;x++)

{

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

optionNode.innerText=citys[x];

selsubNode.appendChild(optionNode);

}

</script>

</head>

<body>

</select>

</select>

</body>

</html>

添加删除指定附件：

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

<html>

<head>

table td a:link,table td a:visited

{

text-decoration:none;

color:#00CCFF;

}

table,table td

{

border:#0099CC 1px solid;

}

</style>

var count=1;

function addFile()

{

var tabNode=document.getElementsByTagName("table")[0];

var trNode=tabNode.insertRow();

trNode.id="tr_"+count;

var tdNode_file=trNode.insertCell();

var tdNode_del=trNode.insertCell();

tdNode_file.innerHTML="<input type='file'/>";

tdNode_del.innerHTML="<a href='javascript:void(0)' onclick='delfile("+count+")'>删除附件</a>"

count++;

}

function delfile(num)

{

var trNode=document.getElementById("tr_"+num);

trNode.parentNode.removeChild(trNode);

}

</script>

</head>

<body>

<table>

<tr>

<td>

</td>

</tr>

</table>

</body>

</html>

模拟邮件全选、反选、取消全选、删除所选、颜色间隔、高亮显示：

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

<html>

<head>

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

table

{

width:70%;

border:#0000CC 1px solid;

}

table th,table td

{

border:#0066CC 1px solid;

}

table th

{

background-color:#33CC00;

}

.one

{

background-color:#FFCC00;

}

.two

{

background-color:#99FF33;

}

.over

{

background-color:#9900FF;

}

</style>

var name;

window.onload=function trColor()

{

var tabNode=document.getElementsByTagName("table")[0];

var trs=tabNode.rows;

for(var x=1;x<trs.length;x++)

{

if(x%2==1)

{

trs[x].className="one";

}

else

trs[x].className="two";

trs[x].onmouseover=function()

{

name=this.className;

this.className="over";

}

trs[x].onmouseout=function()

{

this.className=name;

}

function checkAll(index)

{

var allNode=document.getElementsByName("all")[index];

var mails=document.getElementsByName("mail");

for(var x=0;x<mails.length;x++)

{

mails[x].checked=allNode.checked;

}

//完成按钮的全选、反选、取消全选的功能

function checkButton(num)

{

var mails=document.getElementsByName("mail");

for(var x=0;x<mails.length;x++)

{

if(num>1)

mails[x].checked=!mails[x].checked;

else

mails[x].checked=num;//利用javascript特性，0、null为假，非0、非null为真

}

//完成删除邮件的功能

var arr=new Array();

var pos=0;//定义指针，记录位置

function delMail()

{

var mails=document.getElementsByName("mail");

for(var x=0;x<mails.length;x++)

{

if(mails[x].checked)

arr[pos++]=mails[x];

}

for(var x=0;x<arr.length;x++)

{

var trNode=arr[x].parentNode.parentNode;

trNode.parentNode.removeChild(trNode);

}

trColor();

}

</script>

</head>

<body>

<table>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</th>

</tr>

</table>

</body>

</html>

表单校验：

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

<html>

<head>

form

{

background-color:#66CCFF;

border:#0033CC 1px solid;

width:350px;

}

</style>

function checkUser(userNode)

{

var user=userNode.value;

var userSpanNode=document.getElementById("userid");

var userReg=/^[a-z]{5}$/i;//只能是五位的字母，不区分大小写

if(user.match(userReg))

userSpanNode.innerHTML="用户名正确".fontcolor("green");

else

userSpanNode.innerHTML="用户名错误".fontcolor("red");

}

var password;

function checkPassword(passwordNode)

{

password=passwordNode.value;

var passwordSpanNode=document.getElementById("pswid");

var passwordReg=/^\w{5,15}$/;//密码能是5-15位的数字或者字母

if(password.match(passwordReg))

passwordSpanNode.innerHTML="密码正确".fontcolor("green");

else

passwordSpanNode.innerHTML="密码错误".fontcolor("red");

}

function checkRepsw(repasswordNode)

{

var repassword=repasswordNode.value;

var repasswordNode=document.getElementById("repswid");

if(repassword==password)

repasswordNode.innerHTML="输入正确".fontcolor("green");

else

repasswordNode.innerHTML="输入错误".fontcolor("red");

}

function checkMail(mailNode)

{

var mail=mailNode.value;

var mailSpanNode=document.getElementById("mailid");

var mailReg=/^\w+@\w+(\.\w+)+$/;

if(mail.match(mailReg))

mailSpanNode.innerHTML="邮箱格式正确".fontcolor("green");

else

mailSpanNode.innerHTML="邮箱格式错误".fontcolor("red");

}

</script>

</head>

<body>

<form>

用户名称：<input type="text"name="user" onBlur="checkUser(this)"/>

输入密码：<input type="text"name="psw" onBlur="checkPassword(this)"/>

<br/>

确认密码：<input type="text"name="repsw" onBlur="checkRepsw(this)"/>

邮件地址：<input type="text"name="mail" onBlur="checkMail(this)"/>

<br/>

</form>

</body>

</html>