对于dom的全称大家都知道吧，DOM是Document Object Model的缩写，其意思是文档对象模型。DOM是一种与浏览器、平台、语言无关的接口，使用dom接口很容易的访问页面中所有标准组件。dom操作一般可以分为三个方面即DOM Core(核心)、HTM-Dom和CSS-DOM。
每一个网页都可以用DOM表示出来，每个DOM都可以看作是一棵DOM树。下面的html页面结构可以构建出一棵DOM树，代码：
代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" <title>DOM Demo</title> </head> <body> <p title="选择你最喜欢的水果.">你最喜欢的水果是？</p> <ul> <li title="苹果">苹果</li> <li title="橘子">橘子</li> <li title="菠萝">菠萝</li> </ul> </body> </html>
构建出的DOM树如下：
JQuery中的DOM操作主要对包括：建【新建】、增【添加】、删【删除】、改【修改】、查【查找】【像数据库操作】。下面的DOM操作将围绕上面的DOM树进行学习JQueryDOM操作。
一、查--查找DOM节点
查找节点非常容易，使用选择器就能轻松完成各种查找工作。例：查找元素节点p返回p内的文本内容$("p").text();例：查找元素节点p的属性返回属性名称对应的属性值$("p").attr("title"),返回p的属性title的值。
二、建--新建DOM节点
1、创建元素节点
创建元素节点并且把节点作为<ul>元素的子节点添加到DOM节点树上。先创建元素点，创建元素节点使用Jquery的工厂函数$()来完成，格式如下：$(html),该方法会根据传入的html字符串返回一个DOM对象，并将DOM对象包装成一个JQuery对象后返回。
创建一个元素节点JQuery代码如下：
$li1=$("<li></li>")
代码返回$li1就是一个由DOM对象包装成的JQuery对象。把新建节点添加到DOM树中JQuery代码如下：
$("ul").append($li1);
添加后页面中只能看到<li>元素默认的"·",由于没有为节点添加文本所以只显示默认符号，下面创建文本节点。
PS:append()方法是添加DOM节点方法详见增--添加DOM节点。
2、创建文本节点
使用JQuery的工厂函数$()同样能够创建文本节点，创建文本节点的JQuery代码如下：
$li2=$("<li>苹果</li>");
代码返回$li2就是一个由DOM对象包装成JQuery对象，把新建的文本节点添加到DOM树中JQuery代码如下：
$("ul").append($li2);
添加后页面中能看到"·苹果"，右键查看页面源码发现新加的文本节点没有title属性。下面方法创建带属性的节点。
3、创建属性节点
创建属性节点同元素节点、文本节点一样使用JQuery的工厂函数完成。创建属性节点的JQuery代码如下：
$li3=$("<li title='榴莲'>榴莲</li>");
代码返回$li3也是一个由DOM对象包装成JQuery对象，把新建的属性节点添加到DOM树中JQuery代码如下：
$("ul").append($li3);
添加后页面中能看到"·榴莲"，右键查看页面源码发现新加的属性节点有title='榴莲'属性。
三、增--添加DOM节点
动态新建元素不添加到文档中没有实际意义，将新建的节点插入到文档中有多个方法，如下：append()、appendTo()、prepend()、prependTo()、after()、insertAfter()、before()、insertBefore()。
1、append()方法
append()方法向匹配的元素内部追加内容， 方法如下：
$("target").append(element);
例：
$("ul").append("<li title='香蕉'>香蕉</li>");
该方法查找ul元素，然后向ul中添加新建的li元素。
2、appendTo()方法
appendTo()方法将所有匹配的元素追加到指定的元素中，该方法是append()方法的颠倒[操作主题的颠倒并非操作结果]操作。方法如下：$(element).appendTo(target);例：
$("<li title='荔枝'>荔枝<li>").appendTo("ul");
该方法新建元素li，然后把li添加到查找到的ul元素中。
3、prepend()方法
prepend()方法将每匹配的元素内部前置要添加的元素，方法如下：
$(target).prepend(element);
例：
$("ul").prepend("<li title='芒果'>芒果</li>")
该方法将查找元素ul然后将新建的li元素作为ul子节点，且作为ul的第一个子节点插入到ul中。
4、prependTo()方法
prependTo()方法将元素添加到每一个匹配的元素内部前置，方法如下：
$(element).prependTo();
例：
$("<li title='西瓜'>西瓜</li>").prependTo("ul");
该方法将新建的元素li插入到查找到的ul元素中作为ul的第一个子节元素。
5、after()方法
after()方法向匹配的元素后面添加元素，新添加的元素做为目标元素后的紧邻的兄弟元素。方法如下：
$(target).after(element);
例:
$("p").after("<span>新加段新加段新加段新加段新加段</span>");
方法将查找节点p，然后把新建的元素添加到span节点后面做为p的兄弟节点。
6、insertAfter()方法
insertAfter()方法将新建的元素插入到查找到的目标元素后，做为目标元素的兄弟节点。方法如下：
$(element).insertAfter(target);
例:
$("<p>insertAfter操作</p>").insertAfter("span");
方法将新建的p元素添加到查找到目标元素span后面，做为目标元素后面的第一个兄弟节点。
7、before()方法
before()方法在每一个匹配的元素之前插入，做为匹配元素的前一个兄弟节点。方法如下:
$(target).before(element);
例：
$("p").before("<span>下面是个段落</span>");
before方法查找每个元素p，将新建的span元素插入到元素p之前做为p的前一个兄弟节点。
8、insertBefore()方法
insertBefore()方法将新建元素添加到目标元素前，做为目标元素的前一个兄弟节点，方法如下:
$(element).insertBefore(target);
例:
$("<a href='#'>锚</a>").insertBefore("ul");
insertBefore()新建a元素，将新建的a元素添加到元素ul前，做为ul的前一个兄弟节点。
增加元素的方法前四个是添加到元素内部，后四个是添加到元素外部的操作，有这些方法可以完成任何形式的元素添加。
四、删--删除DOM节点操作
如果想要删除文档中的某个元素JQuery提供了两种删除节点的方法：remove()和empty();
1、remove()方法