记得和上次写教程隔了好多天了，其中的原因说来惭愧，自己偷懒了，呵呵~
话说上一章说了AJAX和MVC，这章就犯愁了，该写什么呢。想来想去，想到了！~~~如题注一样，这章讲DOM技术和JAVASCRIPT。为什么说DOM和JAVASCRIPT呢，其实他们和AJAX很有关系的，AJAX具体的实现和他们是离不开的，之后我们会通过实例来说明。
一、DOM深入了解
DOM中相关属性和方法
|
DOM中常用的几种结点类型 思派S-pai |
| 接口 | nodeType常量 | nodeType值 | 备注 |
| element | Node.ELEMENT_NODE | 1 | 元素结点 |
| text | Node.TEXT_NODE | 3 | 文本结点 |
| document | Node.DOCUMENT_NODE | 9 | Document |
| comment | Node.COMMENT_NODE | 8 | 注释文本 |
| documentFragment | Node.DOCUMENT_FRAGMENT_NODE | 11 | Document片段 |
| attr | Node.ATTRIBUTE_NODE | 2 | 结点属性 |
在使用DOM操作HTML文档时，经常使用document对象的相关方法，有关该对象的常用方法如表4-2所示。
|
document对象的常用方法 思派S-pai |
| 方法 | 描述 |
| createAttribute() | 用指定的名字创建新的attr结点，即属性结点 |
| createComment() | 用指定的字符串创建新的comment结点 |
| createElement() | 用指定的标记名创建新的element结点 |
| createTextNode() | 用指定的文本创建新的textNode结点 |
| getElementById() | 返回文档中具有指定id属性的element结点 |
| getElementsByTagName() | 返回文档中具有指定标记名的所有element结点 |
除了document对象对应的属性及方法比较常用之外，对于element结点，可以通过调用getAttribute()，setAttribute()，removeAttribute()方法来查询、设置或删除一个element结点的相关属性，例如<table>标记的border属性。Element对象的常用方法：
|
Element对象的常用方法 思派S-pai |
| 方法 | 描述 |
| getAttribute() | 以字符串形式返回指定属性的值 |
| getAttributeNode() | 以attr结点的形式返回指定属性的值 |
| getElementsByTagName() | 返回一个Node数组，包含具有指定标记名的所有element结点的子孙结点，其顺序为在文档中出现的顺序 |
| hasAttribute() | 如果该元素具有指定名字的属性，则返回true |
| removeAttribute() | 从元素中删除指定的属性 |
| removeAttributeNode() | 从元素的属性列表中删除指定的attr结点 |
| setAttribute() | 把指定的属性设置为指定的字符串值，如果该属性不存在则添加一个新属性 |
| setAttributeNode() | 把属性的attr结点添加到该元素的属性列表中 |
Node对象定义了一系列属性和方法，以便于遍历整个文档。用parentNode属性和childNodes[]数组可以在文档树中上下移动；通过遍历childNodes[]数组或者使用firstChild和nextSibling属性进行循环操作，也可以使用lastChild和previousSibling进行逆向循环操作，还可以根据需要枚举指定结点的子结点。而调用appendChild()、insertBefore()、removeChild()、replaceChild()方法可以改变一个结点的子结点从而改变文档树。
|
node对象的常用属性 思派S-pai |
| 属性 | 描述 |
| attribute | 如果该结点是一个element，则以NameNodeMap形式返回该元素的属性 |
| childNodes | 以node[]的形式存放当前结点的子结点。如果没有子结点，则返回空数组 |
| firstNodes | 以node的形式返回当前结点的第一个子结点。如果没有子结点，则为null |
| lastNodes | 以node的形式返回当前结点的最后一个子结点。如果没有子结点，则为null |
| nextSibling | 以node的形式返回当前结点的兄弟下一个子结点。如果没有子结点，则为null |
| nodeNode | 结点的名字，element结点代表element的标记名称 |
| nodeType | 代表结点的类型 |
| setAttributeNode() | 把指定的attr结点添加到该元素的属性列表中 |
| parentNode | 以node的形式返回当前结点的父结点。如果没有父结点，则返回null |
| previousSibling | 以node的形式返回紧挨当前结点、位于它之前的兄弟结点。如果没有这样的节点，则返回null |
在使用DOM操作HTML文档时，会使用node对象的相关方法，通过这些方法实现对指定结点的具体操作。
|
node对象的常用方法 思派S-pai |
| 方法 | 描述 |
| appendChild() | 通过把一个结点增加到当前结点的childNodes[]组，给文档树增加结点 |
| cloneNode() | 复制当前结点，或者复制当前结点以及它的所有子结点 |
| hasChildNodes() | 如果当前结点拥有子结点，则将返回true |
| insertBefore() | 给文档树插入一个结点，位置在当前结点的指定子结点前。如果该结点已经存在，则删除之再插入到它的位置。 |
| removeChild() | 从文档树中删除并返回指定的子结点 |
| replaceChild() | 从文档树中删除并返回指定的子结点，用另一个结点替换它 |
大致了解了DOM对HTML文档操作提供的相关对象及方法后，通过实例来体验它的作用。
二、DOM同JAVASCRIPT相结合，实例——拖拽和褪色技术
例1. 页面中拖拽效果的实现
可拖放DOM模式（Draggable DOM pattern）可以让用户在Web页面中对各个部分进行编辑，即只需要选中要移动的部分，将其拖拽到新的位置上，就可以重新安排整个页面的布局效果。
新建页面main.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=UTF-8">
<script language="javascript" src="dom-drag.js"></script>
<link rel="stylesheet" href="style.css">
<title>Insert title here</title>
</head>
<body>
<form id="Form1" method="post" runat="server">
<div id="news_root" style="LEFT:20px;TOP:20px" class="root">
<div id="news_handle" class="handle">
定制窗口
<span style="TEXT-ALIGN:right"></span>
</div>
<div id="news" class="text">
欢迎使用拖拽功能
</div>
</div>
</form>
<script language="javascript">
//获得id为news_handle的element
var news_handle = document.getElementById("news_handle");
//获得id为news_root的element
var news_root = document.getElementById("news_root");
Drag.init(news_handle,news_root);
news.style.backgroundColor = "#ffff00";
news.style.cursor = "hand";
</script>
</body>
</html>
其中介绍下，在本例中使用的一个开源框架中有关定位的javascript脚本文件。www.young.net 提代了一个 JavaScript 库(dom-drag.js),可以帮助开发人员更快实现鼠标拖放的功能。由于不能上传附件，dom-drag.js大家百度或者谷歌一下哦。
Css.css如下：
.root{
position:absolute;
height:150px;
width:200px;
BACKGROUND-COLOR:#eeeeee
}
.handle{
margin:2px;
padding:2px;
width:194px;
color:white;
background-color:navy;
font-family:verdana,sans-serif;
font-size:12px;
}
.text{
color:navy;
font-family:verdana,sans-serif;
font-size:12px;
}
如此就能你的拖拽功能了，大家试试吧！
例2. 褪色技术的实现
这里需要同上一个实例相同的样式，这里就不在黏贴了。
直接说主题，新建页面main2.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=UTF-8">
<link rel="stylesheet" href="styles/style.css">
<title>Insert title here</title>
</head>
<body>
<form id="Form1" method="post">
<div id="news_root" style="LEFT:20px;TOP:20px" class="root">
<div id="news_handle" class="handle">
定制窗口
<span style="TEXT-ALIGN:right"></span>
</div>
<div id="news" class="text">
欢迎使用褪色技术
</div>
</div>
</form>
<script language="javascript">
//颜色渐变速度
var speed = 3;
//颜色渐变时需要使用的定时器对象数组
var timers;
news.style.backgroundColor = "#ffff00";
news.style.cursor = "hand";
timers = setTimeout("changeColor()",10);
function changeColor(){
var color = news.style.backgroundColor;
//当前背景颜色(rgb)的rg部分
var color_rg = color.slice(1,5);
//当前背景颜色(rgb)的b部分
//并将b部分增加一个数值，转换为10进制整数(向白色靠近)
var color_b = parseInt(color.slice(5),16) + speed;
//如果b部分不超过255
if(color_b < 255){
var b1 = Math.floor((color_b / 16)).toString(16);
var b2 = (color_b % 16).toString(16);
news.style.backgroundColor = "#" + color_rg + b1 + b2;
timers = setTimeout("changeColor()",100);
}else{
clearTimeout(timers);
}
}
</script>
</body>
</html>
完成代码后，打开页面等待5秒，你就发现颜色不断的变淡。
有建议请联系QQ：540528747，我也在学习AJAX，大家一起研究，欢迎各位朋友一起交流技术。
扫一扫
55
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
