從HTML到DHTML速成（跨浏覽器）

src="http://p.alimama.com/code.php?t=2&i=mm_10003521_106784_109301&w=760&h=90&sz=11&bgc=FFFACD&bdc=FFFFFF&tc=000080&lc=000000&dc=000000" name="alimamaifrm" id="alimamaifrm" marginwidth="0" marginheight="0" scrolling="no" width="760" frame height="90">

拿到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所做一切的隻有改變節點屬性、調用上面說的那些方法、響應事件。（轉帖請注明出處：http://blog.csdn.net/lenel）

src="http://p.alimama.com/cpacode.php?t=A&pid=mm_10003521_0_0&w=759&h=80&rn=1&cn=3&ky=CDMA&cid=50008090&bgc=CAF99B&bdc=E6E6E6&tc=E1771E&dc=FFFFFF" style="width: 759px; height: 80px;" name="alimamaifrm" id="alimamaifrm" marginwidth="0" marginheight="0" scrolling="no" width="759" frame height="80">