從這篇開(kāi)始，你需要擁有一些Javascript和DOM相關(guān)的知識才能順利地學(xué)習下去。由于Javascript和DOM都不是三言?xún)烧Z(yǔ)可以說(shuō)完的東西，如果你對它們還不熟悉，請先到這里學(xué)習一下再繼續：Javascript在線(xiàn)教程（英文）、DOM在線(xiàn)教程（英文）。
為了從一大堆HTML代碼中找出我們的樹(shù)狀菜單(也許有多個(gè))，我們先來(lái)實(shí)現一個(gè)通過(guò)className找DOM節點(diǎn)的方法：getElementsByClassName。這是對瀏覽器自有DOM方法的一個(gè)簡(jiǎn)單但實(shí)用的擴充。
此方法有兩個(gè)參數：ele指出以哪個(gè)DOM節點(diǎn)為根節點(diǎn)尋找（也就是說(shuō)只找ele的子節點(diǎn)），className指出符合條件的節點(diǎn)的class屬性中必須包含怎樣的className。它的返回值是一個(gè)數組，存放了所有符合條件的節點(diǎn)。
function getElementsByClassName(ele,className) {//獲取所有子節點(diǎn)if(document.all){var children = ele.all;}else{var children = ele.getElementsByTagName(‘*‘);}//遍歷子節點(diǎn)并檢查className屬性var elements = new Array();for (var i = 0; i < children.length; i++) {var child = children[i];var classNames = child.className.split(‘ ‘);for (var j = 0; j < classNames.length; j++) {if (classNames[j] == className) {elements[elements.length] = child;break;}}}return elements;} 最前面的一個(gè)if-else語(yǔ)是為了兼容IE5（IE5不能運行document.getElementsByTagName(‘*‘)）。需要注意的是千萬(wàn)不要用瀏覽器檢測的方法來(lái)寫(xiě)腳本，而應該直接使用將要用到的語(yǔ)句來(lái)測試是否可以執行，如果返回值為null或undefined，那再換一種方法。這樣的腳本可以有更好的兼容性，也更健壯。
elements[elements.length] = child;，這句同樣是為了兼容IE5才沒(méi)有使用數組的push方法。如果你一定要使用push方法，那么可以在執行getElementsByClassName()之前先重載一遍push方法。代碼如下：
Array.prototype.push = function(value){this[this.length] = value;} 注：原本我希望getElementsByClassName也能像push方法一樣寫(xiě)，比如HTMLElement.prototype.getElementsByClassName = ...。不過(guò)實(shí)際操作的時(shí)候發(fā)現在運行時(shí)HTMLElement這個(gè)對象并不是固定的，每種tag似乎都不一樣，只能作罷。如果你有解決方案請告訴我，謝謝。
現在我們就可以方便地找出頁(yè)面上所有的樹(shù)狀菜單了：
var trees = getElementsByClassName(document,‘TreeView‘);for(var i=0;i<trees.length;i++){alert(‘我是第‘ + i + ‘個(gè)樹(shù)狀菜單‘);//在這里可以更細致地處理每一個(gè)樹(shù)狀菜單} 最后把上面這幾句加到window.onload事件中運行，以便文檔一加載完就對樹(shù)狀菜單進(jìn)行初始化。完整的代碼請查看下面例子的源代碼。
在上一篇中我們說(shuō)到樹(shù)枝和樹(shù)葉的區別就是這個(gè)節點(diǎn)有沒(méi)有子節點(diǎn)，所以判斷樹(shù)枝和樹(shù)葉的方法也可以從這個(gè)角度來(lái)考慮。一個(gè)比較直觀(guān)的方法就是遍歷整個(gè)樹(shù)狀菜單的DOM樹(shù)（注意這里兩個(gè)“樹(shù)”的區別），看看每個(gè)節點(diǎn)是不是擁有子節點(diǎn)，如果有的話(huà)我們就給這個(gè)節點(diǎn)一個(gè)專(zhuān)門(mén)的class以示區分。我們這里用一種比較取巧的方法，就是判斷各個(gè)節點(diǎn)的innerHTML中有沒(méi)有出現字符串‘<ul>‘。如果有的話(huà)，那么很顯然它擁有一個(gè)或多個(gè)子節點(diǎn)。
var trees = getElementsByClassName(document,‘TreeView‘);for(var i=0;i<trees.length;i++){//先把所有的節點(diǎn)找出來(lái)var nodes = trees[i].getElementsByTagName(‘LI‘);//判斷各個(gè)節點(diǎn)是否有子節點(diǎn)for(var j=0;j<nodes.length;j++){if(nodes[j].innerHTML.toLowerCase().indexOf(‘<ul>‘) > -1)nodes[j].className += ‘Open‘;}} 這里給每個(gè)樹(shù)枝加了一個(gè)className：Open，因為我們現在還不能打開(kāi)關(guān)閉樹(shù)枝，所以只要是樹(shù)枝那就是open的。當然后面我們會(huì )用到Close的：）。相應的修改一下CSS，給樹(shù)枝一個(gè)帶減號的圖標，表示它是打開(kāi)的：
.TreeView li.Open{background:transparent url(opened.gif) 12px 2px no-repeat;}接下來(lái)實(shí)現把當前選中的樹(shù)枝（或樹(shù)葉）高亮的功能。有兩個(gè)時(shí)候需要高亮：菜單初始化的時(shí)候和點(diǎn)擊某個(gè)菜單項的時(shí)候。
初始化的時(shí)候比較容易處理，直接給需要高亮的節點(diǎn)一個(gè)特殊的Class即可，比如“Selected”：
.TreeView li.Selected a:link,.TreeView li.Selected a:visited,.TreeView li.Selected a:hover,.TreeView li.Selected a:active{background-color:#05F;color:#FFF;text-decoration:none;/*去除下劃線(xiàn)*/cursor:default;/*讓光標變?yōu)槠胀^，假裝是不能點(diǎn)的^_^*/padding:0 2px;/*為了美觀(guān)考慮，也可以不要這句*/}這里有幾點(diǎn)可能還需要補充說(shuō)明一下：
.TreeView，這不是冗余代碼嗎？.Selected來(lái)表示。這時(shí)就需要在選擇符的前面先指出是什么組件的選中項以防沖突。當然還有其他的解決辦法，比如這里的類(lèi)不取名為Selectd，改為T(mén)reeSelected或者其他什么的，但是這樣做人為的把命名方案復雜化了，我個(gè)人不推薦這樣做。 a的樣式，為了提高優(yōu)先級重載舊的樣式，所以需要指定a的四種偽狀態(tài)（還有其他提高優(yōu)先級的辦法，關(guān)于優(yōu)先級算法，在《網(wǎng)站重構》一書(shū)中有詳細說(shuō)明）。 Selected為什么要用在li上，而不直接用在a上？li上或a上都是可以的，至少看上去（表現層的視角）不會(huì )有太大的區別，但是如果你從“表現層”中跳出來(lái)，站在“結構層”的視角來(lái)看，無(wú)論這個(gè)菜單的樹(shù)結構還是DOM結構，一個(gè)節點(diǎn)都是由一個(gè)li來(lái)表達的，a只不過(guò)是這個(gè)節點(diǎn)內的更細節的部分。雖然我最終是希望給a指定一個(gè)特殊的樣式（為什么不指定給li？你可以自己試一下），但從XHTML結構來(lái)說(shuō)，這個(gè)class="Selected"還是寫(xiě)在li上更合適。（上帝保佑我說(shuō)清楚了……） 這篇文章是我第一次加入Javascript內容，不是很清楚是說(shuō)淺了還是說(shuō)深了，請大家在右邊留言告訴我你的想法。從下一篇開(kāi)始，我們開(kāi)始進(jìn)入部署鼠標事件和響應鼠標事件方面的內容。也許從下下篇開(kāi)始再加入一些Javascript面向對象編程的內容，待定待定……hehe^_^
聯(lián)系客服
