JavaWeb基础——DOM
DOM:Document Object Model(文档对象模型)
用来将标记性文档封装成对象，并将标记性文档中的所有内容（标签、文本、属性等）都封装成对象、
封装成对象的目的是为了更方便的操作这些文档以及文档中的所有内容
因为对象的出现就可以有属性和行为被调用
文档对象模型
文档：标记型文档
对象：封装了属性和行为的实例，可以直接被调用
模型：所有标记性文档都具备一些共性特征的一个体现
标记型文档（标签、属性、标签中封装的数据）
只要是标记型文档，DOM这种技术都可以对其进行操作
常见的标记型文档：html xml
DOM这种技术是如何对标记型文档操作的呢？
要操作标记型文档操作必须对其进行解析。
DOM技术的解析方式：将标记型文档文档解析成一颗DOM树，并将树种的内容都封装成节点对象
注意：这个DOM解析方式的好处就是可以对树中的节点进行任意操作，比如：增删改查
弊端：这种解析需要将整个文档加载进内存，意味着如果标记型文档操作的体积很大，较为浪费内存空间
简介另一种解析方式：SAX：是由一些组织定义的一种民间常用的解析方式，并不是w3c标准，而DOM是
w3c的标准。
SAX解析方式：基于事件驱动的解析，获取数据的速度很快，但是不能对标记进行增删改查
DOM模型有三种：
DOM1：将html文档封装成对象
DOM2：在DOM1基础上加入了新功能，比如解析名称空间
DOM3:将xml文档封装成了对象
DHTML：动态的HTML,不是一门语言，是多项技术综合体的简称
其中包含了HTML、CSS、DOM、Javascript
这四个技术在动态html页面效果定义时，都处于什么样的角色呢？负责什么样的职责呢？
HTML:负责提供标签，对数据进行封装，目的是便于对改标签中的数据进行操作
简单说：用标签封装数据
CSS:负责提供样式属性，对标签中的数据进行样式的定义
简单说：对数据进行样式定义
DOM:负责将标签型文档及文档中的内容进行解析，并封装成对象，在对象中定义了更多的属性和行为，便于对对象操作
简单说：将文档和标签以及其他内容变成对象
JS:负责提供程序设计语言，对页面中的对象进行逻辑操作
简单说：负责页面的行为定义，就是页面的动态效果
所以javascript是动态效果的主力编程言
1、获取节点
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
head>
<body>
<script type="text/javascript">
function getNodeDemo(){
/*
需求：获取页面的节点
思路：通过document对象完成，因为div节点有id属性，所以可以通过id属性来完成获取
*/
var divNode=document.getElementById("divid");
//节点都有三个必备的属性：节点名称、节点类型、节点值
alert(divNode.nodeName+":"+divNode.nodeType+":"+divNode.nodeValue);
/*
常见节点有三种：
1、标签型节点：类型1
2、属性节点：类型2
3、文本节点：类型3
标签型节点是没有值的，属性和文本节点是可以有值的
*/
//获取div节点中的文本
var text=divNode.innerHTML;
alert(text);
//改变div中的文本
divNode.innerHTML="哈哈，文本被窝改了"
}
//获取文本框节点演示getElementByname
function getNodeDemo2(){
var node=document.getElementsByName("user");
//alert(node.length);
alert(node[0].value);
/*上面的可以写成下面的样子
var userNode=document.getElementsByName("user");
alert(userNode.value);
*/
}
//获取超链接节点对象，演示getElementsByTagName方法
function getNodeDemo3(){
//直接用标签名获取
var nodes=document.getElementsByTagName("a");
alert(nodes[0].innerHTML);
}
/*
对于页面中的超链接，新闻链接通过新窗口打开，门户网站链接在当前页面打开
当然是要获取其中被操作的超链接对象
可是通过document获取超链接，拿到的是页面中所有的超链接节点
只想获取一部分该如何办呢？
只要获取到被操作的超链接所属的节点即可
再通过这个即诶点获取到它里面所有的超链接节点
*/
function getNodeDemo4(){
//获取超链接所属的div节点
var divNode=document.getElementById("newslink");
//通过div对象方法的查找发现它也具备getElementsByTagName方法
//记住：所有容器型标签都具备这个方法，在改标签范围内获取指定名称的标签
var aNodes=divNode.getElementsByTagName("a");
for(var x=0;x"_blank" ;
}
}
script>
<input type="button" value="演示document对象获取节点" onclick="getNodeDemo4()"/>
<div id="divid">这是一个div区域div>
<input type="text" name="user"/>
<a href="http://www.sina.com.cn">新浪网站1a>
<a href="http://www.sina.com.cn">新浪网站2a>
<div id="newslink">
<a href="http://www.163.com.cn">新闻链接1a>
<a href="http://www.163.com.cn">新闻链接2a>
<a href="http://www.163.com.cn">新闻链接3a>
div>
body>
html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
head>
<body>
<script type="text/javascript">
function getNodeByLevel(){
//获取页面中的表格节点
var tabNode=document.getElementById("tabid");
//获取父节点 parentNode
// var node=tabNode.parentNode;
// alert(node.nodeName);//body
//获取子节点 childNodes
var node=tabNode.childNodes;
alert(node.nodeName);//tbody
/*获取tr标签
var node=tabNode.childNodes;
alert(node[0].childNodes[0].nodeName);//tr
*/
}
script>
<input type="button" value="通过节点层次关系获取节点" onclick="getNodeByLevel()"/>
<div>div 区域div>
<table id="tabid">
<tr>
<td>单元格一td>
<td>单元格二td>
tr>
table>
<dl>
<dt>上层项目dt>
<dt>下层项目dt>
dl>
<a href=''>一个超链接a>
body>
html>2、操作节点
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<style type="text/css">
div{
border:#00ccff 1px solid;
width:200px;
paddding:30px;
margin:10px
}
#div_1{
background-color:#00ccff;
}
#div_2{
background-color:#ffccff;
}
#div_3{
background-color:#cc00ff;
}
#div_4{
background-color:#00ff00;
}
style>
head>
<body>
<script type="text/javascript">
//创建并添加节点
//需求：在div_1节点中添加一个文本节点
function crtAndAdd(){
/*
1、创建一个文本节点
2、获取div_1节点
3、将文本节点添加到div_1节点中
*/
//1、创建节点，使用document中的createTextNode方法
var oTextNode=document.createTextNode("这是一个新的文本");
//2、获取div_1节点
var oDivNode=document.getElementById("div_1");
//3、将文本节点添加到div_1节点中
oDivNode.appendChild(oTextNode);
}
//需求：在div_1中创建并添加一个按钮节点
function crtAndAdd2(){
//1、创建一个按钮节点
var oButNode=document.createElement("input");
oButNode.type="button";
oButNode.value="一个新按钮";
//2、获取div_1节点
var oDivNode=document.getElementById("div_1");
//3、将按钮节点添加到div_1节点中
oDivNode.appendChild(oButNode);
}
//通过另一种方式完成添加节点
function crtAndAdd3(){
/*
其实是使用了容器型标签中的一个属性，innerHTML
这个属性可以设置html文本
*/
//1、获取div_1节点
var oDivNode=document.getElementById("div_1");
//oDivNode.innerHTML="hahaha";
oDivNode.innerHTML="";
}
// ==========================
//需求：将div_2节点删除
function delNode(){
//1、获取div_2节点
var oDivNode=document.getElementById("div_2");
//2、使用div节点的removeNode方法删除
// oDivNode.removeNode(true);//较少用
//一般使用removeChild方法，删除子节点
//获取div_2的父节点，然后再用父节点的removeChild将div_2删除
oDivNode.parentNode.removeChild(oDivNode);
}
//需求：用div_3节点替换div_1节点
function updateNode(){
/*
获取div_3和div_1
使用replaceNode进行替换
*/
var oDivNode_1=document.getElementById("div_1");
var oDivNode_3=document.getElementById("div_3");
//oDivNode_1.replaceNode(oDivNode_3);
//建议使用replaceChild方法
oDivNode_1.parentNode.replaceChild(oDivNode_3,oDivNode_1);
}
//需求：希望用div_3替换div_1,并保留div_3节点，其实就是对div_3进行克隆
function cloneDemo(){
var oDivNode_1=document.getElementById("div_1");
var oDivNode_3=document.getElementById("div_3");
var oCopyDiv_3=oDivNode_3.cloneNode(true);
oDivNode_1.parentNode.replaceChild(oCopyDiv_3,oDivNode_1);
}
script>
<input type="button" value="创建并添加节点" onclick="crtAndAdd3()"/>
<input type="button" value="删除节点" onclick="delNode()"/>
<input type="button" value="修改节点" onclick="updateNode()"/>
<input type="button" value="克隆节点" onclick="cloneDemo()"/>
<div id="div_1">
div>
<div id="div_2">
好好学习，day day up!
div>
<div id="div_3">
div区域演示文字
div>
<div id="div_4">
节点的增删改查
div>
body>
html>3、事件处理
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
head>
<body>
<script type="text/javascript" src="out.js">script>
<script type="text/javascript">
//定义一个函数
function windowObjectDemo(){
//想要知道这个浏览器的信息，就需要使用window对象中navigator
var name=window.navigator.appName;
var version=window.navigator.appVersion;
println(name+":"+version)
}
//演示location
function windowObjectDemo2(){
// var pro=location.protocol;
// var text=location.href;
// alert(text);
// 给location的href属性设置一个值，改变了地址栏的值，并对其值进行了解析，如果是http还进行连接访问
location.href="http://www.sina.com.cn"
}
script>
<input type="button" value="演示window中的对象" onclick="windowObjectDemo2()">
body>
html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
head>
<body>
<script type="text/javascript">
/*
οnunlοad=function(){
alert("onunload run");
}
οnlοad=function(){
alert("onload run");
}
οnbefοreunlοad=function(){
alert("onbeforeunload run");
}
*/
οnlοad=function(){
window.status="啊！加载完毕了";
}//状态信息
script>
body>
html>ad.html
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
head>
<body>
<h1>特价大优惠！h1>
<h2>什么东西便宜呢!h2>
<h1>你猜！h1>
<script type="text/javascript">
setTimeout("close()",3000);
script>
body>
html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
head>
<body>
<script type="text/javascript" src="out.js">script>
<script type="text/javascript">
var timeid;
function widowMethodDemo(){
// var b=confirm("你真的确定要点击吗？");
// alert("b="+b);
setTimeout("alert('time out run')",4000);
timeid=setInterval("alert('interval run')",3000);
}
function stopTime(){
clearInterval(timeid);
}
/* function windowMove(){
for(var x=0;x<700;x++)
moveBy(20,0);
moveBy(0,20);
moveBy(-20,0);
moveBy(0,-20);
} */
//广告
function windowOpen(){
open("ad.html","_blank","height=200,width=400,status=no,toolbar=no,menubar=no,location=no");
}
script>
<input type="button" value="演示window对象的方法" onclick="windowOpen()"/>
<input type="button" value="停止" onclick="stopTime()"/>
body>
html>4、新闻字体
<html>
<head>
<meta charset="UTF-8">
<title>新闻字体title>
<style type="text/css">
/*超链接访问前，访问后样式一致*/
a:link,a:visited{
color:#0044ff;
}
a:hover{
color:#ffff00;
}
#newstext{
width:500px;
border:#00ff00 1px solid;
padding:10px;
}
/*预定义一些样式封装到选择器，一般使用类选择器 */
.norm{
color:#000000;
font-size:16px;
background-color:#cdd8d0;
}
.max{
color:#808080;
font-size:28px;
background-color:#9ce9b4;
}
.min{
color:#ff0000;
font-size:12px;
background-color:#f1b96d;
}
style>
head>
<body>
<script type="text/javascript">
function changeFont(size){
/*
既然要对div newstext中的文本字体进行操作
必须要先获取div节点对象
*/
var oNewsText=document.getElementById("newstext");
//获取oNewsText节点的style样式属性对象
oNewsText.style.fontSize=size+"px";
oNewsText.style.color=clr;
}
/*
如果根据用户点击所需要的效果不唯一
仅通过传递多个参数虽然可以实现效果，但是
1、传参过多，阅读性差
2、js代码和css代码耦合性高
3、不利于扩展
解决：
将多个所需的样式进行封装
封装到选择器中，只要给指定的标签加载不同的选择器就可以了
*/
function changeFont(selectorName){
var oNewsText=document.getElementById("newstext");
oNewsText.className=selectorName;
}
script>
<h1>这是一个新闻标题h1>
<hr/>
<a href="javascript:void(0)" onclick="changeFont('max')">大字体a>
<a href="javascript:void(0)" onclick="changeFont('norm')">中字体a>
<a href="javascript:void(0)" onclick="changeFont('min')">小字体a>
<div id="newstext" class="norm">
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容这是新闻内容
div>
body>
html>5、展开闭合列表
<html>
<head>
<meta charset="UTF-8">
<title>展开闭合列表title>
<style type="text/css">
dl dd{
margin:0px;
}
dl{
height:18px;
overflow:hidden;
}
/*
预定义一些样式，类选择器，便于给标签进行样式的动态加载
*/
.open{
overflow:visible;
}
.close{
overflow:hidden;
}
style>
head>
<body>
<script type="text/javascript">
var flag=true;
//列表展开闭合效果
function list2(){
/*
思路：
1、无非就是将dl属性的overflow的值改成visible即可
2、要先获取dl节点
3、改变该节点的style.overflow属性
*/
//1、获取dl节点
var oDlNode=document.getElementsByTagName("dl")[0];
//oDlNode.style.overflow="visible";
if(flag){
oDlNode.style.overflow="visible";
flag=false;
}else{
oDlNode.style.overflow="hidden";
flag=true;
}
}
//重新定义list,降低js和css的耦合性
function list(node){
/*
//1、获取dl节点
var oDlNode=document.getElementsByTagName("dl")[0];
//2、设置dl的className属性值
//oDlNode.className="open";
if(oDlNode.className=="close"){
oDlNode.className="open";
}else{
oDlNode.className="close";
}
*/
var oDlNode=node.parentNode;
if(oDlNode.className=="close"){
oDlNode.className="open";
}else{
oDlNode.className="close";
}
}
/*
在多个列表下，一次只需要展开一个列表其他列表都关闭
怎么保证开一个，而关闭其他呢？
思路：
1、获取所有的dl节点
2、遍历这些节点，只对当前的dl进行展开或者关闭操作，其他节点都进行闭合操作
*/
function list(node){
//获取对当前的dl节点
var oDlNode=node.parentNode;
//获取所有的dl节点
var collDlNodes=document.getElementsByTagName("dl");
//遍历所有的dl
for(var x=0;xif (collDlNodes[x]==oDlNode){
if(oDlNode.className=="close"){
oDlNode.className="open";
}else{
oDlNode.className="close";
}
}else{
collDlNodes[x].className="close";
}
}
}
script>
<dl class="close">
<dt onclick="list(this)">显示条目一dt>
<dd>展开列表内容dd>
<dd>展开列表内容dd>
<dd>展开列表内容dd>
<dd>展开列表内容dd>
dl>
<dl class="close">
<dt onclick="list(this)">显示条目一dt>
<dd>展开列表内容dd>
<dd>展开列表内容dd>
<dd>展开列表内容dd>
<dd>展开列表内容dd>
dl>
<dl class="close">
<dt onclick="list(this)">显示条目一dt>
<dd>展开列表内容dd>
<dd>展开列表内容dd>
<dd>展开列表内容dd>
<dd>展开列表内容dd>
dl>
body>
html>
<html>
<head>
<meta charset="UTF-8">
<title>好友菜单title>
<style type="text/css">
/*对表格中的ul进行样式定义
1、去除无序列表的样式
2、将列表的外边距取消
*/
table ul{
list-style:none;
margin:0px;
}
/*
对表格框线进行定义以及单元格的框线进行定义
*/
table{
border:#8080ff 1px solid;
width:125px;
}
table td{
border:#8080ff 1px solid;
}
style>
head>
<body>
<table>
<tr>
<td>
<a href="">好友菜单a>
<ul>
<li>一个好友li>
<li>一个好友li>
<li>一个好友li>
<li>一个好友li>
ul>
td>
tr>
<tr>
<td>
<a href="">好友菜单a>
<ul>
<li>一个好友li>
<li>一个好友li>
<li>一个好友li>
<li>一个好友li>
ul>
td>
tr>
<tr>
<td>
<a href="">好友菜单a>
<ul>
<li>一个好友li>
<li>一个好友li>
<li>一个好友li>
<li>一个好友li>
ul>
td>
tr>
table>
body>
html>6、radio
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<style type="text/css">
#contenid{
display:none;/*隐藏*/
}
#no1ul{
list-style:none;
margin:0px;
}
.close{
display:none;
}
.open{
display:block;
}
style>
<script type="text/javascript">
function showResult(){
//1、判断是否有答案被选中
//获取所有no1的radio,并遍历判断checked状态
var oNo1Nodes=document.getElementsByName("no1");
var flag=false;
var val;
for(var x=0;xif (oNo1Nodes[x].checked){
flag=true;
val=oNo1Nodes[x].value;
break;
}
}
if(!flag){
document.getElementById("errinfo").innerHTML="没有任何答案被选中".fontcolor("red");
return;
}
if(val>=1&&val<=3){
document.getElementById("res_1").className="open";
document.getElementById("res_2").className="close";
}
else{
document.getElementById("res_1").className="close";
document.getElementById("res_2").className="open";
}
}
script>
head>
<body>
<h2>欢迎您参与性格测试：h2>
<div>
<h3>第一题：h3>
<span>您喜欢的水果是什么？span>
<ul id="no1ul">
<li><input type="radio" name="no1" value="1"/>葡萄li>
<li><input type="radio" name="no1" value="2"/>西瓜li>
<li><input type="radio" name="no1" value="3"/>苹果li>
<li><input type="radio" name="no1" value="4"/>芒果li>
<li><input type="radio" name="no1" value="5"/>樱桃li>
ul>
div>
<div>
<input type="button" value="查看测试结果：" onclick="showResult()"/>
<span id="errinfo">span>
<div id="res_1" class="close">1-3分:你的性格内向并扭曲，建议...div>
<div id="res_2" class="close">4分以上：你的性格外向并分裂，建议...div>
div>
<hr/>
<script type="text/javascript">
function showContent(node){
var oDivNode=document.getElementById("contentid");
with(oDivNode.style){
if(node.value=="yes"){
display="block";
}else{
display="none";
}
}
}
script>
<div>
您要参与问卷调查吗：
<input type="radio" name="wenjuan" value="yes" onclick="showContent(this)"/>是
<input type="radio" name="wenjuan" value="no" checked="checked" onclick="showContent(this)"/>否
div>
<div id=contentid>
问卷调查内容：<br>
您的姓名:<input type="text"/><br>
您的邮箱:<input type="text"/>
div>
body>
html>7、Select
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<style tyle="text/css">
.clrclass{
height:50px;
width:50px;
float:left;
margin-right:30px;
}
#text{
clear:left;
margin-top:20px;
}
style>
head>
<body>
<script type="text/javascript">
function changeColor(node){
var colorVal=node.style.backgroundColor;
document.getElementById("text").style.color=colorVal
}
script>
<div class="clrclass" id="clr1" style="background-color:red" onclick="changeColor(this)">div>
<div class="clrclass" id="clr2" style="background-color:green" onclick="changeColor(this)">div>
<div class="clrclass" id="clr3" style="background-color:blue" onclick="changeColor(this)">div>
<div id="text">
需要显示效果的文字<br/>
需要显示效果的文字<br/>
需要显示效果的文字<br/>
需要显示效果的文字<br/>
div>
<hr/>
<script type="text/javascript">
function changeColor2(){
var oSelectNode=document.getElementsByName("selectColor")[0];
//获取所有的option
/* with(oSelectNode){
var collOptionNodes=options;
alert(options[selectedIndex].innerHTML);
} */
var colorVal=oSelectNode.options[oSelectNode.selectedIndex].value;
document.getElementById("text").style.color=colorVal;
/* var collOptionNodes=oSelectNode.options;
for(var x=0;x
}
script>
<select name="selectColor" onchange="changeColor2()">
<option value="black">---选择颜色---option>
<option value="red">红色option>
<option value="green">绿色option>
<option value="blue">蓝色option>
select>
<select name="selectColor2" onchange="changeColor3()">
<option style="background-color:black" value="black">---选择颜色---option>
<option style="background-color:red" value="red">红色option>
<option style="background-color:green" value="green">绿色option>
<option style="background-color:blue" value="blue">蓝色option>
select>
body>
html>关联选择器
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<style type="text/css">
select{
width:100px;
}
style>
head>
<body>
<script type="text/javascript">
function selectCity(){
var collCities=[['选择城市'],['海淀区','朝阳区','东城区','西城区']
,['济南','青岛','烟台','威海']
,['沈阳','大连','鞍山','抚顺']
,['石家庄','保定','邯郸','廊坊']];
// var arr={"beijing":['海淀区','朝阳区','东城区','西城区']};
//获取两个下拉菜单对象
var oSelNode=document.getElementById("selid");
var oSubSelNode=document.getElementById("subselid");
//获取到底选择哪个省
var index=oSelNode.selectedIndex;
//通过角标到容器去获取对应的城市数组
var arrCities=collCities[index];
//将子菜单中的内容清空一下
/* for(var x=0;x
//清除动作
oSubSelNode.length=0;
//遍历这个数组，并将这个数组的元素封装成option对象，添加到子菜单中
for(var x=0;xvar oOptNode=document.createElement("option");
oOptNode.innerHTML=arrCities[x];
oSubSelNode.appendChild(oOptNode);
}
}
script>
<select id="selid" onchange="selectCity()">
<option>选择省市option>
<option value="beijing">北京option>
<option>山东option>
<option>辽宁option>
<option>河北option>
select>
<select id="subselid">
<option>选择城市option>
select>
body>
html>8、表单校验
<html>
<head>
<meta charset="UTF-8">
<title>表单校验title>
head>
<body>
<script type="text/javascript">
/*
//校验用户名
function checkUser(){
var flag;
var oUserNode=document.getElementsByName("user")[0];
var name=oUserNode.value;
//定义正则表达式
var reg=new RegExp("^[a-z]{4}$","i");//限制头和尾是连续的四个字母，i是忽略大小写的标记
//reg=/^[0-9]{4}$/;//必须是连续的四个数字
var oSpanNode=document.getElementById("userspan");
//if(name=="abc"){
if(reg.test(name)){
oSpanNode.innerHTML="用户名正确".fontcolor("green");
flag=true;
}else{
oSpanNode.innerHTML="用户名错误".fontcolor("red");
flag=false;
}
return flag;
}
*/
/*
发现很多框的校验除了几个内容不同外，校验的过程是一样的
所以进行代码的提取
*/
function check(name,reg,spanId,okinfo,errinfo){
var flag;
var val=document.getElementsByName(name)[0].value;
var oSpanNode=document.getElementById(spanId);
if(reg.test(val)){
oSpanNode.innerHTML=okinfo.fontcolor("green");
flag=true;
}else{
oSpanNode.innerHTML=errinfo.fontcolor("red");
flag=false;
}
return flag;
}
//校验用户名
function checkUser(){
var reg=/^[a-z]{4}$/i;
return check("user",reg,"userspan","用户名正确","用户名错误");
}
//校验密码
function checkPsw(){
var reg=/^\d{4}$/;
return check("psw",reg,"pswspan","密码格式正确","密码格式错误");
}
//校验确定密码,只要和密码一致即可
function checkRepsw(){
var flag;
//获取密码框内容
var pass=document.getElementsByName("psw")[0].value;
//获取确认密码框内容
var repass=document.getElementsByName("repsw")[0].value;
//获取确认密码的span区域
var oSpanNode=document.getElementById("repswspan");
if(pass==repass){
oSpanNode.innerHTML="两次密码一致".fontcolor("green");
flag=true;
}else{
oSpanNode.innerHTML="两次密码不一致".fontcolor("red");
flag=false;
}
return flag;
}
//校验邮件
function checkMail(){
var reg=/^\w+@\w+(\.\w+)+$/i;
return check("mail",reg,"mailspan","邮件地址正确","邮件地址错误");
}
//提交事件处理
function checkForm(){
alert(checkUser()+"--"+checkPsw()+"--"+checkRepsw()+"--"+checkMail())
if(checkUser()&&checkPsw()&&checkRepsw()&&checkMail())
return true
else
return false;
}
function mysubmit(){
var oFormNode=document.getElementById("userinfo");
oFormNode.submit();
}
script>
<form onsubmit="return checkForm()" id="userinfo">
用户名称：<input type="text" name="user" onblur="checkUser()"/>
<span id="userspan">span>
<br/>
输入密码：<input type="text" name="psw" onblur="checkPsw()"/>
<span id="pswspan">span>
<br/>
确认密码：<input type="text" name="repsw" onblur="checkRepsw()"/>
<span id="repswspan">span>
<br/>
邮件地址：<input type="text" name="mail" onblur="checkMail()"/>
<span id="mailspan">span>
<br/>
<input type="submit" value="提交数据"/>
<br/>
<input type="button" value="我的提交" onclick="mysubmit()"/>
form>
body>
html>9、单选、全选
table.css
@charset "UTF-8";
table{
border:#249bdb 1px solid;
width:500px;
border-collapse:collapse;
}
table td{
border:#249bdb 1px solid;
padding:5px;
}
table th{
border:#249bdb 1px solid;
padding:5px;
background-color:rgb(200,200,200);
}
<html>
<head>
<meta charset="UTF-8">
<title>Insert title heretitle>
<link rel="stylesheet" type="text/css" href="table.css"/>
<style type="text/css">
.one{
background-color:#9bf7d5;
}
.two{
background-color:#f3e99a;
}
.over{
background-color:#f3e89a;
}
style>
<script type="text/javascript">
//行颜色间隔显示功能
function trColor(){
var name;
//1、获取表格对象
var oTabNode=document.getElementById("mailtable");
//2、获取行对象
var collTrNodes=oTabNode.rows;
//3、对所有需要设置背景的行对象进行遍历
for(var x=1;x1 ;x++){
if(x%2==1){
collTrNodes[x].className="one";
}else{
collTrNodes[x].className="two";
}
collTrNodes[x].οnmοuseοver=function(){
name=this.className;
this.className="over";
}
collTrNodes[x].οnmοuseοut=function(){
this.className=name;
}
}
}
οnlοad=function(){
trColor();
}
//复选框的全选动作
function checkAll(node){
//获取所有的 mail复选框
var collMailNodes=document.getElementsByName("mail");
for(var x=0;x/* //删除所选邮件
function deleteMail(){
if(!confirm("你真的要删除所选的邮件吗？")){
return;
}
//获取所有的mail节点
var collMailNodes=document.getElementsByName("mail");
for(var x=0;x
}
}
script>
head>
<body>
<table id="mailtable">
<tr>
<th>
<input type="checkbox" name="all" onclick="checkAll(this)" />全选
th>
<th>
发件人
th>
<th>
邮件名称
th>
<th>
邮件附属信息
th>
tr>
<tr>
<td>
<input type="checkbox" name="mail" />
td>
<td>
张三
td>
<td>
我是邮件1
td>
<td>
我是附属信息1
td>
tr>
table>
body>
html> 10、添加删除附件
<html>
<head>
<meta charset="UTF-8">
<title>删除附件title>
<style type="text/css">
table a:link,table a:visited{
color:#179ed9;
text-decoration:none;
}
table a:hover{
color:#f36021;
}
style>
<script type="text/javascript">
function addFile(){
/*
因为文件选取框定义在行对象中
所以只要给表格创建新的行和单元格即可
*/
var oTabNode=document.getElementById("fileid");
var oTrNode=oTabNode.insertRow();
var oTdNode_file=oTrNode.insertCell();
var oTdNode_del=oTrNode.insertCell();
oTdNode_file.innerHTML=""
oTdNode_del.innerHTML="删除附件"
}
function deleteFile(node){
var oTrNode=node.parentNode.parentNode;
oTrNode.parentNode.removeChild(oTrNode);
}
script>
head>
<body>
<table id="fileid">
<tr>
<td><a href="javascript:void(0)" onclick="addFile()">添加附件a><td>
tr>
table>
body>
html>