首先我談?wù)勈鞘裁醋尣僮鞴?jié)點(diǎn)給我們帶來煩惱：

• 編寫ajax程序時(shí)，動態(tài)增刪改頁面元素幾乎是不可避免的，使用屬性innerHTML就是我們經(jīng)常利用的途徑，但在IE中table,thead,tfoot,tbody,tr,col,colgroup,html,title,style,frameset的innerHTML屬性是只讀的，也就是我們不能使用innerHTML更新這些節(jié)點(diǎn)。（這里沒有提到select，其實(shí)select也是不會成功的，估計(jì)是IE的bug）。例子如下：（下面的$id代表document.getElementById）

  <select id="jkit">     <option value="1">jquery</option> </select>

  //執(zhí)行代碼: $id('jkit').innerHTML = '<option>jquery</option>'; //IE下并沒有報(bào)任何錯(cuò)誤，但select一個(gè)option節(jié)點(diǎn)都沒有了。如果你對table使用innerHTML，IE會報(bào)unknown runtime error

  對于這種情況比較常用的兼容方法是外加一個(gè)外層元素，例子如下：

  <div id="jkit">     <select>         <option value="1">jquery</option>     </select> </div>

  //執(zhí)行代碼: $id('jkit').innerHTML = '<select><option value="1">jkit</option></select>'; //這樣IE也成功改變select，但這種做法有個(gè)缺點(diǎn)，如果你對select注冊過事件，這些事件會全部丟失，你要外加代碼來重新注冊事件。

