DOM编程步骤总结：
1、定义界面：通过html的标签将数据进行封装
2、定义一些静态的样式：通过css
3、需要动态完成的和用户的交互：
a、先明确事件源
b、明确事件将事件注册到事件源上
c、通过javascript的函数对对象事件进行处理
d、在处理过程中需要明确被处理的区域
Table标签示例
1、在页面上通过按钮创建一个表格。
思路：
1.1、创建一个table节点。document.createElement(“table”);
1.2、通过table节点的insertRow()方法创建表格的行，并添加到rows集合中。
1.3、通过行对象的insertCell()方法创建单元格对象，并添加到cells集合中。
1.4、给单元格中添加数据。
a、创建一个节点如文本节点，document.createTextNode(“文本内容”)
通过单元格对象appendChild方法将文本节点添加到单元格的尾部。
b、可以通过单元格的innerHTML，添加单元格中的元素。
TdNode.innerHTML = “< img src=’1.jpg’ alt = ‘图片说明信息’ />”
1.5、建立好表格节点，添加到DOM树中。也就是网页中的指定位置上。
CODE：定义页面
<!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=utf-8" />
<title>无标题文档</title>
</head>
<body>
行：<input type="text" name="rowNum" />
列：<input type="text" name="colNum" />
|||<input type="text" name="delrow" /><input type="button" value="删除行" οnclick="delRow()"/>
<input type="text" name="delcol" /><input type="button" value="删除列" οnclick="delCol()"/>
<br/>
<input type="button" value="创建表格" οnclick="createTable()"/>
<br />
<div>
</div>
</body>
</html>CODE：创建表格JS
function createTable()
{
var tabNode = document.createElement("table"); //取表节点对象
tabNode.id = "tableid";
//alert(tabNode.nodeName);
var rownum = byName("rowNum")[0].value; //取行数
//alert(rownum);
var colnum = byName("colNum")[0].value; //取列数
//alert(colnum);
for(var x = 1 ; x <= rownum ; x++)
{
var trNode = tabNode.insertRow();
for(var y = 1 ; y <= colnum ; y++)
{
var tdNode = trNode.insertCell();
tdNode.innerHTML = x+" ... "+y;
}
}
byTag("div")[0].appendChild(tabNode);
event.srcElement.disabled = true;
}2、如何删除表格中的行或者列。
思路：
2.1、删除行：获取表格对象，通过表格对象中的deleteRow方法，将指定的行索引传入deleteRow方法中。
2.2、删除列：表格没有直接删除列的方法，要通过删除每一行中指定的单元格来完成删除列的动作。
获取所有的行对象，并进行遍历，通过行对象的deleteCell方法将指定单元格删除。
CODE：删除表格中的行或列JS
function delRow()
{
var rownum = document.getElementsByName("delrow")[0].value;
//alert(rownum);
var tabNode = document.getElementById("tableid");
//alert(tabNode.nodeName);
if(tabNode==null)
{
alert("表格未创建");
return ;
}
if(rownum > 0 && rownum<=tabNode.rows.length)
tabNode.deleteRow(rownum-1);
else
{
alert("行号不存在");
}
}
function delCol()
{
var colnum = document.getElementsByName("delcol")[0].value;
//alert(rownum);
var tabNode = document.getElementById("tableid");
//alert(tabNode.nodeName);
if(tabNode==null)
{
alert("表格未创建");
return ;
}
if(colnum>0 && colnum <= tabNode.rows[0].cells.length)
{
for(var x = 1 ; x <= tabNode.rows.length ; x++)
{
var trNode = tabNode.rows[x-1];
trNode.deleteCell(colnum-1);
}
}else
{
alert("列不存在");
}
}3、对表格中的数据进行排序
思路：
3.1、获取表格中的所有行对象
3.2、定义临时存储，将需要进行排序的行对象存入到数组中
3.3、对数组进行排序，通过比较每一个行对象中指定单元格中的数据，如果是整数需要通过parseInt转换。
3.4、将排序后的数组通过遍历，将每一个行对象重新添加回表格。通过tbody节点的appendChild方法。
3.5、其实排序就是将每一个行对象引用取出。
CODE：对表格中的数据进行排序
<!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=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="docTool.js"></script>
<link rel="stylesheet" href="sorttab.css" />
<!--
表格中按照年龄的顺序进行排序
思路：
1、每一个人的信息是一行，那么先将行都取出，临时存入到数组中
2、并对数组中的行对象的其中一个单元格中的数据进行排序
3、将排序后的行对象重新添加至表哥对象中
-->
<script type="text/javascript">
var flag = true;
function sorttab()
{
var tabNode = byTag("table")[0];
//alert(tabNode.nodeName);
var trNodes = tabNode.rows;
//alert(trNodes.length);
var arr = new Array();
for(var x = 1 ; x < trNodes.length ; x++)
{
arr[x-1] = trNodes[x];
}
//alert(arr.length);
sort(arr);//排序
var tbdNode = tabNode.getElementsByTagName("tbody")[0]; //去tbody节点对象
//alert(tbdNode.nodeName);
if(flag){
for(var x = 0 ; x < arr.length ; x++)
{
//alert(arr[x].cells[1].innerText)
tbdNode.appendChild(arr[x]);//追加子元素至表格底部
}
flag = false;
}else{
for(var x = arr.length-1 ; x >=0 ; x--)
{
//alert(arr[x].cells[1].innerText)
tbdNode.appendChild(arr[x]);//追加子元素至表格底部
}
flag = true;
}
}
function sort(arr)
{
for(var x = 0 ; x < arr.length ; x++)
{
for(var y = x ; 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;
}
}
}
}
</script>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th><a href="javascript:void(0)" οnclick="sorttab()">年龄</a></th>
<th>地址</th>
</tr>
<tr>
<td>黄亮</td>
<td>25</td>
<td>株洲</td>
</tr>
<tr>
<td>李波</td>
<td>5</td>
<td>永州</td>
</tr>
<tr>
<td>冯志</td>
<td>29</td>
<td>湘潭</td>
</tr>
<tr>
<td>戴亮</td>
<td>22</td>
<td>长沙</td>
</tr>
<tr>
<td>周正举</td>
<td>24</td>
<td>娄底</td>
</tr>
<tr>
<td>孙俪</td>
<td>34</td>
<td>北京</td>
</tr>
</table>
</body>
</html>
4、表格的行颜色间隔显示，并在鼠标指定的行上高亮显示。
思路：
4.1、获取所有的行对象，将需要间隔颜色显示的行对象进行动态的className属性的指定，那么前提是：先定义好类选择器。
4.2、为了完成高亮，需要用到两个事件，onmouseover(鼠标进入) onmouseout(鼠标移出)。
4.3、为了方便可以在遍历行对象时，将每一个对象都进行两个事件属性的指定，并通过匿名函数完成该事件的处理。
4.4、高亮的原理就是将鼠标进入时的颜色改变，改变前先记录住原来行对象的样式。这样在鼠标离开时，可以将原样式还原。
4.5、该样式需要在页面加载完后直接显示，所以使用的window.onload事件来完成。
CODE:表格行颜色间隔显示并高亮显示指定行
<!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=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="docTool.js"></script>
<link rel="stylesheet" href="sorttab.css" />
<style type="text/css">
.one{
background-color:#66FFFF;
}
.two{
background-color:#CCCCCC;
}
.over{
background-color:#00CC66;
}
</style>
<script type="text/javascript">
var colorName ="";
function trColor()
{
var tabNode = byTag("table")[0];
var trNodes = tabNode.rows;
for(var x = 1 ; x<trNodes.length ; x++)
{
if(x%2==1)
{
trNodes[x].className = 'one';
}
else
{
trNodes[x].className = 'two';
}
//给行注册事件，用this指针
trNodes[x].onmouseover = function(){
colorName = this.className;
//alert(colorName);
this.className = 'over';
}
trNodes[x].onmouseout = function(){
this.className = colorName;
}
}
}
window.onload = trColor;
</script>
</head>
<body>
<table>
<tr>
<th>姓名</th>
<th>年龄</th>
<th>地址</th>
</tr>
<tr>
<td>黄亮</td>
<td>25</td>
<td>株洲</td>
</tr>
<tr>
<td>李波</td>
<td>5</td>
<td>永州</td>
</tr>
<tr>
<td>冯志</td>
<td>29</td>
<td>湘潭</td>
</tr>
<tr>
<td>戴亮</td>
<td>22</td>
<td>长沙</td>
</tr>
<tr>
<td>周正举</td>
<td>24</td>
<td>娄底</td>
</tr>
<tr>
<td>孙俪</td>
<td>34</td>
<td>北京</td>
</tr>
<tr>
<td>黄亮</td>
<td>25</td>
<td>株洲</td>
</tr>
<tr>
<td>李波</td>
<td>5</td>
<td>永州</td>
</tr>
<tr>
<td>冯志</td>
<td>29</td>
<td>湘潭</td>
</tr>
<tr>
<td>戴亮</td>
<td>22</td>
<td>长沙</td>
</tr>
<tr>
<td>周正举</td>
<td>24</td>
<td>娄底</td>
</tr>
<tr>
<td>孙俪</td>
<td>34</td>
<td>北京</td>
</tr>
</table>
</body>
</html>5、完成一个与css手册中一样的示例。
通过下拉菜单选择显示指定样式属性的使用效果。
CODE:下拉菜单选择显示指定样式
<!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=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
#div1{
background-color:#99CC33;
width:400px;
height:100px;
}
#div2{
background-color:#99CCCC;
width:400px;
}
</style>
<script type="text/javascript">
function sel()
{
var selid = document.getElementById("sleid");
//alert(selid.nodeName);
var value = selid.options[selid.selectedIndex ].value;
//alert(value);
var div1Node = document.getElementById("div1");
var div2Node = document.getElementById("div2");
div1Node.style.textTransform = value;
div2Node.innerHTML = "text-transform:"+value;
}
</script>
<body>
<div id="div1">
Good Good Study , Day Day Up !
</div>
<br/>
<select id="sleid" οnchange="sel()">
<option value="none">--none--</option>
<option value="uppercase">大写</option>
<option value="lowercase">小写</option>
</select>
<p></p>
<div id="div2">
text-transform:none
</div>
</body>
</html>
6、表单中的组件
单选框，复选框。
这两个组件都有一个属性来表示其选中与否的状态。Checked
完成一个对多个复选框进行全选的操作。
思路：
将全选那个复选框的checked状态赋给所有的其他checkbox即可。
CODE:练习全选
<!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=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="docTool.js"></script>
<script type="text/javascript">
function getCount()
{
var items = byName("compute");
//alert(items.length);
var sum = 0 ;
for(var x = 0 ; x < items.length ; x++)
{
if(items[x].checked)
{
sum += parseInt(items[x].value);
}
}
var str = sum + "元";
var spanNode = byId("countid");
spanNode.innerHTML = str.fontsize(5);
}
function checkAll(allNode)
{
var computeNodes = byName("compute");
for(var x = 0 ; x < computeNodes.length ; x++)
{
computeNodes[x].checked = allNode.checked;
}
}
</script>
</head>
<body>
<input type="checkbox" name="all" οnclick="checkAll(this)"/>全选<br />
<input type="checkbox" name="compute" value="2000" />笔记本电脑：2000元<br />
<input type="checkbox" name="compute" value="3000" />笔记本电脑：3000元<br />
<input type="checkbox" name="compute" value="3500" />笔记本电脑：3500元<br />
<input type="checkbox" name="compute" value="3800" />笔记本电脑：3800元<br />
<input type="checkbox" name="compute" value="3000" />笔记本电脑：3000元<br />
<input type="checkbox" name="compute" value="5000" />笔记本电脑：5000元<br />
<input type="checkbox" name="compute" value="6000" />笔记本电脑：6000元<br />
<input type="checkbox" name="compute" value="7000" />笔记本电脑：7000元<br />
<input type="checkbox" name="compute" value="12000" />笔记本电脑：12000元<br />
<input type="checkbox" name="compute" value="10000" />笔记本电脑：10000元<br />
<input type="checkbox" name="all" οnclick="checkAll(this)"/>全选<br />
<input type="button" value = "获取总金额" οnclick="getCount()"/><span id="countid"></span>
</body>
</html>7、获取鼠标的坐标，让指定区域随着鼠标移动。
获取鼠标坐标：event.x , event.y
指定区域随鼠标移动其实就是改变了指定区域的left top 属性的值。
这里需要用到的事件：body对象的onmousemove事件。
还需要用到一个css样式，直接定义页面，所以区域都在同一层次，
为了对某一个区域进行定位，将该区域分离到另一个层次，用到css中position属性。
797
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
