**正如樂帝在[《招聘后臺投遞設置聯動按鈕迭代開發總結》](http://blog.csdn.net/yingyiledi/article/details/41323175)提到web前端js開發分為頁面間通信、頁面內交互、后端接口存取數據的操作。對于一個頁面開發核心在于對DOM的操作。別忘了網頁從歷史上和本質上來說都是在線的文檔而已。DOM操作是對文檔的操作，自然而然就成為網頁js開發的核心了。** **傳統上來說，DOM操作分為三類：DOM core、HTML-DOM、CSS-DOM。** - DOM core在任何使用DOM程序設計語言都可以使用。常見的javascript方法如getElementById()、getElementsByClassName()、getAttribute()、setAttribute()都屬于此類。 - HTML-DOM是專門使用js為HTML編寫腳本時用到的方法，常見的簡明如element.src寫法。寫法上相對于DOM core要簡潔不少。 - CSS-DOM主要用于獲取和設置style對象各種屬性。 **Jquery中DOM操作，樂帝將其分兩種：HTML-DOM、CSS-DOM。** **整個DOM操作都可以從一句典型HTML語句展開，上帝說要有光，就有了hmtl元素，接著就有了附加的各種可預見的操作。如下圖：** **** **一、jquery中的HTML-DOM操作** **1.節點操作** **（1）插入節點** **對于節點的插入操作方法可以分兩類，類似中國小學教育“把”字句與“被”字句用法，根據前面jquery對象的主被動劃分。** **** **（2）刪除節點** **主要涉及兩個方法的區別：remove方法與detach方法。這兩個方法區別在于使用remove方法刪除節點后，再次添加此節點引用，原本綁定在此節點的事件、數據都會失效。而后者可以保留下來。** **下面舉個例子：** ~~~ <input type="checkbox" id="cr"/> <label for="cr">我已經閱讀了上面制度.</label> ~~~ ~~~ $(document).ready(function(){ var $cr = $("#cr"); //jQuery對象 var cr = $cr.get(0); //DOM對象，獲取 $cr[0] $cr.click(function(){ if(this.checked){ //DOM方式判斷 alert("感謝你的支持!你可以繼續操作!"); } }) }); ~~~ **上述代碼后，分別加入以下代碼：** ~~~ // var removeCr = $cr.remove(); var removeCr =$cr.detach(); $("body").append(removeCr); ~~~ **當采用remove方法刪除節點，再對其引用添加時，沒有單擊事件被綁定。而采用detach方法刪除節點，再添加，仍然保留了單擊事件。當然涉及刪除再添加并需要綁定事件的場景，目前項目中還沒有遇到。** **（3）復制節點** **復制節點采取clone方法，而clone方法參數如果為true的話，除了復制節點外，節點上綁定的事件也會一并復制。仍然延續上述例子，添加如下代碼：** ~~~ // var cloneCr = $cr.clone(); var cloneCr = $cr.clone(true); $("body").append(cloneCr); ~~~ **當有參數true時，被復制的元素的綁定方法也一并被被復制了，而沒有參數則沒有綁定方法被復制。** **（4）替換節點** **替換節點有兩種方法：replaceWith方法、replaceAll方法。這兩個方法也滿足上述主動、被動關系。** **仍然延續上述代碼，使用例子：** ~~~ $cr.replaceWith("<p>hi</p>"); ~~~ **此時替換的節點沒有綁定事件，需要重新綁定事件。** **（5）包裹節點** **包裹節點又分為兩類：外部包裹方法、內部包裹方法。區別在于是對選定元素進行包裹，還是對其內部元素包裹（wrapInner方法）。外部包裹又分為整個用一個方法包裹（wrapAll方法），還是每個選定元素都包裹（wrap方法）。** **對下述例子，分別采用三種方法：** ~~~ <strong title="選擇你最喜歡的水果." >你最喜歡的水果是?</strong> <strong title="選擇你最喜歡的水果." >你最喜歡的水果是?</strong> <ul> <li title='蘋果'>蘋果</li> <li title='橘子'>橘子</li> <li title='菠蘿'>菠蘿</li> </ul> ~~~ ~~~ // $("strong").wrap("<b></b>"); // $("strong").wrapAll("<b></b>"); $("strong").wrapInner("<b></b>"); ~~~ **通過查看HTML結構，可知包裹的區別。** **（6）遍歷節點** **遍歷的方法可從dom結構為樹形結構理解。從樹的上到下，分別會用到上級元素：祖先元素獲取方法（parents方法）、父級元素獲取方法（parent方法）；同級元素獲取的三個方法：next方法、prev方法、sibling方法、closest方法；子級元素方法：children方法。** **** **2.屬性操作** **屬性操作主要用到一個attr方法，用于獲取設置屬性；一個removeAttr方法用于移除屬性。** **仍然延續上述例子，輸入以下代碼：** ~~~ $("li:eq(0)").attr("title","apple"); $("li:eq(0)").removeAttr("title"); ~~~ **可知屬性操作方法的使用。** **3.樣式操作** **這里的樣式操作主要從class增刪查找，連帶改變class定義的css樣式。** **仍延續上述例子，添加一個css類：** ~~~ .test{ color: red; } ~~~ ** ?對上述例子分別采用四種操作：** ** ~~~ $("li:eq(0)").addClass("test"); var hasClass = $("li:eq(0)").hasClass("test"); // $("li:eq(0)").toggleClass("test"); $("li:eq(0)").removeClass("test"); ~~~ **上述操作分別代表添加類、判斷類是否存在、移除或添加類的切換、移除類。** **3.獲取各種元素的值** **這里主要涉及到val方法。無論是文本框、下拉列表還是單選框，都可以返回元素值。這個統一性使得再遇到此類情況，不用再現查。** **二、CSS-DOM操作** **這里主要涉及三類方法：css方法、寬高設置的方法、定位的幾個方法。** **css獲得高度與height獲得高度區別在于，css獲得的是與樣式設置有關的高度，而height獲得的是元素整體高度。不會受樣式影響。** **offset方法是獲取元素相對當前視窗的相對便宜，返回對象包含兩個屬性，top與left，只對可見元素有效。scrollTop方法與scrollLeft方法用于獲得元素的滾動條相對頂端和左側的距離。** **仍延續上例，具體使用方法：** ****