• 在指定的節(jié)點(diǎn)前后新增節(jié)點(diǎn)，這就涉及于節(jié)點(diǎn)定位，節(jié)點(diǎn)創(chuàng)建以及給節(jié)點(diǎn)屬性設(shè)置。使用innerHTML通常只用于覆蓋DOM元素的所有節(jié)點(diǎn)，如果只想改變元素的某個(gè)子節(jié)點(diǎn)，或者只想在某個(gè)子節(jié)點(diǎn)前后增加節(jié)點(diǎn)，仍然使用innerHTML就適得其反，實(shí)現(xiàn)起來很吃力了，而且使用了innerHTML之后，對子節(jié)點(diǎn)注冊過的事件肯定全部丟失掉。不使用innerHTML，那只好使用原生的DOM方法了，但這種代替方案也不好使，看下面例子：

  <select>     <option value="1">jquery</option>     <option value="2">jkit</option>     <option value="3">mars</option> </select>

  //現(xiàn)在我想在jkit之前多加一個(gè)option，用原生的DOM方法實(shí)現(xiàn): var newNode = document.createElement('option'),//新建一個(gè)節(jié)點(diǎn) selector = document.getElementById('jkit3'), /* 也可以用selector.options，但getElementsByTagName更通用。 那用childNodes怎么?最好也不要，對于空白節(jié)點(diǎn)，IE和FF的處理方式不一樣， 就這例子，在FF中，select的firstChild是空白文本節(jié)點(diǎn)， 因?yàn)閟elect和第一個(gè)option之間有換行以及空白字符， FF會為其創(chuàng)建節(jié)點(diǎn)，而IE會忽略 */ options = document.getElementsByTagName('option'); newNode.setAttribute('value','new'); //newNode.setAttribute('text','NewNode');text不支持這樣設(shè)置 //newNode.text = 'NewNode';ie不支持這種方式 newNode.innerHTML = 'NewNode'; selector.insertBefore(newNode,options[1]);//在kit之前插入

  執(zhí)行了上面的代碼之后，select多了一個(gè)option:
  <select>
      <option value="1">jquery</option>
      <option value="new">newNode</option>
      <option value="2">jkit</option>
      <option value="3">mars</option>
  </select>
  新增一個(gè)節(jié)點(diǎn)這要用到6句代碼，現(xiàn)在只是新增一個(gè)節(jié)點(diǎn)，那對于批量操作怎么辦啊？而且原生的DOM方法不怎么好用，名字長而且參數(shù)順序不好記住，用的時(shí)候還得翻文檔（除非你的開發(fā)的天天在操作節(jié)點(diǎn)，天天用這些方法）。有人說，也不怎么麻煩啊，我可以把這6句代碼寫成一個(gè)方法，然后通過傳參來完成批量操作。某種程度上是可以減輕工作量，但看遠(yuǎn)一點(diǎn)，這也是不怎么現(xiàn)實(shí)的。原因有三：其一，每次新增的節(jié)點(diǎn)的屬性不一樣，加的位置不一樣，你還得在方法外面確定新節(jié)點(diǎn)的位置以及在方法內(nèi)部判斷這個(gè)節(jié)點(diǎn)要加那些屬些，下個(gè)節(jié)點(diǎn)要加哪個(gè)屬性，把代碼寫在法方里面只能讓你稍為輕松了些；其二，上面的代碼可以看到，新增一個(gè)節(jié)點(diǎn)，你要排除很多不兼容的實(shí)現(xiàn)方法，由其在設(shè)置屬性方面，每種元素有不一樣的屬性，在兼容方案上就有差異，你針對不同元素寫這樣的方法時(shí)，你必須要記住每種元素的兼容方案，可誰敢說能記住所有兼容方案，而且程序員想在技術(shù)上有所作為，靠的是思維邏輯的提升，而不是記憶，沒必需在這方面下苦功；其三，一個(gè)項(xiàng)目是實(shí)現(xiàn)功能了，下一個(gè)項(xiàng)目再來，有相似的功能，但在細(xì)節(jié)上有差異，按上面的做法，可以想像的到你的代碼重用性非常得低，因?yàn)橐淖兡承┘?xì)節(jié)，你得重新理解曾經(jīng)寫下的邏輯，重新為你細(xì)節(jié)上的不同重構(gòu)代碼，這樣一來，效率太低了，完全談不上敏捷開發(fā)。
  
  看到這樣，估計(jì)讀者都會問，如果不是這樣做，難道開發(fā)真的可以做到復(fù)制粘貼嗎？可以肯定的說，是不可能的。再全面的代碼也不可能滿足實(shí)現(xiàn)了不同包羅所有邏輯。但可以做得復(fù)用性很高，關(guān)鍵在于找出不同邏輯的共性并很好的獨(dú)立出來。上面的操作節(jié)點(diǎn)做法我之所以說復(fù)用性低，是因?yàn)榘巡僮鞴?jié)點(diǎn)跟特定的邏輯混合一起了，就是說特定邏輯的代碼跟操作節(jié)點(diǎn)的代碼關(guān)系太緊密了，到下一個(gè)邏輯又遇上節(jié)點(diǎn)操作時(shí)，再想重用上次的代碼，就必須溫習(xí)上次寫下的邏輯，然后把操作節(jié)點(diǎn)的代碼分離出來后再派上用場。下面介紹的由我開發(fā)的無限層次節(jié)點(diǎn)操作，就很好的從邏輯上獨(dú)立出來，與邏輯無關(guān)。
