getElementsByClassName()

　　為了從一大堆HTML代碼中找出我們的樹狀菜單(也許有多個)，我們先來實現(xiàn)一個通過className找DOM節(jié)點的方法：getElementsByClassName。這是對瀏覽器自有DOM方法的一個簡單但實用的擴充。

　　此方法有兩個參數(shù)：ele指出以哪個DOM節(jié)點為根節(jié)點尋找（也就是說只找ele的子節(jié)點），className指出符合條件的節(jié)點的class屬性中必須包含怎樣的className。它的返回值是一個數(shù)組，存放了所有符合條件的節(jié)點。

function getElementsByClassName(ele,className) {
 //獲取所有子節(jié)點
 if(document.all){
  var children = ele.all;
 }else{
  var children = ele.getElementsByTagName('*');
 }
 //遍歷子節(jié)點并檢查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;
}

　　最前面的一個if-else語是為了兼容IE5（IE5不能運行document.getElementsByTagName('*')）。需要注意的是千萬不要用瀏覽器檢測的方法來寫腳本，而應(yīng)該直接使用將要用到的語句來測試是否可以執(zhí)行，如果返回值為null或undefined，那再換一種方法。這樣的腳本可以有更好的兼容性，也更健壯。

　　elements[elements.length] = child;，這句同樣是為了兼容IE5才沒有使用數(shù)組的push方法。如果你一定要使用push方法，那么可以在執(zhí)行getElementsByClassName()之前先重載一遍push方法。代碼如下：

Array.prototype.push = function(value){
 this[this.length] = value;
}

　　注：原本我希望getElementsByClassName也能像push方法一樣寫，比如HTMLElement.prototype.getElementsByClassName = ...。不過實際操作的時候發(fā)現(xiàn)在運行時HTMLElement這個對象并不是固定的，每種tag似乎都不一樣，只能作罷。如果你有解決方案請告訴我，謝謝。

　　現(xiàn)在我們就可以方便地找出頁面上所有的樹狀菜單了：

var trees	= getElementsByClassName(document,'TreeView');
for(var i=0;i<trees.length;i++){
 alert('我是第' + i + '個樹狀菜單');
 //在這里可以更細致地處理每一個樹狀菜單
}

　　最后把上面這幾句加到window.onload事件中運行，以便文檔一加載完就對樹狀菜單進行初始化。完整的代碼請查看下面例子的源代碼。

　　查看效果（例1）

區(qū)分樹枝與樹葉

　　在上一篇中我們說到樹枝和樹葉的區(qū)別就是這個節(jié)點有沒有子節(jié)點，所以判斷樹枝和樹葉的方法也可以從這個角度來考慮。一個比較直觀的方法就是遍歷整個樹狀菜單的DOM樹（注意這里兩個“樹”的區(qū)別），看看每個節(jié)點是不是擁有子節(jié)點，如果有的話我們就給這個節(jié)點一個專門的class以示區(qū)分。我們這里用一種比較取巧的方法，就是判斷各個節(jié)點的innerHTML中有沒有出現(xiàn)字符串'<ul>'。如果有的話，那么很顯然它擁有一個或多個子節(jié)點。

var trees	= getElementsByClassName(document,'TreeView');
for(var i=0;i<trees.length;i++){
 //先把所有的節(jié)點找出來
 var nodes = trees[i].getElementsByTagName('LI');
 //判斷各個節(jié)點是否有子節(jié)點
 for(var j=0;j<nodes.length;j++){
  if(nodes[j].innerHTML.toLowerCase().indexOf('<ul>') > -1)
   nodes[j].className += 'Open';
 }
}

　　這里給每個樹枝加了一個className：Open，因為我們現(xiàn)在還不能打開關(guān)閉樹枝，所以只要是樹枝那就是open的。當(dāng)然后面我們會用到Close的：）。相應(yīng)的修改一下CSS，給樹枝一個帶減號的圖標，表示它是打開的：

.TreeView li.Open{
 background:transparent url(opened.gif) 12px 2px no-repeat;
}

　　查看效果（例2）

高亮選中項

　　接下來實現(xiàn)把當(dāng)前選中的樹枝（或樹葉）高亮的功能。有兩個時候需要高亮：菜單初始化的時候和點擊某個菜單項的時候。

　　初始化的時候比較容易處理，直接給需要高亮的節(jié)點一個特殊的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;/*去除下劃線*/
 cursor:default;/*讓光標變?yōu)槠胀^，假裝是不能點的^_^*/
 padding:0 2px;/*為了美觀考慮，也可以不要這句*/
}

　　查看效果（例3）

　　這里有幾點可能還需要補充說明一下：

1. 選擇器（Selector）的前面為什么要加上.TreeView，這不是冗余代碼嗎？
   在這個例子中確實是冗余代碼，但在實際項目中，一個頁面上可能會有各種不同的組件，比如還有一個菜單，被選中的菜單項也用.Selected來表示。這時就需要在選擇符的前面先指出是什么組件的選中項以防沖突。當(dāng)然還有其他的解決辦法，比如這里的類不取名為Selectd，改為TreeSelected或者其他什么的，但是這樣做人為的把命名方案復(fù)雜化了，我個人不推薦這樣做。
2. 選擇器為什么分作四行來寫？
   因為我們之前已經(jīng)設(shè)置過a的樣式，為了提高優(yōu)先級重載舊的樣式，所以需要指定a的四種偽狀態(tài)（還有其他提高優(yōu)先級的辦法，關(guān)于優(yōu)先級算法，在《網(wǎng)站重構(gòu)》一書中有詳細說明）。
3. Selected為什么要用在li上，而不直接用在a上？
   這又是一個不太容易說明白的地方，因為很大程度上它是一種個人習(xí)慣，只是我個人覺得這樣做更合適一些。事實上，寫在li上或a上都是可以的，至少看上去（表現(xiàn)層的視角）不會有太大的區(qū)別，但是如果你從“表現(xiàn)層”中跳出來，站在“結(jié)構(gòu)層”的視角來看，無論這個菜單的樹結(jié)構(gòu)還是DOM結(jié)構(gòu)，一個節(jié)點都是由一個li來表達的，a只不過是這個節(jié)點內(nèi)的更細節(jié)的部分。雖然我最終是希望給a指定一個特殊的樣式（為什么不指定給li？你可以自己試一下），但從XHTML結(jié)構(gòu)來說，這個class="Selected"還是寫在li上更合適。（上帝保佑我說清楚了……）

下一篇講什么？

　　這篇文章是我第一次加入Javascript內(nèi)容，不是很清楚是說淺了還是說深了，請大家在右邊留言告訴我你的想法。從下一篇開始，我們開始進入部署鼠標事件和響應(yīng)鼠標事件方面的內(nèi)容。也許從下下篇開始再加入一些Javascript面向?qū)ο缶幊痰膬?nèi)容，待定待定……h(huán)ehe^_^

最新評論