**正如乐帝在[《招聘后台投递设置联动按钮迭代开发总结》](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方法用于获得元素的滚动条相对顶端和左侧的距离。** **仍延续上例，具体使用方法：** ****