正如樂帝在《招聘後臺投遞設置聯動按鈕迭代開發總結》提到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方法用於獲得元素的滾動條相對頂端和左側的距離。
仍延續上例，具體使用方法：
