DOM編程步驟：
1、 定義數據封裝的標籤（定義界面，通過html將數據封裝）
2、 定義一些靜態的樣式（通過css）
3、 確定事件源
4、 註冊事件
5、 事件處理
注：在處理過程中需要明確被處理的區域
動態改變字體的大小、顏色、背景屬性：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>動態改變文字</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<script>
function changeSize(className)
{
var newsNode=document.getElementById("divid");
newsNode.className=className;
}
</script>
<style type="text/css">
div,.norm
{
background-color:#CCCCCC;
color:#0000FF;
font-size:16px;
width:500px;
}
.max
{
background-color:#00FF99;
color:#FF3333;
font-size:24px;
width:500px;
}
.min
{
background-color:#FFFF66;
color:#000000;
font-size:10px;
width:500px;
}
</style>
</head>
<body>
<h2>新聞標題</h2>
<a href="javascript:void(0)"οnclick="changeSize('max')">大</a>
<a href="javascript:void(0)"οnclick="changeSize('norm')">中</a>
<a href="javascript:void(0)"οnclick="changeSize('min')">小</a><br/>
<div id="divid" class="norm">
滾滾長江東逝水<br/>
浪花淘盡英雄<br/>
是非成敗轉頭空<br/>
青山依舊在<br/>
幾度夕陽紅<br/>
白髮漁樵江渚上<br/>
慣看秋月春風<br/>
一壺濁酒喜相逢<br/>
古今多少事<br/>
都付笑談中<br/>
</div>
</body>
</html>
展開閉合效果：
獲取時間源對象的兩種方式：
1、 通過event對象的srcElement屬性
2、 將事件源對象通過this傳入
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>展開閉合效果</title>
<!-- TemplateEndEditable -->
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
<script type="text/javascript">
function list()
{
var dtNode=event.srcElement;
var dlNode=dtNode.parentNode;
if(dlNode.className=="open")
{
dlNode.className="close";
}
else
{
dlNode.className="open";
}
}
</script>
<style type="text/css">
.open{
overflow:visible;
}
.close{
overflow:hidden;
}
dl{
overflow:hidden;
height:16px;
}
</style>
</head>
<body>
<dl>
<dt οnclick="list()">古詩詞</dt>
<dd>滾滾長江東逝水</dd>
<dd>浪花淘盡英雄</dd>
<dd>是非成敗轉頭空</dd>
<dd>青山依舊在</dd>
<dd>幾度夕陽紅</dd>
<dd>白髮漁樵江渚上</dd>
<dd>慣看秋月春風</dd>
</dl>
<dl>
<dt οnclick="list()">古詩詞</dt>
<dd>滾滾長江東逝水</dd>
<dd>浪花淘盡英雄</dd>
<dd>是非成敗轉頭空</dd>
<dd>青山依舊在</dd>
<dd>幾度夕陽紅</dd>
<dd>白髮漁樵江渚上</dd>
<dd>慣看秋月春風</dd>
</dl>
<dl>
<dt οnclick="list()">古詩詞</dt>
<dd>滾滾長江東逝水</dd>
<dd>浪花淘盡英雄</dd>
<dd>是非成敗轉頭空</dd>
<dd>青山依舊在</dd>
<dd>幾度夕陽紅</dd>
<dd>白髮漁樵江渚上</dd>
<dd>慣看秋月春風</dd>
</dl>
</body>
</html>
單個展開實例：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>無標題文檔</title>
<style type="text/css">
table{
border:#FF0000 1px solid;
background-color:#00CC33;
}
table td{
border:#3300FF 1px solid;
background-color:#33CCFF;
}
table td div{
background-color:#00CC99;
display:none;
}
.open{
display:block;
}
.close{
display:none;
}
</style>
<script type="text/javascript">
function list2()
{
var aNode=event.srcElement;
var tdNode=aNode.parentNode;
var divNode=tdNode.getElementsByTagName("div")[0];
var table=document.getElementsByTagName("table")[0];
var divNodes=table.getElementsByTagName("div");
for(var x=0;x<divNodes.length;x++)
{
if(divNodes[x]==divNode)
{
if(divNode.className=="open")
{
divNode.className="close";
}
else
{
divNode.className="open";
}
}
else divNodes[x].className="close";
}
}
</script>
</head>
<body>
<table>
<tr>
<td>
<a href="javascript:void(0)" onClick="list2()">好友菜單列表</a>
<div>
我們都是好朋友<br>
我們都是好朋友<br>
我們都是好朋友<br>
我們都是好朋友<br>
我們都是好朋友<br>
</div>
<td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onClick="list2()">好友菜單列表</a>
<div>
我們都是好朋友<br>
我們都是好朋友<br>
我們都是好朋友<br>
我們都是好朋友<br>
我們都是好朋友<br>
</div>
<td>
</tr>
<tr>
<td>
<a href="javascript:void(0)" onClick="list2()">好友菜單列表</a>
<div>
我們都是好朋友<br>
我們都是好朋友<br>
我們都是好朋友<br>
我們都是好朋友<br>
我們都是好朋友<br>
</div>
<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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>無標題文檔</title>
<style>
table{
border:#006699 1px solid;
width:600px;
}
table tr,td{
border:#009999 1px solid;
text-align:center;
}
</style>
<script>
var flag=true;
function sorttab()
{
//1、獲取表格中所有的行對象
var tabNode=document.getElementsByTagName("table")[0];
var trs=tabNode.rows;
//2、定義臨時容器，將表格中需要參與排序的行對象臨時存儲
var arr=new Array();
for(var x=1;x<trs.length;x++)
{
arr[x-1]=trs[x];
}
for(var x=0;x<arr.length;x++)
{
for(var y=x+1;y<arr.length;y++)
{
if(parseInt(arr[x].cells[1].innerText)>parseInt(arr[y].cells[1].innerText))
{
var temp=arr[x];
arr[x]=arr[y];
arr[y]=temp;
}
}
}
if(flag)
{
for(var x=0;x<arr.length;x++)
{
document.getElementsByTagName("tbody")[0].appendChild(arr[x]);
}
flag=false;
}
else
{
for(var x=arr.length-1;x>=0;x--)
{
document.getElementsByTagName("tbody")[0].appendChild(arr[x]);
}
flag=true;
}
}
</script>
</head>
<body>
<table>
<tr>
<td>姓名</td>
<td><a href="javascript:void(0)" onClick="sorttab()">年齡</a></td>
<td>地址</td>
</tr>
<tr>
<td>張三</td>
<td>30</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>34</td>
<td>上海</td>
</tr>
<tr>
<td>王五</td>
<td>23</td>
<td>廣州</td>
</tr>
<tr>
<td>趙六</td>
<td>27</td>
<td>南京</td>
</tr>
<tr>
<td>周七</td>
<td>25</td>
<td>大連</td>
</tr>
<tr>
<td>孫八</td>
<td>29</td>
<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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>無標題文檔</title>
<style type="text/css">
table{
border:#006699 1px solid;
width:600px;
}
table tr,td{
border:#009999 1px solid;
text-align:center;
}
.one
{
background-color:#FFCC00;
}
.two
{
background-color:#CCFF99;
}
.over
{
background-color:#FF00FF;
}
</style>
<script type="text/javascript">
var name;
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].οnmοuseοver=function()
{
name=this.className;
this.className="over";
}
trs[x].οnmοuseοut=function()
{
this.className=name;
}
}
}
window.οnlοad=trcolor;
</script>
</head>
<body>
<table>
<tr>
<td>姓名</td>
<td><a href="javascript:void(0)" onClick="trcolor()">年齡</a></td>
<td>地址</td>
</tr>
<tr>
<td>張三</td>
<td>30</td>
<td>北京</td>
</tr>
<tr>
<td>李四</td>
<td>34</td>
<td>上海</td>
</tr>
<tr>
<td>王五</td>
<td>23</td>
<td>廣州</td>
</tr>
<tr>
<td>趙六</td>
<td>27</td>
<td>南京</td>
</tr>
<tr>
<td>周七</td>
<td>25</td>
<td>大連</td>
</tr>
<tr>
<td>孫八</td>
<td>29</td>
<td>鐵嶺</td>
</tr>
</table>
</body>
</html>