拿到DHTML手册、javaScript手册、CSS手册
网上到处有,最好是中文的
使用FireFox的FireBug插件
安装和启用：
用FireFox访问 https://addons.mozilla.org/en-US/firefox/addon/1843b 点击安装然后重启FireFox即安装上了。
点击【工具】菜单，点击【Firebug】子菜单，点击把【Disable Firebug】前面的对勾去掉后，FireFox底部右下方出现绿底色的对勾，点击即可打开或关闭FireBug
FireBug的用处：
网页开发相关的任何事情，查看CSS，调试JS，查看HTML DOM结构，监控xmlHttp异步请求，查看所有HTTP请求。
HTML 在浏览器端被解释成DomTree
下面是个最简单的网页
<!
DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01//EN' 'http://www.w3.org/TR/html4/strict.dtd'
>
<
html
>
<
head
>
</
head
>
<
body
>
<
div
>
<
span
>
HTML文档是一颗
<
a
target
="_blank"
href
="http://yahoo.cn"
linkto
="yahoo"
>
树
</
a
>
</
span
>
</
div
>
</
body
>
</
html
>
通过FireBug来看 可以清除的看到这个网页的Dom Tree
DHTML就是使用javaScript操作DOM对象提供的方法来动态的改变HTML
XML和HTML都是DOM标准的实现，而DHTML我们要做的就是访问这棵树，进而改变这棵树。下面介绍的所有方法，都适用于任意浏览器，都可以顾名思义，方法的详细介绍可以直接查手册。我之所以枯燥的罗列了一些方法，是因为我们进行所有Dom操作只需要这些方法就足够了，不需要再用别的。
DOM Tree中三种重要的节点：
Element Node : nodeType=1
元素节点 如<a></a> <div></div>等等都是元素节点
Attibute Node : nodeType=2
属性节点 如<a href=”http://1.com”></a> 中href=”http://1.com”即是这个a的属性节点
Text Node : nodeType=3
文本节点 如<a>text</a>中的“text”即是一个文本节点
注意：通过obj.nodeType得到的值就可以判断访问到的是哪种节点。
得到指定的元素节点oNode：
document.getElementById(sid)
document.getElementsByName(sname)
document.getElementsByTagName(stagname)
注意：
document是所有节点的父节点。
元素节点的ID要保持唯一切不变。
节点name属性可以重复，但是在IE下getElementsByName对于DIV节点无效，所以不推荐使用。
从一个节点oNode出发访问相关元素或者文本节点：
oNode.firstChild();
oNode.lashChild();
oNode.previousSibling();
oNode.nextSibling();
oNode.childNodes();
oNode.parentNode();
注意：<div>x<a>y</a>z</div>这个HTML片段.，在FireFox下如果x处为空，也回被认为存在一个空的文本节点，所以在进行DomTree遍历时要根据nodeType判断，来确保找到想找的节点
访问节点oNode的属性节点
oNode.getAttribute(sName,);
oNode.setAttribute(sName,sValue);
JavaScript控制展现的三种方式
1、 使用document.write(sHTML) document.writeln(sHTML)
这个相当于PHP的echo()
参数sHTML将被输出在该语句执行时的位置成为HTML的一部分。
注意：这个方法只可以在文档载入过程中使用。
2、 使用oNode.innerHTML = sHTML
改变oNode节点内部的innerHTML
注意：
IE下无法改变,<table><tbody><thead><tfoot><tr>这些节点的innerHTML，只能改变<td>的innerHTML
innerHTML非DOM标准的方法，但是FireFox IE等所有浏览器都支持，但innerText,outerHTML,outerText就只有IE才支持，所以不要使用。
3、重头戏，使用Dom方法
创建、复制元素或文本节点：
var newNode = document.createElement(sTag)
var newNode = document.createTextNode([sText])
var newNode = oNode.cloneNode(true) true：复制包含子节点 false：不包含子节点
插入、替换元素或文本节点：
oNode.appendChild(newNode);
oNode.insertBefore(newNode,childNode);
oNode.replaceChild(newNode, childNode)
删除元素或文本节点
oNode.removeChild(childNode)
注意：
使用第2、3种方法时，操作涉及的已有oNode必须已经完整载入后才可以，比如
<div id=’t’><script>document.getElementById(‘t’)</script></div>在div元素没有闭合时就访问这个div是要严格禁止的。
使用第3种方法创建<table>时不能把<tr>直接作为<table>的子节点，必须加一层<tbody> <thead>或者<tfoot>，否则显示不出来
针对属性节点，增加和修改都使用oNode.setAttribute()方法即可，删除没什么意义
执行入口
我们已经知道了如何操作树，这些动作执行主要有两个入口：页面载入过程和事件驱动
在页面载入时在JavaScript中直接写的可执行代码会在页面载入的过程中执行
页面载入后可以通过对页面事件的响应来驱动JavaScript方法的执行
关于跨浏览器事件，有兴趣可以看：http://blog.csdn.net/lenel/archive/2007/07/25/1707520.aspx
小结
通过上面的这些介绍我们可以做的是：
l 得到指定节点
l 从指定节点出发访问其他节点
l 针对指定节点增加删除修改其子节点
从一颗树的角度来看，我们能做到的操作基本涵盖了所有。
善用手册，善用FireBug
上面介绍的是DHTML的骨架，很简单，就是操作一个树。针对特定的节点，所有的内置属性、方法、事件、样式等等都能在手册查到，按手册的指引使用即可。
经过一定的开发你会发现，DHTML所做一切的只有改变节点属性、调用上面说的那些方法、响应事件。
扫一扫
786
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
