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>