拿到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
下面是个最简单的网页
< 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所做一切的只有改变节点属性、调用上面说的那些方法、响应事件。