• 上面的以select為例子，option是select的孩子節(jié)點(diǎn)，我們操作的是兩層的樹型結(jié)構(gòu)，如果再深入一些，操作元素的子孫節(jié)點(diǎn)呢？如何定位元素后代節(jié)點(diǎn)呢？下面還是以原生的dom方法來實(shí)現(xiàn)：

  <table> <tr> <td> <ul> <li></li> <li></li> </ul> </td> <td> <ul> <li></li> </ul> </td> </tr> </table>

  //現(xiàn)在我想在第一個(gè)li之前多加一個(gè)option，用原生的DOM方法實(shí)現(xiàn): newNode = document.createElement('li'), table = document.getElementById('jkit4'), //取li的父節(jié)點(diǎn): uls = table.getElementsByTagName('ul'), /* getElementsByTagName雖然通用，但如果li標(biāo)簽里面嵌套了li，li父節(jié)點(diǎn)的兄弟節(jié)點(diǎn)也有l(wèi)i的話，那么getElementsByTagName都會取到這些節(jié)點(diǎn)，如果你的html結(jié)構(gòu)真有哪么復(fù)雜，取出來結(jié)果后你也很難定位到你想找的li節(jié)點(diǎn)。遇到這情況，你只以通過childNodes一層層往下找，但之前提過childNodes在IE和FF中行為是不致的，所以你還要做兼容處理。*/ lis = table.getElementsByTagName('li'); newNode.innerHTML = 'NewNode'; //在指定位置插入 uls[0].insertBefore(newNode,lis[0]);

  萬變不離其中，跟上面的實(shí)現(xiàn)差不多，遇到復(fù)雜的html結(jié)構(gòu)，可能就是定位比較麻煩，有人說定位不難，我可以在想要找的li上給定一個(gè)id屬性，這樣再怎么復(fù)雜也可以一步定位，但我想問如果要批量操作呢？ 如果table有很多行，每一行第都涉及到這樣的操作，那是不是每個(gè)li給定一人id ？ 是可以，通過循環(huán)指也不怎么難，但我是反對這樣的做法。如果有好的代替方案，我更贊成的是保持干凈的HTML，在我開發(fā)的項(xiàng)目中，用于定位無素屬性我是盡可能少給，因?yàn)槲矣凶銐蜢`活的方案尋節(jié)點(diǎn)。說到干凈的HTML，這里說點(diǎn)題外話。怎么保持HTML的干凈呢？在我開發(fā)中，HTML是不會混雜任何 邏輯性的javascript代碼（只有接收后臺數(shù)據(jù)的一些變量，而且這些變量統(tǒng)一放在HTML的最后面，變量太多的話，以組的形式組織），給元素注冊事件也不會把onclick,onblur等事件代碼嵌進(jìn)html中，查看源碼你不會在HTML中看到任何onclick,onblur等事件代碼。回到這篇文章的主題吧！下面就這三點(diǎn)談?wù)勗趺醋屛覀兊墓ぷ髯兊煤唵危?

接下來要談的是，怎么編寫代碼讓我們的事件變得簡單。先不要理會技術(shù)層面的事件，假如現(xiàn)在有這么一個(gè)JS類，里面有若干方法，這些方法足以讓我們完成上面以及比上面更加復(fù)雜的事件。這個(gè)假設(shè)存在的類，因?yàn)橹挥蟹椒?，沒有具體實(shí)現(xiàn)，我們把它稱為接口。那些下面要講的是定義接口，當(dāng)我們覺得接口中的方法能滿足需求，我們再去實(shí)現(xiàn)它。（這是比較好的開發(fā)流程，先規(guī)劃后行動）

• 實(shí)例化一個(gè)對象
  
  開發(fā)項(xiàng)目中，因?yàn)椴恢篃o限層次節(jié)點(diǎn)操作這個(gè)插件，還有很多，囊括了b2c和b2b常用的插件，比如輪換，分頁，表單驗(yàn)證，表單元素取設(shè)值，批量上傳圖片，事件的重新包裝，事件的批量處理，搜索的自動補(bǔ)全，購物車的ajax操作，以及公共方法的類。所以整個(gè)js會有很多類，每個(gè)類對應(yīng)一個(gè)js變量，這樣一來就有很多公共的js變量，如果開發(fā)的時(shí)候不小心在別的地方聲明了一個(gè)同名的變量，那么這個(gè)類被消失。為了避免這種情況，我把所有類封裝到一個(gè)名為$jkit類中，這樣公共的變量就只有一個(gè)了。插件的類變成了局部，我怎么樣訪問呢？我另外定義一個(gè)$CL的類，里面定義了一些方法，這些方法用于訪問$jkit的類，這樣一來，就算有再多插件，都只會有兩個(gè)公共變量$CL和$jkit。$CL負(fù)責(zé)調(diào)用$jkit。比如$CL中的newObj就用于實(shí)例化插件對象的方法。newObj有兩個(gè)參數(shù)，第一個(gè)指定要實(shí)例化哪個(gè)插件，第二個(gè)參數(shù)用于實(shí)例化這個(gè)插件時(shí)的初始化參數(shù)，以數(shù)組的形式傳參。

  <table id="jkit"> <tbody> <tr> <th class="align">Option</th> <th> <a href="javascript:void(0);">Status</a> </th> <th> <a href="javascript:void(0);">Attribute</a> </th> </tr> <tr> <td></td> <td> <select size="3" name="status"> <option value="all">所有</option> <option value="0">下架</option> </select> </td> <td> <ul> <li id="lior">L</li> <li>XL</li> </ul> </td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table>

  /* 下面代碼實(shí)例化了一個(gè)無限層次節(jié)點(diǎn)操作插件的對象，相當(dāng)于重新構(gòu)造了一棵新的對象樹，新的對象樹帶有新的成員方法。就下面的例子，新對象樹引用為table，table也是新樹的根。它的后代對象由第二個(gè)參數(shù)childs決定 。新樹的根引用是操作其后代對象的入口。重點(diǎn)講解一下第二個(gè)參數(shù)。childs是一個(gè)數(shù)組結(jié)構(gòu)，數(shù)組的第一個(gè)元素為tr，表示為dom根節(jié)點(diǎn)root的孩子節(jié)點(diǎn)tr重新構(gòu)造新對象。如果原dom根節(jié)點(diǎn)root的中沒有tr，將不會構(gòu)造對象；如果tr內(nèi)嵌有tr，不會為內(nèi)嵌的tr構(gòu)造節(jié)點(diǎn)，也就是說只會為孩子節(jié)點(diǎn)構(gòu)造對象，孩子以下不會理會。第二個(gè)元素是td th，為什么有兩個(gè)呢？因?yàn)閠r下的孩子節(jié)點(diǎn)可以是th也可以是td，如果想同時(shí)為th td構(gòu)造新的對象，就要同時(shí)寫進(jìn)去，用空格分開，檢簽的順序不限制。第三個(gè)元素為select ul，為什么這兩個(gè)可以寫在一起？因?yàn)樗麄兾挥谕粚哟蔚模鄬τ诟?jié)點(diǎn)，它們都在第三層。只要同一層次的都可以寫在一起。后面的以此類推，數(shù)量不限，就是無限層次了。新對象樹的層次結(jié)構(gòu)和原dom樹的層次結(jié)構(gòu)是一一對應(yīng)的。 */ root = document.getElementById('category'), childs = ['tr', 'td th', 'select ul', 'li option'], table = $CL.newObj('maNode', [root, childs]);

• 新樹的成員方法，閱讀下面的API時(shí)，請心里緊記兩點(diǎn)，其一，根對象以及后代對象的所有方法都是針對原DOM對象的，比如對新對象調(diào)用del，其實(shí)質(zhì)是刪除了對應(yīng)的原DOM對象；其二，每次調(diào)用對象的增刪改時(shí)，都會重新構(gòu)造相應(yīng)的分枝
  
  

  根對象獨(dú)有方法

  function map(index1,index2,,,indexN){}
  該方法用于尋找后代節(jié)點(diǎn)，table.map(1,1,0)會找到第二行的第二個(gè)單元格的第一個(gè)對象，也就是select對應(yīng)的對象。當(dāng)map只有一個(gè)參數(shù)，并且該參數(shù)為DOM原生對象，那么該方法返回對應(yīng)的新對象。

  function index(DOMElement){}
  該方法返回原生DOMElement對象對應(yīng)的素引，table.index(document.getElementById('lior'))，則返回[1,2,0,0]，結(jié)果是數(shù)組形式

  后代對象獨(dú)有的方法

  function add(index, html){}
  該方法用于增加兄弟節(jié)點(diǎn)，index是相對于調(diào)用該方法的對象所處位置的位移，html就是要插要的節(jié)點(diǎn)，html可以是符合W3c標(biāo)淮的任意html字任串
  table.map(2).add(-1,'<tr><td></td><td></td><td></td></tr>')，在第三行前面新增一行（可以同時(shí)插入多行）
  table.map(2).add(-2,'<tr><td></td><td></td><td></td></tr>')，在第三行前一行前面新增一行
  table.map(0).add(2,'<tr><td></td><td></td><td></td></tr>')，在第一行后一行前面新增一行
  table.map(1).add(0,'<tr><td></td><td></td><td></td></tr>')，index為0表示在當(dāng)前行前面新增一行，并把當(dāng)前行刪除
  table.map(1).add('<tr><td></td><td></td><td></td></tr>')，省略第一個(gè)參數(shù)，這是比較特別的用法，不用理會由哪個(gè)對象用，會在最后一行新增一行
  table.map(1,1).add(1,'<td class="one">新增單元格</td>')，在第二行的第二個(gè)單元格之后新增一個(gè)單元格，再深入的節(jié)點(diǎn)如些類推，只需由map方法來確定節(jié)點(diǎn)就可以了
  

  function del(index){}
  該方法用于刪除兄弟節(jié)點(diǎn)，index是相對于調(diào)用該方法的對象所處位置的位移
  table.map(1).del(),index省略表示刪除自身，這里刪除第二行等同于table.map(1).del(0)
  table.map(0).del(2),這里刪除相對于當(dāng)前調(diào)用對象后面第二行，這里就是刪除第三行
  table.map(2).del(-2),這里刪除相對于當(dāng)前調(diào)用對象前面第二行，這里就是刪除第一行
  table.map(0,1).del([0,-1,1]),如果index是一個(gè)數(shù)組，那么就是刪除指定索引的兄弟節(jié)點(diǎn)，這時(shí)不用理會由哪個(gè)對象調(diào)用，索引為負(fù)數(shù)表示從最后計(jì)起，-1表示最后一個(gè)，這里刪除第一個(gè)，第二個(gè)以及最后一個(gè)th
  table.map(0,1).del(0,-1)，如果有兩個(gè)參數(shù)，表示刪除指定區(qū)間的兄弟節(jié)點(diǎn)，這時(shí)不用理會由哪個(gè)對象調(diào)用，索引為負(fù)數(shù)表示從最后計(jì)起，-1表示最后一個(gè)，這里刪除第一個(gè)至后一個(gè)元素，參數(shù)大的可以作為第一個(gè)參數(shù)，大小順序沒有限制
  

  function getParent(){}
  獲取調(diào)用對象父對象對應(yīng)的原生DOM對象節(jié)點(diǎn)，table.map(0,1).getParent().tagName為tr

  function getHigher(){}
  獲取調(diào)用對象的父對象，table.map(0,1).getHigher.getNode().tagName為tr

  根對象以及后代對象都擁有的方法

  function getNode(){}
  獲取調(diào)用對象對應(yīng)的原生DOM對象節(jié)點(diǎn)，table.getNode().tagName為table，table.map(0,1).getNode()為th

  function sizeOf(){}
  獲取調(diào)用對象子對象的個(gè)數(shù)，table.sizeOf()為3，表示有三行

  function pos(){}
  獲取調(diào)用對象在其所有兄弟節(jié)點(diǎn)的所處的位置，table.map(1).pos()為1

  function html(html){}
  獲取調(diào)用對象對應(yīng)原生dom對象的innerHTML，如果有傳參，為其innerHTML屬性賦值（請不要對innerHTML為只讀的對象賦值）

  function attr(html){}
  獲取調(diào)用對象對應(yīng)原生dom對象的innerHTML，如果有傳參，為其對應(yīng)的屬性賦值（還未實(shí)現(xiàn)）

  function before(index,html){}
  往調(diào)用對象的指定子對象前面添加節(jié)點(diǎn)，index是相對位移
  table.before(1,'<tr><td></td><td></td><td></td></tr>')，第二行前面添加一個(gè)行
  table.map(1,2,0).before(-1,'<li style="color:red;">新增li節(jié)點(diǎn)</li>')，在最后一個(gè)li前面新增一個(gè)li（索引為負(fù)數(shù)表示從最后計(jì)起，-1表示最后一個(gè)）
  table.before('<tr><td></td><td></td><td></td></tr>')，省略第一個(gè)參數(shù)表示在第一個(gè)子對象前面新增節(jié)點(diǎn)

  function append(index,html){}
  往調(diào)用對象的指定子對象后面添加節(jié)點(diǎn)，index是相對位移
  table.append(1,'<tr><td></td><td></td><td></td></tr>')，第二行后面添加一個(gè)行
  table.map(1,2,0).append(-1,'<li style="color:red;">新增li節(jié)點(diǎn)</li>')，在最后一個(gè)li后面新增一個(gè)li（索引為負(fù)數(shù)表示從最后計(jì)起，-1表示最后一個(gè)）
  table.append('<tr><td></td><td></td><td></td></tr>')，省略第一個(gè)參數(shù)表示在第一個(gè)子對象后面新增節(jié)點(diǎn)

  function replace(index,html){}
  用html生成的節(jié)點(diǎn)替代調(diào)用對象的指定子對象對應(yīng)的原生DOM節(jié)點(diǎn)，index是相對位移
  table.replace(2,'<tr><td>新增行</td><td></td><td></td></tr>')，新增一行，并用其替換掉第二行
  table.replace(-1,'<tr><td>新增行</td><td></td><td></td></tr>')，新增一行，并用其替換掉最后一行（索引為負(fù)數(shù)表示從最后計(jì)起，-1表示最后一個(gè)）

  function clean(index){}
  該方法用于刪除兄弟節(jié)點(diǎn)，index是相對于調(diào)用該方法的對象所處位置的位移
  table.clean(),index省略表示刪除第一個(gè)子對象，這里刪除第一行等同于table.map(1).del(0)
  table.clean(2),這里表示刪除第三行
  table.clean(-2),這里表示刪除最后一行
  table.map(0).clean([0,-1,1]),如果index是一個(gè)數(shù)組，那么就是刪除指定索引的子對象，索引為負(fù)數(shù)表示從最后計(jì)起，-1表示最后一個(gè)，這里刪除第一個(gè)，第二個(gè)以及最后一個(gè)th
  table.map(0).clean(0,-1)，如果有兩個(gè)參數(shù)，表示刪除指定區(qū)間的子對象，索引為負(fù)數(shù)表示從最后計(jì)起，-1表示最后一個(gè)，這里刪除第一個(gè)至后一個(gè)元素，參數(shù)大的可以作為第一個(gè)參數(shù)，大小順序沒有限制
  

  如果新樹的根節(jié)點(diǎn)是table，而其子節(jié)點(diǎn)是tbody/thead/tfoot，由于我們更多時(shí)候不會操作這些節(jié)點(diǎn)，而是直接操作tr，所以我做了一個(gè)允許略過這些節(jié)點(diǎn)的處理。當(dāng)然你如果想操作tbody也是可以的，你大可以這樣傳參['tbody thead tfoot','tr','td']；只想取其中一個(gè)的話可以['tbody','tr','td']；直接取tr的話，可以['tr','td']，這種情況會對tbody/thead/tfoot中的所有tr生成新對象

結(jié)束語：回過頭想想，有了這么一個(gè)插件之后，節(jié)點(diǎn)操作不就是小菜一碟，之前提到的操作節(jié)點(diǎn)的三大煩惱就迎刃而解了吧。而且這個(gè)插件與任何邏輯無關(guān)，不需要二次加工，拿起來就可以用了，遇到無法滿足需求的時(shí)候還可以對其進(jìn)行擴(kuò)展。想象有一天開發(fā)流程好像是拼圖游戲，開發(fā)好的插件經(jīng)過組合，一個(gè)項(xiàng)目就出來，那是多么美妙的事啊?？赡芙Y(jié)果并沒有預(yù)期的美好，但是可以預(yù)料得到，向著這個(gè)方向走，事件變得越來越簡單是必然的。因?yàn)槠L了，源碼部分會在下次發(fā)表文章的時(shí)候進(jìn)行詳細(xì)的解講。