一：Dom操作基础与高级应用
Node接口也定义了一些所有节点类型都包含的属性和方法.
二：创建和操作节点
createDocumentFragment()
创建文档碎片节点
createElement(tagname)
创建标签名tagname的元素
createTextNode(text)
创建包含文本text的文本节点
appendChild()
添加子元素
实例：
createElementd() Example Hellow
how are you?
ok
鼠标放上和离开的样式：
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">New Document
鼠标放上去的提示：
New Document click me这是提示 提示
表格排序：
一、数组排序
例：
var arr = [3,32,5,34];
arr.sort();
alert(arr.toString()); //output “3,32,34,5”
问题：如何实现正确的排序?
一个基本的比较函数:
function comparison_function(value1,value2){
if (value1<value2)
return -1
else if (value1>value2)
return 1
else
return 0
}
//说明：返回1代表升序,返回-1代表降序,返回0代表相等
var arr = [3,32,5,34];
arr.sort(comparison_function);
alert(arr.toString()); //output “3,5,32,34”
如果要降序？
function comparison_function(value1,value2){
if (value1<value2)
return 1
else if (value1>value2)
return -1
else
return 0
}
var arr = [3,32,5,34];
arr.sort(comparison_function);
alert(arr.toString()); //output “34,32,5,3”
var arr = [3,32,5,34];
arr.sort(comparison_function);
alert(arr.toString()); //output “34,32,5,3”
//反转
arr.reverse();
alert(arr.toString()); //output “3,5,32,34”
说明：如果数组已经以一种顺序排序了，使用reverse()方法将其按照相反的顺序排序，要比再次调用sort()快得多
三：表格排序
function SortTable(sTableID) { var oTable = document.getElementById(sTableID); var oTBody = oTable.tBodies[0]; var colDataRows = oTBody.rows; var oTRs = new Array(); for(var i=0;i
改进二：
改进二：function SortTable(sTableID) { var oTable = document.getElementById(sTableID); var oTBody = oTable.tBodies[0]; var colDataRows = oTBody.rows; var oTRs = new Array(); for(var i=0;i
实例二：
New Document Click on the table header to sort in ascending order.
| Last Name | First Name |
|---|---|
| Smith | John |
| Johnson | Betty |
| Henderson | Nathan |
| Williams | James |
| Gilliam | Michael |
| Walker | Matthew |
表格排序：
1、创建转换函数 function convert(sValue,sDataType) { switch (sDataType) { case "int": return parseInt(sValue); case "float": return parseFloat(sValue); case "date": return new Date(Date.parse(sValue)); default return sValue.toString(); } } 2、修改代码：
问题：
如果表格中出现链接、图像或某种HTML的内容，而用户仍希望对其进行排序。最常见的情况也许就是包含图标的列.
解决方案：
1、候选值
表格中的每个单元格必须包含可排序的值，也就是说至少有一个值属于以下数据类型:字符串、整形、浮点数和日期,因为HTML代码不能直接被转化为这些数据类型，所以需指定一个候选值。可以通过以下方式实现：如：
<td value = “blue”><img src = “blueimag.gif”/></td>
New Document Click on the table header to sort.
| Type | Filename |
|---|---|
 | My Resume.doc |
 | Fall Budget.xls |
 | How to be a better programmer.pdf |
| My Old Resume.doc |
 | Notes from Meeting.txt |
 | Backups.zip |
| Spring Budget.xls |
| Job Description - Web Designer.doc |
| Saved Web Page.pdf |
| Chapter 1.doc |
效果：
四：经典的鼠标拖尾
Simulated Drag And Drop Example Try dragging the red square.
Try dragging the red square.
var iDiffX=0;var iDiffY = 0;function handleMouseDown() { var oEvent = window.event; var oDiv = document.getElementById("div1"); iDiffX = oEvent.clientX - oDiv.offsetLeft; iDiffY = oEvent.clientY - oDiv.offsetTop; document.body.attachEvent("onmousemove",handleMouseMove); document.body.attachEvent("onmouseup",handleMouseUp); }function handleMouseMove() { var oEvent = window.event; var oDiv = document.getElementById("div1"); oDiv.style.left = oEvent.clientX - iDiffX; oDiv.style.top = oEvent.clientY - iDiffY; oDiv.style.cursor="move"; }function handleMouseUp() { var oDiv = document.getElementById("div1"); document.body.detachEvent("onmousemove",handleMouseMove); document.body.detachEvent("onmouseup",handleMouseUp); oDiv.style.cursor="default"; }