浅谈DHTML
相信大家对于Javascript, CSS, DOM应该很熟悉了吧，将它们三者组合后就被称为DHTML(动态html)；
下面我们来简要的回顾下这三个熟悉的面孔：
javascript:一种弱类型的，解释型的和通用的脚本语言；
弱类型意味着变量不需要申明为字符串，整数或者对象，同一个变量可以使用不同的类型来赋值。这样我们就可以将一个原先赋值为整型的变量重新赋值一个字符串；
（这个在java中是不可想象的）；
解释型意味着不需要编译，源代码本身直接可以执行。我们只需将源代码放在web服务器上，通过因特网传输到用户的浏览器中，这样javacsript的部署就算完成了；
通用 顾名思义就是说这种语言适合于大部分的算法和编程任务；
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
CSS：用于定义应用的外观，通过各式的选择器，这里就不详细述说了。。。。
------------------------------------------------------------------------------------------------------------------------------------------------------------------------
DOM：web页面的DOM表示的是一个树状结构，由元素和节点组成，
下面我们就来将三者就行简单的应用：
先定义一个简单的页面：
<html> <head> <link ref = "stylesheet" type = "text/css" href = "hello.css"> <script type = "text/javascript" src = "hello.js"></script> <body> <p id = "hello">hello</p> <div id = "empty"></div> </body> </head> </html>
定义css样式：hello.css
.declared{ color: red; font-family: arial; font-weight: normal; font-size: 16px; } .programmed{ color: blue; font-family: helvetica; font-weight: bold; font-size: 10px; }
定义js代码：hello.js
window.onload = function(){ //通过id来获得节点元素 var hello = document.getElementById("hello"); //通过DOM节点的className属性来利用CSS hello.className = 'declared'; var empty = document.getElementById("empty"); addNode(empty, "reader of"); addNode(empty, "Ajax in Action"); var childern = empty.childNodes; for(var i = 0; i< children.length; i++){ childern[i].className = 'programmed'; } //直接为节点设置样式 empty.style.border = 'solid green 2px'; empty.style.width = '200px'; } function addNode(el, text){ //创建新元素 var childEl = document.createElement("div"); el.appendChild(childEl); //创建文本元素 var txtNode = document.createTextNode(text); childEl.appendChild(txtNode); }
下面我们就对上面的代码进行解析：可以看到hello.js中入口点是window.onload()函数，这个函数时在整个页面加载完成后即刻调用的；也对，当整个页面加载完成后，DOM树也就已经创建好了，可以对它进行操作了；后面的js代码就是对DOM树的操作；
注意：window对象上只允许附加一个onload事件处理函数，如果有多个，那么后者会覆盖前者；
js操作DOM节点一般就分为两步：
1.寻找DOM节点，并将其获得：
js提供了相应的方法获取指定的DOM节点：
a.根据标签id来获得：getElementById(tagid);如上面的var hello = document.getElementById("hello"); 任何一个DOM节点都可以分配一个唯一的ID，用来在程序中通过这个函数进行调用获取这个节点的引用；
b.根据标签来获取：getElementsByTagName(tagname)；通过这个方法获取的节点的引用是一个数组，如document.getElementByTagName("ul")会返回包含文档中所有的<ul>标签的数组；
c.根据标签name来获取：getElementsByName(elementName)；这个方法与b方法类似，只是获取的方式不一样而已；
2.使用js对获取的节点元素进行一系列的操作：
a.由于DOM节点是以树的结构来组织的，因此每个DOM节点都只有不多于一个的父节点，但是可以有任意多个子节点；这里我们可以通过parentNode和childNodes来访问它们；parentNode返回该节点的父节点，而childNodes则返回该节点的子节点数组；如上面代码的应用：
var childern = empty.childNodes; for(var i = 0; i< children.length; i++){ childern[i].className = 'programmed'; }
上面的代码就是获取了empty节点的子节点数组，并将其遍历后添加css样式；
b.创建DOM节点，如上面的代码：
function addNode(el, text){ //创建新元素 var childEl = document.createElement("div"); el.appendChild(childEl); //创建文本元素 var txtNode = document.createTextNode(text); childEl.appendChild(txtNode); }
addNode()函数使用了标准的document.createElement()和document.createTextNode()方法；其中document.createElement()可以用来创建任何的html元素，该方法带有一个标签类型的参数；另外一个方法document.createTextNode()创建一个代表一段文本的DOM节点，这样的节点通嵌入在标题，div,段落以及列表条目等标签之中，如上面代码显示的文本就是嵌入在div中的；
上面的代码中我们还有限了一个方法appendChlid()，这个方法的作用就是将创建的节点附加到文档之上，这样我们才能在浏览器窗口中见到它；
以上说到的三个方法已经为我们提供了向文档中添加新的结构的一切需要了；
c.为文档添加样式（给DOM节点添加相应的CSS样式）：
上面代码中的：hello.className = 'declared'; 就是通过设置DOM节点的className属性来利用CSS；
除了上面的方式外，我们还能细密度的改变特定元素的样式，DOM节点还包含一个名为style的关联数组，其中包含了节点样式的全部细节；如上面的代码：
//直接为节点设置样式
empty.style.border = 'solid green 2px';
empty.style.width = '200px';
------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
掌握了上面介绍的节点操作，虽不能说可以对DOM‘为所欲为’了，基本的操作应该是可以了；下面我们再来介绍一个强大的属性：InnerHTML属性
不多说了，相信大家看代码就可以明白了：下面我们将上面用createElement()和appendChild()实现的用InnerHTML来代替实现
function addNodeByInnerHTML(el, text){
el.innerHTML+= "<div class = "programmed">"+text+"</div>";
}
这里要注意的是使用+=操作来添加属性
附录：
属性:
1Attributes 存储节点的属性列表(只读)
2childNodes 存储节点的子节点列表(只读)
3dataType 返回此节点的数据类型
4Definition 以DTD或XML模式给出的节点的定义(只读)
5Doctype 指定文档类型节点(只读)
6documentElement 返回文档的根元素(可读写)
7firstChild 返回当前节点的第一个子节点(只读)
8Implementation 返回XMLDOMImplementation对象
9lastChild 返回当前节点最后一个子节点(只读)
10nextSibling 返回当前节点的下一个兄弟节点(只读)
11nodeName 返回节点的名字(只读)
12nodeType 返回节点的类型(只读)
13nodeTypedValue 存储节点值(可读写)
14nodeValue 返回节点的文本(可读写)
15ownerDocument 返回包含此节点的根文档(只读)
16parentNode 返回父节点(只读)
17Parsed 返回此节点及其子节点是否已经被解析(只读)
18Prefix 返回名称空间前缀(只读)
19preserveWhiteSpace 指定是否保留空白(可读写)
20previousSibling 返回此节点的前一个兄弟节点(只读)
21Text 返回此节点及其后代的文本内容(可读写)
22url 返回最近载入的XML文档的URL(只读)
23Xml 返回节点及其后代的XML表示(只读)
方法:
1appendChild 为当前节点添加一个新的子节点,放在最后的子节点后
2cloneNode 返回当前节点的拷贝
3createAttribute 创建新的属性
4createCDATASection 创建包括给定数据的CDATA段
5createComment 创建一个注释节点
6createDocumentFragment 创建DocumentFragment对象
7createElement 创建一个元素节点
8createEntityReference 创建EntityReference对象
9createNode 创建给定类型,名字和命名空间的节点
10createPorcessingInstruction 创建操作指令节点
11createTextNode 创建包括给定数据的文本节点
12getElementsByTagName 返回指定名字的元素集合
13hasChildNodes 返回当前节点是否有子节点
14insertBefore 在指定节点前插入子节点
15Load 导入指定位置的XML文档
16loadXML 导入指定字符串的XML文档
17removeChild 从子结点列表中删除指定的子节点
18replaceChild 从子节点列表中替换指定的子节点
19Save 把XML文件存到指定节点
20selectNodes 对节点进行指定的匹配,并返回匹配节点列表
21selectSingleNode 对节点进行指定的匹配,并返回第一个匹配节点
22transformNode 使用指定的样式表对节点及其后代进行转换
23transformNodeToObject 使用指定的样式表将节点及其后代转换为对象
