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选择器
创建：主要包括创建元素节点和创建文本节点、创建属性节点。
（1）创建元素节点 $(html)
Var aa=$("<li></li>");
（2）创建文本节点 Var aa=$("<li>你好</li>");
（3）创建属性节点 Var aa=$("<li title='bbb'>你好</li>");
插入：光动态的创建节点没上面用处，还要能够将创建的动态插入。
删除：
（1）empty()：删除匹配的元素集合中所有的子节点。
（2）remove([expr])：从DOM中删除所有匹配的元素。
（3）detach([expr])：从DOM中删除所有匹配的元素。
复制：
（1）clone()：克隆匹配的DOM元素并且选中这些克隆的副本。
（2）clone(true)：元素以及其所有的事件处理并且选中这些克隆的副本
替换：
（1）replaceWith(content):将所有匹配的元素替换成指定的HTML或DOM元素。
（2）replaceAll(selector):用匹配的元素替换掉所有 selector匹配到的元素。
包裹：
属性操作：
样式操作：
判断是否有某个样式：hasClass("className")；；内部实际上调用的是is方法
设置和获取HTML、文本和值
CSS-DOM操作：读取和设置style对象的各种属性。
案例：超链接提示效果和网页提示效果
1.超链接：自带了提示，加入title属性，不过这个提示太慢，为了良好的人机交互，应该在一上去的一瞬间就出现提示
① 当鼠标滑入超链接
② 创建一个div元素
③ 将创建的元素追加到文档中
④ 为它设置x和y坐标，使得它显示在鼠标位置旁边
⑤ 当鼠标划出时，移除div
$(function(){
$("a.tooltip").mouseover(function(e){
var tooltip = "<div id='tooltip'>"+ this.title +"<\/div>"; //创建 div 元素
$("body").append(tooltip); //把它追加到文档中
$("#tooltip")
.css({
"top": e.pageY + "px",
"left": e.pageX + "px"
}).show("fast"); //设置x坐标和y坐标，并且显示
}).mouseout(function(){
$("#tooltip").remove(); //移除
});
});
问题1：title属性提示也会出现；x、y坐标设置问题，距离太近
⑥ 当鼠标滑入时，给对象一个新属性，比如myTitle，并它title传给它，然后清除title属性
⑦ 当鼠标划出时，再把对象的myTitle属性的值又赋给属性title
this.myTitle = this.title;
this.title = "";
var tooltip = "<div id='tooltip'>"+ this.myTitle +"<\/div>"; //创建 div 元素
⑧ 重新设置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"); //设置x坐标和y坐标，并且显示
⑨ 鼠标移动时，提示不会跟着鼠标移动。需要加上一个mouseover事件
.mousemove(function(e){
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
});
2.图片提示效果
参考上面，就可以出现图片提示：
$(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='产品预览图'/><\/div>"; //创建 div 元素
$("body").append(tooltip); //把它追加到文档中
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
}).show("fast"); //设置x坐标和y坐标，并且显示
}).mouseout(function(){
this.title = this.myTitle;
$("#tooltip").remove(); //移除
}).mousemove(function(e){
$("#tooltip")
.css({
"top": (e.pageY+y) + "px",
"left": (e.pageX+x) + "px"
});
});
})
为了更加人性化，显示图片的时候，还要根据title属性来获取图片相应的介绍文字：，然后将它追加到div元素中，
联系客服
