一般来说，DOM操作分为：DOM core（核心）、HTML-DOM和CSS-DOM。
1、DOM Core
DOM Core并不专属于javascript，任何一种支持dom操作的程序都可以使用它。
利用DOM Core来获取表单对象的方法：
document.getElementsByTagName("form");
2、HTML-DOM
它主要是提供一些更简明的符号来描述各种html元素的属性。
document.forms;
3、CSS-DOM
改变style的各种属性。
element.style.color="red";
接下来我们来学习jquery中的DOM操作：
html代码如下：
<body>
<p title="你最喜欢的口红">你最喜欢的口红牌子是？</p>
<ul>
<li title="阿玛尼">阿玛尼</li>
<li title="YSL">YSL</li>
<li title="Dior">Dior</li>
<li title="香奈儿">香奈儿</li>
</ul>
</body>
1、查找节点
1.1查找元素结点
获取元素节点并打印出它的内容：
var $li = $("ul li:eq(1)"); //获取第二个li
var li_txt = $li.text();
alert(li_txt);
在这里需要注意的是jquery代码放的位置，如果我们把jquery代码放到<head>里面会是怎样的结果？
这是因为jquery是在html渲染完成后才进行的，放到head里面就找不到了。
1.2、查找属性结点
利用jquery选择器找到需要的元素之后，就可以使用attr()方法来获取它的各种属性的值。
var $para = $("p");
var p_txt = $para.attr("title");
alert(p_txt);
2、创建节点
2.1:、创建元素节点
使用jquery中的append()函数将创建后的元素加入文档。
var $li_1 = $("<li>创建的节点1</li>");
var $li_2 = $("<li>创建的节点2</li>");
$("ul").append($li_1);
$("ul").append($li_2);
注意：当创建单个元素时：要注意闭合标签和使用标准的XHTML格式。
例如，创建一个<p>元素，可以用$("<p/>")或者$("<p></p>")，但不要使用$("<p>")或者大写的$("<P>")。
2.2、创建文本节点
其实在上面的代码示例中，我们已经创建了文本节点，我们将他们修改为和我们主题相关的文本就行。
var $li_1 = $("<li>纪梵希</li>");
var $li_2 = $("<li>MAC</li>");
$("ul").append($li_1);
$("ul").append($li_2);
2.3、创建属性节点
var $li_1 = $("<li title='纪梵希'>纪梵希</li>");
var $li_2 = $("<li title='MAC'>MAC</li>");
$("ul").append($li_1);
$("ul").append($li_2);
3、插入节点
3.1、append()
向每个匹配元素内部追加内容
3.2、appendTo()
将所有匹配的元素追加到指定元素中。实际上，使用该方法颠倒$(A).append(B)常规操作，他是将A追加到到B中。
3.3、prepend()
向每个匹配的元素内部前置内容
3.4、prependTo()
$(A).prependTo(B)将A前置到B中
3.5、after()
在每个匹配元素之后插入内容
3.6、insertAfter()
$(A).insertAfter(B),将A插入到B后面
3.7、before()
在每个匹配元素之前插入内容
3.8、insertBefore()
$(A).insertBefore(B)将A插入到B前面
4、删除节点
4.1、remove()方法
$("ul li:eq(4)").remove(); //将第五个元素删除
remove()方法还可以通过传递参数来选择性地删除元素：
$("ul li").remove("li[title!=MAC]");
4.2、detach()方法
detach()和remove()一样，也是从DOM中去掉所有匹配元素。但这个方法不会把匹配元素从jquery对象中删除，因而可以在将来在使用这些匹配的元素。所有绑定的事件和附加数据等都会留下来。
$("ul li").click(function () {
alert($(this).html());
})
var $li = $("ul li:eq(1)").detach();
$li.appendTo(ul);
但如果是remove()就没有这样的效果了。
4.3、empty()方法
严格意义上将empty不是删除节点而是清空节点，他能清空元素中的所有后代节点。
$("ul li:eq(5)").empty();
再来看下控制台里面的代码有怎样的变化：
可以看到文本元素消失了。
5、复制节点
复制节点用clone()方法来实现。
$("ul li").click(function () {
$(this).clone().appendTo("ul"); /*复制当前节点并添加到ul中*/
})
6、替换元素
替换元素时在jquery中使用replaceWith()和replaceAll()。
replaceWith()将所有匹配元素都替换成指定的HTML或者DOM元素。
$("p").replaceWith("<strong>你最不喜欢的口红是？</strong>");
replaceAll()与replaceWith()作用相同，只是位置需要改变下。
$("<strong>你最不喜欢的口红是？</strong>").repalceAll("p");
7、属性操作
7.1、获取和设置属性
刚刚前面有说到attr()；
var $para = $("p");
var p_txt = $para.attr("title");
7.2、删除属性
用removeAttr()方法实现。
$("p").removeAttr("title");
8、遍历节点
8.1、children()方法
用于匹配元素的所有子元素集合。
var $body = $("body").children();
var $p =$("p").children();
var $ul = $("ul").children();
alert($body.length);
alert($p.length);
alert($ul.length);
for(var i = 0,len = $ul.length; i <len; i++){
alert($ul[i].innerHTML);
}
8.2、next()方法
该方法将取得匹配元素后面紧相邻的同辈元素。
例如 var $p1 = $("p").next();取得的元素便是所有的<ul>中的元素。
8.3、prev()方法
获得该元素紧相邻的前面的元素。
8.4、siblings()方法
该方法用于取得匹配元素前后所有的同辈元素；
例如var $p2 = $("p").sibling()就是获得<p>元素所有的同辈元素。
8.5、closeset()方法
取得最近的匹配元素。