DOM操作的分类：DOM CORE（核心）、HTML-DOM和CSS-DOM
1. DOM Core
DOM Core并不专属于javascript，任何一种支持DOM的程序设计语言都可以使用它。
它的用途并非仅限于处理网页，也可以用来处理任何一种使用标记语言编写出来的文档，如XML.
Javascript中的getElementById(),getElementByTagName(),getAttribute()和setAttribute()方法，都是dom core的组成部分。
2. HTML_DOM
使用HTML_DOM来获取表单对象的方法
Document.forms
使用HTML_DOM来获取某元素的src属性的方法
Element.src
3. CSS_DOM
CSS_DOM是针对CSS的操作。在javascript中，CSS-DOM技术的主要作用是获取和设置style对象的各个属性。通过改变style对象的各种属性，可以使网页呈现出各种不同的效果。
Element.style.color = “red”;
jQuery作为javascript库，继承并发扬了javascript对DOM对象的操作的特性，使开发人员能方便的操作DOM对象。
jQuery 的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 id="Head1">
<title></title>
<script src="http://img.poluoluo.com/jslib/jquery/jquery.js" type="text/javascript"></script>
<style type="text/css">
.chapter
{
width: 42em;
}
a.link
{
text-decoration: none;
}
span.footnote
{
font-style: italic;
font-family: "Times New Roman" , Times, serif;
display: block; /*使其变成一块一块的*/
margin: 1em 0;
}
.text-reference
{
font-weight: bold;
}
#notes li
{
margin: 1em 0;
}
#notes
{
margin-top: 1em;
border-top: 1px solid #00ff00;
}
#footer
{
margin-top: 1em;
border-top: 1px solid #dedede; /*上边线*/
}
.inhabitants
{
border-bottom: 1px solid #dedede;
}
.pulled-wrapper
{
background: url(pq-top.jpg) no-repeat left top;
position: absolute;
width: 160px;
right: -180px; /* 定位注释框的横向位置*/
padding-top: 18px;
}
.pulled
{
background: url(pq-bottom.jpg) no-repeat left bottom;
position: relative;
display: block;
width: 140px;
padding: 0 10px 24px 10px;
font: italic 1.4em "Times New Roman" , Times, serif;
}
</style>
<script type="text/javascript">
//为每个p元素添加属性
$(document).ready(function() {
$("p").each(function(index) {
var currentClass = $(this).attr("class");
$(this).attr("class", currentClass + " inhabitants");
});
});
//动态为元素添加属性
$(document).ready(function() {
$("div.chapter a[href*=cnblogs]").each(function(index) { //each好似for循环，他会循环集合中所有的对象，参数一的方法是对每一个对象都执行的操作，index是对象的索引
var $thisLink = $(this);
$(this).attr({
"rel": "subsection ",
"id": "blogslink-" + index,
"title": "更多" + $thisLink.text() + "的资料在冯瑞涛的博客",
"class": "link"
});
});
});
//插入返回到上面连接
$(document).ready(function() {
$("<a id="top" name="top">新年好</a>").prependTo("body"); //初始化到body
$("div.chapter p:gt(0)").after("<a href="#top">返回到上面</a>");
//下行等价上面的哪行代码 gt代表从第几个元素后面的p开始
//$("<a href="#top">返回到上面</a>").insertAfter("div.chapter p:gt(0)");
});
//
$(document).ready(function() {
$("<ol id="notes"></ol>").insertAfter("div.chapter");
$("span.footnote").each(function(index) {
$(this)
//为每一个footnote在前面动态添加数字连接（1，2）
.before("<a href="#foot-note-" + (index + 1) + "" id="context-" + (index + 1) + "" class="context"><sup>" + (index + 1) + "</sup></a>")
//将footnote插入到ol标签中（不带上面的连接，仅span），就是移动标签，带有appendTo代表将自己追加到其他元素中
.appendTo("#notes")
// 向指定元素内容的后面追加标签
.append(" (<a href="#context-" + (index + 1) + "">内容</a>)")
//将this包含在wrap的第一个参数中表示的标记中
.wrap("<li id="foot-note-" + (index + 1) + ""></li>");
});
});
$(document).ready(function() {
$("span.pull-quote").each(function(index) {
//获得父元素p
var $parentParagraph = $(this).parent("p");
//设置p标签为相对定位，否则无法对其位置进行操作
$parentParagraph.css("position", "relative");
//复制一份拷贝，span.pull-quote clone(false);代表仅复制标记本身不复制其内容
var $clonedCopy = $(this).clone();
$clonedCopy
.addClass("pulled") //添加样式，拥有下面的背景
.find("span.drop") //找到其中的span.drop，此时对象已经是span.drop了
.html("…") //为span.drop 设置html文档
.end() //返回没有被改变前的那个jQuery对象状态
.prependTo($parentParagraph) //将这个span追加到指定的元素中去
.wrap("<div class="pulled-wrapper"></div>"); //再其本身包含在div内容中<div><span>
var clonedText = $clonedCopy.text(); //获得文本,去掉了html
$clonedCopy.html(clonedText); //将文本以Html的形式插入到内容中，相当于替换html内容
});
});
</script>
</head>
<body>
<form id="form1">
<span class="footnote">佳月</span> <span class="footnote">Terry.Feng.C</span> <span
class="footnote">冯瑞涛</span>
<div class="chapter">
<p>
1. <a href="http://terryfeng.cnblogs.com">jQuery</a>动态为链接添加属性。</p>
<p>
2. <a href="http://terryfeng.cnblogs.com">CSLA.Net</a>业务层最强框架。<span class="pull-quote">CSLA注释<span class="drop">省略部分</span></span></p>
<p>
3. <a href="http://terryfeng.cnblogs.com">DNN</a>免费开源的CMS系统。<span class="pull-quote">DNN注释<span class="drop">省略部分</span></span></p>
</div>
<div id="footer">
冯瑞涛的博客</div>
</form>
</body>
</html>