DOM DHTML 入门
一、概念:
DOM:Document Object Model(文档对象模型)： 用来将标记型文档封装成对象，并将标记型文档中的所有的内容(标签，文本，属性等)都封装成对象。
1.1 封装成对象的目的是为了更为方便的操作这些文档以及文档中的所有内容。因为对象的出现就可以有属性和行为被调用。
1.2 文档对象模型组成
文档：标记型文档。
对象：封装了属性和行为的实例，可以被直接调用。
模型：所有标记型文档都具备一些共性特征的一个体现。标记型文档(有标签，属性，标签中封装的数据).
只要是标记型文档，DOM这种技术都可以对其进行操作。
1.3常见的标记型文档：html xml。
二、解析标记型文档的方式及特点：
常见的从结构上两种不同的解析方式有：DOM与SAX (当然还有其它的如dom4j jdom等等)
DOM技术的解析方式：将标记型文档解析一棵DOM树，并将树中的内容都封装成节点对象。
注意：这个DOM解析方式的好处：可以对树中的节点进行任意操作，比如：增删改查。
弊端：这种解析需要将整个标记型文档加载进内存。意味着如果标记型文档的体积很大，较为浪费内存空间。
另一种解析方式：SAX：是由一些组织定义的一种民间常用的解析方式，并不是w3c标准，而DOM是W3C的标准。
SAX解析的方式：基于事件驱动的解析。获取数据的速度很快，但是不能对标记进行增删改。
三、DHMTL概念及组成部分
DHTML:动态的HTML。不是一门语言：是多项技术综合体的简称。
其中包含了HTML,CSS,DOM,Javascript。
31. HTML:负责提供标签，对数据进行封装，目的是便于对该标签中的数据进行操作。简单说：用标签封装数据。
3.2 CSS:负责提供样式属性，对标签中的数据进行样式的定义。 简单说：对数据进行样式定义。
3.3 DOM:负责将标签型文档以及文档中的所有内容进行解析，并封装成对象，在对象中定义了更多的属性和行为，便于对对象操作。简单说：将文档和标签以及其他内容变成对象。
3.4 JS:负责提供程序设计语言，对页面中的对象进行逻辑操作。简单说：负责页面的行为定义。就是页面的动态效果。
当然目前流行的AJAX 就是 DHTML+XMLhttpRequest
建议下载DHTML手册学习， 下载地址： http://www.verycd.com/files/644cf9d4de63e038843bdaf019a12cf24015578
四、window对象的小简介
属性：有status(获取或设置窗口底部状态兰中的文字) name(获取或设置窗口名称的值)
事件：有onload(文档内容一加载完毕后会执行的 如可以 onload = function(){ .....})
有unload(窗口关闭之前会执行的，当然也可以 onload = function(){.....})
方法：open(打开一个窗口，如open('ad.htm','_blank','height=200,widht=100,status=no,toolbar=no,menubar=no,location=no') 垃圾广告弹窗就是这样来的)
setInterval(每间隔一固定毫秒执行一次如：setInterval( adopen(), 5000) ) ...
对象：document 代表给定浏览器窗口中的 HTML 文档。拿到了document就等于拿到了整个HTML了，然后可以根据document来创建标签如 document.createElement("tr")
也可能获取一标准document.getElementById("tabID"); 拿到这个 oTabNode后可以用appendChild(oTrNode) 方法将上面创建的tr节点，加入表格中了。...
location : 包含关于当前 URL 的信息。
如：
function windowObjDemo2(){
var pro = location.protocol;
var text = location.href;
alert(text);
//给location的href属性设置一个值。 改变了地址栏的值，并对其值进行了解析如果是http，还进行连接访问。
location.href = "http://www.sina.com.cn"; //浏览器将会自动转到新浪中去了呢。
}
五、常见dom的玩法：
1. 邮件中， 添加附件的玩法。 发邮件时，有个添加附件。点一下就新增一行可选择文件上传，还可以删除那行。 下面就模拟下：
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>新增附件玩法</title>
<style type="text/css">
a{
text-decoration:none;
}
#div_add_file{
width:200px;
height:30px;
padding:10px;
}
#div_add_file:active{
background-color:#FF0000;
}
#div_add_file:hover{
background-color:#00FF00;
}
</style>
<script type="text/javascript" >
function addFile(){
//1. 先获取到表格对象节点
var oTabNode = document.getElementById("tab_add_file");
//2. 用document对象，来创建一个tr节点对象
var oTrNode = document.createElement("tr");
//3. 用document对象，来创建两个td节点对象
var oTdNode1 = document.createElement("td");
var oTdNode2 = document.createElement("td");
//4. 分别给两个td节点对象中，插入HTML内容。
oTdNode1.innerHTML="<input type='file' />";
oTdNode2.innerHTML="<a href='javascript:void(0)' onclick='delFile(this)'>删除此附件</a>";
oTabNode.appendChild(oTrNode); // 先将tr节点对象添加进表格，注意多次调用此对象分无限制的添加新行。(因为是创建create出来)
oTrNode.appendChild(oTdNode1); // 再分别将td节点对象添加至相应的tr节点对象中。
oTrNode.appendChild(oTdNode2);
}
/* 删除附件行，其实就是删除表格中当前点击触发的那个行 */
function delFile(node){
var oDelTrNode = node.parentNode.parentNode;
oDelTrNode.parentNode.removeChild(oDelTrNode);
}
</script>
</head>
<body>
<div id="div_add_file"> <!-- onclick事件，单击a标签后，会触发onclick，调用addFile方法 -->
<a href="javascript:void(0)" onclick="addFile()">添加一个附件看看哦。</a>
</div>
<div>
<!-- 定义一个表格，预定义在这，里面的tr与td，由js动态的添加进去。 -->
<table id="tab_add_file">
</table>
</div>
</body>
</html>
2. 动态的在网页中，创建可选择的几行几列表格，并可删除某行或某列的表格。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>创建几行几列表格，并删除某行或某列表格</title>
<style type="text/css">
table,td{
border:#FC3FF8 1px solid;
}
</style>
<script type="text/javascript">
/* 创建一个表格，其实就是分别创建tr节点与td节点，然后分别添加进table节点中。 */
function crtTab(){
var oTabNode = document.getElementById("tab");
var rowNum = document.getElementById("crtrow").value; //获取需要创建多少行，行数由外层循环控制
var colNum = document.getElementById("crtcol").value; //获取需要创建多少列，列数由内层循环控制
for(var i=0;i<rowNum;i++){
var oTrNode = document.createElement("tr");
for(var j=0;j<colNum;j++){
var oTdNode = document.createElement("td");
oTdNode.innerHTML = i+"--"+j;
oTrNode.appendChild(oTdNode);
}
oTabNode.appendChild(oTrNode);
}
var othisBut = document.getElementById("crttab");
othisBut.disabled=true;//将创建表格的按钮置成灰色不可点击了。disabled
}
/**
删除表格中，某行号的行。
*/
function delRow(){
var delRonNum = document.getElementById("delrow").value; //获取要删除的第几行行号
var oTabNode = document.getElementById("tab");
var oTrNodes = oTabNode.rows //注意表格节点有个 集合属性，rows可以直接拿到表格中所有行的集合，很爽的。
if(oTrNodes.length <= delRonNum){
alert("要删除的行不存在，请检查下");
}else{ //删除某个节点，强制建议是先拿到交节点，再用removeChild干掉它，拿到父节点可以通过 节点.parentNode 搞定
oTrNodes[delRonNum].parentNode.removeChild(oTrNodes[delRonNum]);
}
}
/* 删除表格中某一列 */
function delCol(){
var delColNum = document.getElementById("delcol").value;
var oTabNode = document.getElementById("tab");
var oTrNodes = oTabNode.rows
if(delColNum>=0 &&delColNum < oTrNodes[0].cells.length) {
for(var i=0;i<oTrNodes.length;i++){
oTrNodes[i].removeChild(oTrNodes[i].cells[delColNum]); //要将此括在里面呢，若外面输入的delColNum太大会造成数组越界
}
}else
alert("要删除的列不存在，请检查下");
}
/*
onload = function (){
open("mail.html","_blank","width=100,height=300,status=no,toolboor=no,menubar=no,location=n")
}
*/
</script>
</head>
<body>
<input type="text" name="crtrow" id="crtrow" />行 <!-- 用于输入创建多少行表格的 input标签 -->
<input type="text" name="crtcol" id="crtcol" />列
<input type="button" name="crttab" id="crttab" value="创建表格" onclick="crtTab()" /><br />
<hr />
第<input type="text" name="delrow" id="delrow" />行
<input type="button" id="delrowBut" value="删除行" onclick="delRow()" /> <br />
第<input type="text" name="delcol" id="delcol" />列
<input type="button" id="delrowBut" value="删除列" onclick="delCol()" /><br />
<table id="tab" >
</table>
</body>
</html>
3. qq好友似的玩转法，通过点击某一列标题如同学，下面的同学列表关闭或展开，展开同学列时，其它的列朋友等列关闭掉。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
.mate_colse{
border:#8EE6FF 1px solid;
background-color:#FEBB9E;
width:100px;
height:18px;
overflow:hidden; /* 一种解决思路，overflow支持的不太好，但是用ie7搞不起来哦。*/
}
.mate_open{
border:#8EE6FF 1px solid;
background-color:#FEBB9E;
width:100px;
height:18px;
overflow:visible;
}
.new_mate{
border:#8EE6FF 1px solid;
background-color:#FEBB9E;
width:100px;
}
.ul_open{
display:block; /* css中的display可以将某个标签隐藏none或显示block */
}
.ul_close{
display:none;
}
ul li{
list-style:none;
}
ul{
margin:0px;
padding-left:20px;
}
</style>
<script type="text/javascript">
/**
一个方式的实现的方式，通过外层的div即class_mate的height来搞定，指定一个overflow默认是hidden，点中了，visible。可以把高度解决了。
*/
function list(openId){
var oOpenUl = document.getElementById(openId);
var oMateNode = document.getElementById("mate_body");
var oUlNodes = oMateNode.getElementsByTagName("ul");
for(var i=0;i<oUlNodes.length;i++){
if(oUlNodes[i]==oOpenUl){
oUlNodes[i].parentNode.className = "ul_open";
}else{
oUlNodes[i].parentNode.className = "ul_close";
}
}
}
function list2(openId){
var oOpenUl = document.getElementById(openId); //先拿到需要打开的ul
var oMateNode = document.getElementById("mate_body");
var oUlNodes = oMateNode.getElementsByTagName("ul"); //拿到所有的ul，并遍历它。
for(var i=0;i<oUlNodes.length;i++){
if(oUlNodes[i]==oOpenUl){ //若是需要处理变换的ul，要判断它当前是关还是开，关则开，开则关掉。
if(oUlNodes[i].className == "ul_open")
oUlNodes[i].className = "ul_close";
else
oUlNodes[i].className = "ul_open";
}else{ //其它的统一全部关闭掉了。
oUlNodes[i].className = "ul_close";
}
}
}
</script>
</head>
<body>
<div id="mate_body">
<div id="class_mate" class="new_mate">
<div class="mate_title" ><a href="javascript:void(0)" onclick="list2('mate_1')">同学列表</a></div>
<ul id="mate_1" class="ul_close">
<li> 同学一</li>
<li> 同学二</li>
<li> 同学三</li>
</ul>
</div>
<div id="work_mate" class="new_mate">
<div class="mate_title" ><a href="javascript:void(0)" onclick="list2('mate_2')">同事列表</a></div>
<ul id="mate_2" class="ul_close">
<li> 同事一</li>
<li> 同事二</li>
<li> 同事三</li>
</ul>
</div>
<div id="firend_mate" class="new_mate">
<div class="mate_title" > <a href="javascript:void(0)" onclick="list2('mate_3')">朋友列表</a> </div>
<ul id="mate_3" class="ul_close">
<li> 朋友一</li>
<li> 朋友二</li>
<li> 朋友三</li>
</ul>
</ul>
</div>
</div>
</body>
</html>
4. 邮件表格的玩法， 可以给邮件列表中，间隔的进行转换背景颜色呢，对某行邮件选中删除，或全选，反返。 对邮件的某个日期进行排序。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>邮件玩转法</title>
<style type="text/css">
a{
text-decoration:none;
}
table td{
margin:10px;
padding-left:20px;
padding-right:10px;
padding-top:10px;
border:#FF6666 1px solid;
}
th{
border:#FF6666 1px solid;
background-color:#D5D5D5;
}
.td_first{
background-color:#24E9F9;
}
.td_second{
background-color:#F8B443;
}
.td_moOver{
font-size:16px;
background-color:#FC3FF8;
}
</style>
<script type="text/javascript">
function loadTableTRCss(){
var oTabNode = document.getElementById("mailTab");
var oTrNodes = oTabNode.rows;
for(var i=1;i<oTrNodes.length-1;i++){
//alert("323");
if(i%2==0){
oTrNodes[i].className="td_first";
}else{
oTrNodes[i].className="td_second";
}
}
}
/**
鼠标光标移动到当前行，遍历所有行的对象节点，若与当前行的节点是同一对象。则需要加高亮等处理。
否则还应该是原来的加载页面是，隔一行一个普通样式来搞定。
*/
function moOver(node){
var oTabNode = document.getElementById("mailTab");
var oTrNodes = oTabNode.rows;
for(var i=1;i<oTrNodes.length-1;i++){
if(node == oTrNodes[i]){
node.className="td_moOver";
}else{
if(i%2==0){
oTrNodes[i].className="td_first";
}else{
oTrNodes[i].className="td_second";
}
}
}
}
/**
全选或取消全选，通过一个标识位判断是否将所有元素置成checked还是去掉。
*/
function SelAll(bSure){
var oInpNodes = document.getElementsByName("mail");
for(var i=0;i<oInpNodes.length;i++){
if(bSure){
oInpNodes[i].checked = true;
}else{
oInpNodes[i].checked=false;
}
}
}
/**
oppositeSelect是反选，可以遍历获取当前的checked状态，再取反赋值回去就可能 了。
*/
function oppSel(){
var oInpNodes = document.getElementsByName("mail");
for(var i=0;i<oInpNodes.length;i++){
oInpNodes[i].checked = !oInpNodes[i].checked;
}
}
/**
根据全选复选框的状态来改变，所有行的选中与否状态。
*/
function selBoxAll(node){
var oSelBoxAll = document.getElementsByName("selBoxAll");
for(var i=0;i<oSelBoxAll.length;i++){
oSelBoxAll[i].checked = node.checked;
}
var oInpNodes = document.getElementsByName("mail");
for(var i=0;i<oInpNodes.length;i++){
oInpNodes[i].checked = node.checked;
}
}
onload = function(){
loadTableTRCss();
}
/**
按收件日期进行排序，
*/
var asc = true;
function sortMail(){
var oTabNode = document.getElementById("mailTab");
var oTrNodes = oTabNode.rows;
var oTempTrNodes = [];
var oLaxTrNodes = oTrNodes[oTrNodes.length-1];
for(var i=1;i<oTrNodes.length-1;i++){
oTempTrNodes[i-1] = oTrNodes[i];
}
sortTrNodes(oTempTrNodes);
if(asc){
for(var i=0;i<oTempTrNodes.length;i++){
//oTabNode.appendChild(sortTrNodes[i]); 不知道为什么要报类型不匹配错误，郁闷。
oTempTrNodes[i].parentNode.appendChild(oTempTrNodes[i]);
asc = false;
}
}else{
for(var i=oTempTrNodes.length-1;i>=0;i--){
//oTabNode.appendChild(sortTrNodes[i]); 不知道为什么要报类型不匹配错误，郁闷。
oTempTrNodes[i].parentNode.appendChild(oTempTrNodes[i]);
asc = true;
}
}
oLaxTrNodes.parentNode.appendChild(oLaxTrNodes); //这里必须加个这语，因为上面一旦排序，
//特别是appendChild方法是把它节点插入当前表的最后。所以要保证最后的必须是全选等行。
loadTableTRCss(); //排序完后，重新给每行加个新的样式。
}
function sortTrNodes(arrs){
for(var i=0;i<arrs.length-1;i++){
for(var j=i+1;j<arrs.length;j++){
var iInnerNum = parseInt(arrs[i].cells[4].innerHTML);
var jInnerNum = parseInt(arrs[j].cells[4].innerHTML);
if(iInnerNum>jInnerNum)
swap(arrs,i,j);
}
}
}
function swap(arrs,i,j){
var temp = arrs[i];
arrs[i]=arrs[j];
arrs[j] = temp;
}
/*
删除选择中的相应的邮件，就是删除选择中的相应的行，当然真的删除是传给服务器。删除可再查询就OK了。
这里是模拟的删除的效果。
删除的基本思路步骤：应该是通过遍历行，找到哪些选择中的行，然后将可以直接在遍历时或先临时存储再遍历查询它即可。
*/
function delMail(){
var oInpNodes = document.getElementsByName("mail");
for(var i=0;i<oInpNodes.length;i++){
if(oInpNodes[i].checked){
var oTrNoder = oInpNodes[i].parentNode.parentNode;
oTrNoder.parentNode.removeChild(oTrNoder);
i--; //这里必须要i--，应该循环后面有个i++，就可一减一加正好还原还是从i开始（因本身删除后，后面的i+1已经变成i角标了）
}
}
loadTableTRCss();
}
</script>
</head>
<body>
<table id="mailTab">
<tr onmouseover="moOver(this);" onmouseout="loadTableTRCss();">
<th><input type="checkbox" name="selBoxAll" onclick="selBoxAll(this)"/>全选</th> <th>发件人</th> <th>邮件名称</th> <th>邮件附属名称</th>
<th><a href="javascript:void(0)" onclick="sortMail()">收件日期(可排序)</a></th>
</tr>
<tr onmouseover="moOver(this);" onmouseout="loadTableTRCss();">
<td><input type="checkbox" value="1" name="mail"/></td><td>李四11</td><td>李四主题11</td><td>李四的附属信息</td><td>31</td>
</tr>
<tr onmouseover="moOver(this);" onmouseout="loadTableTRCss();">
<td><input type="checkbox" value="1" name="mail"/></td><td>李四12</td><td>李四主题12</td><td>李四的附属信息</td><td>23</td>
</tr>
<tr onmouseover="moOver(this);" onmouseout="loadTableTRCss();">
<td><input type="checkbox" value="1" name="mail"/></td><td>李四13</td><td>李四主题13</td><td>李四的附属信息</td><td>28</td>
</tr>
<tr onmouseover="moOver(this);" onmouseout="loadTableTRCss();">
<td><input type="checkbox" value="1" name="mail"/></td><td>李四14</td><td>李四主题14</td><td>李四的附属信息</td><td>6</td>
</tr>
<tr onmouseover="moOver(this);" onmouseout="loadTableTRCss();">
<td><input type="checkbox" value="1" name="mail"/></td><td>李四15</td><td>李四主题15</td><td>李四的附属信息</td><td>5</td>
</tr>
<tr onmouseover="moOver(this);" onmouseout="loadTableTRCss();">
<td><input type="checkbox" value="1" name="mail"/></td><td>李四16</td><td>李四主题16</td><td>李四的附属信息</td><td>18</td>
</tr>
<tr onmouseover="moOver(this);" onmouseout="loadTableTRCss();">
<td><input type="checkbox" value="1" name="mail"/></td><td>李四17</td><td>李四主题17</td><td>李四的附属信息</td><td>16</td>
</tr>
<tr onmouseover="moOver(this);" onmouseout="loadTableTRCss();">
<td><input type="checkbox" value="1" name="mail"/></td><td>李四18</td><td>李四主题18</td><td>李四的附属信息</td><td>20</td>
</tr>
<tr onmouseover="moOver(this);" onmouseout="loadTableTRCss();">
<td><input type="checkbox" value="1" name="mail"/></td><td>李四19</td><td>李四主题19</td><td>李四的附属信息</td><td>25</td>
</tr>
<tr>
<th><input type="checkbox" name="selBoxAll" onclick="selBoxAll(this)"/>全选</th>
<th colspan="4">
<input type="button" value="全选" id="checkAllB" onclick="SelAll(true)"/>
<input type="button" value="取消全选" id="calCheckAll" onclick="SelAll(false)" />
<input type="button" value="反选" id="oppselect" onclick="oppSel()" />
<input type="button" value="删除邮件" id="delMails" onclick="delMail()" />
</th>
</tr>
</table>
</body>
</html>
5. 新闻 内容大小写字体，不同颜色玩转法。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
#colorSetor{
width:80px;
}
._op1{
background-color:#FF0000;
}
._op2{
background-color:#00FF00;
}
._op3{
background-color:#0000FF;
}
#text{
width:300px;
margin-top:50px;
margin-left:20px;
}
span{
height:50px;
width:50px;
float:left;
margin-right:30px;
}
</style>
<script type="text/javascript">
function changeColor(){
var oSelNode = document.getElementById("colorSetor");
var oTextNode = document.getElementById("text");
var oOpt = oSelNode.options[oSelNode.selectedIndex];
oTextNode.style.color = oOpt.style.backgroundColor;
}
function changeColor1(node){
var oTextNode = document.getElementById("text");
oTextNode.style.color = node.style.backgroundColor;
}
</script>
</head>
<body>
<div>
<span class="_span1" style="background-color:#FF0000" onclick="changeColor1(this)">
</span>
<span class="_span_2" style="background-color:#00FF00" onclick="changeColor1(this)">
</span>
<span class="_span3" style="background-color:#0000FF" onclick="changeColor1(this)">
</span>
</div>
<div>
颜色选择器：：
<select id="colorSetor" onchange="changeColor()">
<option >请选择文本颜色</option>
<option id="_op1" style="background-color:#FF0000"></option>
<option id="_op2" style="background-color:#00ff00"></option>
<option id="_op3" style="background-color:#0000FF"></option>
</select>
</div>
<div id="text">
这里是需要变化的文字颜色哦。，看看再说啊。
这里是需要变化的文字颜色哦。，看看再说啊。
这里是需要变化的文字颜色哦。，看看再说啊。
这里是需要变化的文字颜色哦。，看看再说啊。
这里是需要变化的文字颜色哦。，看看再说啊。
这里是需要变化的文字颜色哦。，看看再说啊。
</div>
</body>
</html>
6. 调查 问卷玩转法，。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>调查列表玩转法</title>
<style type="text/css">
._joinPage_close{
margin-top:20px;
display:none;
}
._joinPage_open{
margin-top:20px;
display:block;
}
ul{
margin:0px;
padding:0px;
}
li{
text-decoration:none;
list-style:none;
margin-left:10px;
color:#FF0000;
}
.div_close{
display:none;
}
.div_open{
display:block;
}
</style>
<script type="text/javascript">
function joinPage(node){
var oDiv = document.getElementById("joinDiv");
if(node.value=="no"){
oDiv.className = "_joinPage_close";
}else{
oDiv.className = "_joinPage_open";
}
}
</script>
</head>
<body>
<h1>问卷调查，请选择是否参与</h1>
<input type="radio" name="joinPage" value="no" checked="checked" onclick="joinPage(this)"/>否
<input type="radio" name="joinPage" value="yes" onclick="joinPage(this)" />是
<div id="joinDiv" class="_joinPage_close">
<div><span>你的姓名是：</span><span> <input type="text" /></span></div>
<div><span>你的电话是：</span><span> <input type="text" /></span></div>
</div>
<hr />
<h1>你最喜欢的水果是什么：</h1><br />
<ul>
<li><input type="radio" value="1" name="favorFruit"/>苹果 </li>
<li><input type="radio" value="2" name="favorFruit" />香蕉 </li>
<li><input type="radio" value="3" name="favorFruit"/>梨子 </li>
<li><input type="radio" value="4" name="favorFruit" />葡萄 </li>
</ul>
<script type="text/javascript">
function showResult(){
var oRadios = document.getElementsByName("favorFruit");
var oDiv1 = document.getElementById("res_1");
var oDiv2 = document.getElementById("res_2");
for(var i=0;i<oRadios.length;i++){
if(oRadios[i].checked){
//alert("asdfasdf::"+oRadios[i].value);
if(oRadios[i].value<=2){
oDiv1.className = "div_open";
oDiv2.className = "div_close";
}else{
oDiv2.className = "div_open";
oDiv1.className = "div_close";
}
}
}
}
</script>
<input type="button" id="result" value="查看结果" onclick="showResult()" /><br />
<div id="res_1" class="div_close">1-2分：你的性格内向并扭曲，建议...</div>
<div id="res_2" class="div_close">2分以上：你的性格外向并分裂，建议...</div>
</body>
</html>
7. 玩转注册表单， 注意表单格式要求，若不符合规格马上给出提示，而不是提交时再给提示。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>欢迎新学生注册宿舍管理系统</title>
<style type="text/css">
table{
margin-left:280px;
margin-top:80px;
}
.normal_input{
}
.err_input{
border:#FF0000 1px solid;
}
.nor_input{
border: #D5D5D5 1px solid;
}
</style>
<script type="text/javascript">
onload = function(){
var oTabNode = document.getElementById("tabForm");
var oInputNodes = document.getElementsByTagName("input");
for(var x=0;x<oInputNodes.length;x++){
oInputNodes[x].className="nor_input";
}
}
// 通用检查函数，根据不同的正则规则来检查
function check(inputNode,val,reg,spanId,norSpaninfo,errSpaninfo){
var flag ;
var oSpan = document.getElementById(spanId);
if(reg.test(val)){ //根据符合正则与否，给出不同的提示信息
flag = true;
oSpan.innerHTML=norSpaninfo.fontcolor("#ffccff");
inputNode.className="nor_input";
}else{
flag = false;
oSpan.innerHTML=errSpaninfo.fontcolor("#0000ff");
inputNode.className="err_input";
}
return flag;
}
function checkUserName(){
var oUserName = document.getElementById("userName");
var userNameVal = oUserName.value;
var reg = /^[a-zA-Z_][\w]{3,5}$/;
return check(oUserName,userNameVal,reg,"userNameinfo","用户名输入正确","用户名输入错误");
}
function checkPassword(){
var oPassword = document.getElementById("password");
var val = oPassword.value;
var reg = /^[\w]{3,5}$/;
return check(oPassword,val,reg,"passwordinfo","密码输入正确","密码输入错误");
}
function checkRePassword(){
var oRepassword = document.getElementById("repassword");
var oPassword = document.getElementById("password");
var flag ;
var oSpan = document.getElementById("repasswordinfo");
if(oPassword.value==oRepassword.value){
flag = true;
oSpan.innerHTML="两者密码一致".fontcolor("#ffccff");
oRepassword.className="nor_input";
}else{
flag = false;
oSpan.innerHTML="两者密码不一致".fontcolor("#0000ff");
oRepassword.className="err_input";
}
return flag;
}
function listCity(){
var oSelPro = document.getElementById("selProvice");
var oSelCity = document.getElementById("selCity");
var city = [ ['请选择城市'],
['海淀区','朝阳区','东城区','西城区'],
['宝山区','徐汇区','浦东区','嘉定区'],
['南京','苏州','无锡','常州'],
['南昌','九江','赣州','上饶'] ];
var indexSel = oSelPro.selectedIndex; // select中有selectedIndex可以获取当前select选择的角标index
//alert("看看值::"+indexSel);
var arrCitys = city[indexSel]; //拿到具体省份的城市数组
oSelCity.length = 0; //可以获取或设置 select中的option的个数，这里很次调用时清除上面的选择城市
for(var i=0;i<arrCitys.length;i++){
var oOpt = document.createElement("option");
oOpt.value=arrCitys[i];
oOpt.innerHTML=arrCitys[i];
oSelCity.appendChild(oOpt); //注意这里，因为oPt是document创建出来append进select的，所以再次调用时前次调用的值还在。所以需要上面的清空。
}
}
function checkMail(){
var oMailNode = document.getElementById("mail");
var val = oMailNode.value;
var reg = /^[\w]+@([\w]+\.[\w]+)+$/;
return check(oMailNode,val,reg,"mailinfo","邮箱输入正确","邮箱输入错误");
}
function submitForm(){
if(checkMail() && checkPassword() && checkUserName() && checkRePassword()){
var oForm = document.getElementById("reg_form");
reg_form.submit();
}
}
</script>
</head>
<body>
<table id="tabForm">
<form id="reg_form" onsubmit="return checkForm();" action="http://www.baidu.com">
<tr>
<th colspan="3"> 欢迎新学生注册宿舍管理系统 </th>
</tr>
<tr>
<td>用户名：</td> <td> <input type="text" name="userName" id="userName" onblur="checkUserName()" /></td>
<td> <span id="userNameinfo"></span> </td>
</tr>
<tr>
<td>密码 ：</td> <td> <input type="password" name="password" id="password" onblur="checkPassword()"/></td>
<td><span id="passwordinfo"></span></td>
</tr>
<tr>
<td>确认密码 ：</td> <td> <input type="password" name="repassword" id="repassword" onblur="checkRePassword()"/></td>
<td><span id="repasswordinfo"></span></td>
</tr>
<tr>
<td>选择省直辖市：</td> <td>
<select id="selProvice" name="selProvice" onchange="listCity()">
<option value="none">请选择省直辖市</option>
<option value="beijing">北京</option>
<option value="shanghai">上海</option>
<option value="jiangsu">江苏</option>
<option value="jiangxi">江西</option>
</select>
</td>
<td><span id="selProviceinfo"></span></td>
</tr>
<tr>
<td>选择城市：</td> <td>
<select id="selCity" name="selCity">
<option value="none">请选择城市</option>
</select>
</td> <td><span id="selCityinfo"></span></td>
</tr>
<tr>
<td>邮箱地址：</td> <td> <input type="text" name="mail" id="mail" onblur="checkMail()"/></td>
<td><span id="mailinfo"></span></td>
</tr>
<tr>
<td colspan="3"> <input type="button" value="提交表单数据" onclick="submitForm()" /> </td>
</tr>
</form>
</table>
</body>
</html>
总结：dom的玩转，一定要结合 js与 css，并可动态的用js是操作标签。这样可以给出不同的动态效果出来。
最后一个玩法中，若正则不太了解的朋友，可以参考：http://blog.csdn.net/chenshufei2/article/details/7905411 . (js中的正则与java中正则是很相似滴)