DOM操作的分類：
DOM CORE（核心）、HTML-DOM和CSS-DOM
1. DOM Core
DOM Core并不專屬于javascript，任何一種支持DOM的程序設(shè)計(jì)語言都可以使用它。
它的用途并非僅限于處理網(wǎng)頁，也可以用來處理任何一種使用標(biāo)記語言編寫出來的文檔，如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技術(shù)的主要作用是獲取和設(shè)置style對象的各個(gè)屬性。通過改變style對象的各種屬性，可以使網(wǎng)頁呈現(xiàn)出各種不同的效果。
Element.style.color = “red”;
jQuery作為javascript庫，繼承并發(fā)揚(yáng)了javascript對DOM對象的操作的特性，使開發(fā)人員能方便的操作DOM對象。
元素的操作可以按下列來分類：查找、創(chuàng)建、插入、刪除、復(fù)制、包裹、屬性操作、
查找：利用上面的jQuery選擇器
創(chuàng)建：主要包括創(chuàng)建元素節(jié)點(diǎn)和創(chuàng)建文本節(jié)點(diǎn)、創(chuàng)建屬性節(jié)點(diǎn)。
（1）創(chuàng)建元素節(jié)點(diǎn) $(html)
Var aa=$("<li></li>");
（2）創(chuàng)建文本節(jié)點(diǎn) Var aa=$("<li>你好</li>");
（3）創(chuàng)建屬性節(jié)點(diǎn) Var aa=$("<li title='bbb'>你好</li>");
插入：光動(dòng)態(tài)的創(chuàng)建節(jié)點(diǎn)沒上面用處，還要能夠?qū)?chuàng)建的動(dòng)態(tài)插入。
刪除：
（1）empty()：刪除匹配的元素集合中所有的子節(jié)點(diǎn)。
（2）remove([expr])：從DOM中刪除所有匹配的元素。
（3）detach([expr])：從DOM中刪除所有匹配的元素。
復(fù)制：
（1）clone()：克隆匹配的DOM元素并且選中這些克隆的副本。
（2）clone(true)：元素以及其所有的事件處理并且選中這些克隆的副本
替換：
（1）replaceWith(content):將所有匹配的元素替換成指定的HTML或DOM元素。
（2）replaceAll(selector):用匹配的元素替換掉所有 selector匹配到的元素。
包裹：
屬性操作：
樣式操作：
判斷是否有某個(gè)樣式：hasClass("className")；；內(nèi)部實(shí)際上調(diào)用的是is方法
設(shè)置和獲取HTML、文本和值
CSS-DOM操作：讀取和設(shè)置style對象的各種屬性。
案例：超鏈接提示效果和網(wǎng)頁提示效果
1.超鏈接：自帶了提示，加入title屬性，不過這個(gè)提示太慢，為了良好的人機(jī)交互，應(yīng)該在一上去的一瞬間就出現(xiàn)提示
① 當(dāng)鼠標(biāo)滑入超鏈接
② 創(chuàng)建一個(gè)div元素
③ 將創(chuàng)建的元素追加到文檔中
④ 為它設(shè)置x和y坐標(biāo)，使得它顯示在鼠標(biāo)位置旁邊
⑤ 當(dāng)鼠標(biāo)劃出時(shí)，移除div
$(function(){
$("a.tooltip").mouseover(function(e){
var tooltip = "<div id='tooltip'>"+ this.title +"<\/div>"; //創(chuàng)建 div 元素
$("body").append(tooltip); //把它追加到文檔中
$("#tooltip")
.css({
"top": e.pageY + "px",
"left": e.pageX + "px"
}).show("fast"); //設(shè)置x坐標(biāo)和y坐標(biāo)，并且顯示
}).mouseout(function(){
$("#tooltip").remove(); //移除
});
});
問題1：title屬性提示也會(huì)出現(xiàn)；x、y坐標(biāo)設(shè)置問題，距離太近
⑥ 當(dāng)鼠標(biāo)滑入時(shí)，給對象一個(gè)新屬性，比如myTitle，并它title傳給它，然后清除title屬性
⑦ 當(dāng)鼠標(biāo)劃出時(shí)，再把對象的myTitle屬性的值又賦給屬性title
this.myTitle = this.title;
this.title = "";
var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>"; //創(chuàng)建 div 元素
⑧ 重新設(shè)置x和y，為top加10，為left加20
var x = 10;
var y = 20;
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}).show("fast"); //設(shè)置x坐標(biāo)和y坐標(biāo)，并且顯示
⑨ 鼠標(biāo)移動(dòng)時(shí)，提示不會(huì)跟著鼠標(biāo)移動(dòng)。需要加上一個(gè)mouseover事件
.mousemove(function(e){
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
});
2.圖片提示效果
參考上面，就可以出現(xiàn)圖片提示：
$(function(){
var x = 10;
var y = 20;
$("a.tooltip").mouseover(function(e){
this.myTitle = this.title;
this.title = "";
var tooltip = "<div id='tooltip'><img src='"+ this.href +"' alt='產(chǎn)品預(yù)覽圖'/><\/div>"; //創(chuàng)建 div 元素
$("body").append(tooltip); //把它追加到文檔中
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}).show("fast"); //設(shè)置x坐標(biāo)和y坐標(biāo)，并且顯示
}).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove(); //移除
}).mousemove(function(e){
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
});
})
為了更加人性化，顯示圖片的時(shí)候，還要根據(jù)title屬性來獲取圖片相應(yīng)的介紹文字：，然后將它追加到div元素中，
