DOM(Document Object Model)，意思就是文档对象模型。
一般而言，DOM操作分为3个方面，即DOM-CORE(核心)、HTML-DOM、CSS-DOM，在javascript中的DOM-CORE表示getElementById()、getElementByTagName()、getAttribute()、setAttribute()
在jquery中的DOM操作包括：
（1）查找节点：attr()，若为一个参数，即表示查找的属性名；若为两个参数，表示设置元素的属性值。
（2）创建节点：attr()，获取各个属性的值，同时使用$(html)可以创建相应的html代码；此外，还可以创建相应的文本节点、属性节点（title），同时必须采用append()方法对其进行添加到相应的标签下。
（3）插入节点：append()，是在元素内部追加新创建的内容；在jquery中还提供了其他的方法，譬如appendTo()、prepend()[前置内容]、after()、insertAfter()[将匹配的元素插入到指定元素后面]等。
（4）删除节点：remove()、detach()、empty()。需要注意的是，在empty()方法中，它并不是删除节点，而是清空节点，能清空所有的后代节点。remove()与detach()的区别在于，detach()删除节点后，节点本身绑定的事件、附加的数据都会保留下来，并不会全部消失。
（5）复制节点：clone()表示克隆，若为clone(true)，表示复制元素的同时，也会复制元素中所绑定的事件，即其副本也具有复制功能。
（6）替换节点：replaceWith()将所有匹配的元素都替换成指定的HTML或者DOM元素。此外，还有一个方法replaceAll()，与replceWith()相比，它只是颠倒了前后元素操作。
$('p').replaceWith('<strong>水果</strong>');
$('<strong>水果</strong>').replaceAll('p');
（7）包裹节点：wrap()，表示用标记将某个节点包裹起来，
由此延伸的包裹节点方法还有wrapAll()、wrapInner().
（8）属性操作：由于attr()是用来设置和获取元素属性，removeAttr()来删除元素属性。
（9）样式操作：addClass()、removeClass()、切换样式toggleClass()、判断样式hasClass()。
（10）设置html、文本、值：html()、text()、val()
（11）遍历节点：children()、next()、prev()匹配前面相邻同辈元素、siblings()匹配前后所有的同辈元素、closest()取得最近的元素、parent()获取每个匹配元素的父级元素。
（12）CSS-DOM操作：offset()、position()、scrollTop()、scrollLeft()
A:设置元素及内容
最常用的DOM方法为：
a、html():表示获取元素的html内容
b、text():表示获取元素的文本内容
<div id="box">
<p>欢迎光临！</p>
</div>$(function(){
alert($('#box').html()); //获取元素的html内容；
alert($('#box').text()); //获取元素的文本内容；
});
若要对表单元素进行操作，可以使用val()方法获取和设置表单的文本内容
例如，
在“<input type="text" />热烈”
$(function(){
$('input').val(); //表示获取表单元素input的内容
$('input').val('欢迎'); //表示用“欢迎”替换“热烈”
});B、CSS属性的操作
最常用的DOM方法，包括attr()、removeAttr()
（1）attr()方法：获取和设置元素值。
在这个方法中，其可以传递匿名函数，即function中含有index、value。
a、attr(key):获取某个元素key属性的属性值
b、attr(key,value):设置某个元素key属性的属性值
d、attr(key,function(index,value){}):设置某个元素key属性对应的index位置的索引下值value
（2）removaAttr()方法：删除元素值
在这个方法中，不可以使用匿名函数，传递的index和value是无效的。
例如：
$('div').removeAttr('title'); //删除指定的属性；
C、CSS样式操作
（1）获取元素css样式 $('div').css('color');
设置元素css样式 $('div').css('color','red');
注意：一个值时，为获取；两个值时，为设置。
（2）获取多个元素的css样式
var box=$('div').css(['color','width','height']);
对于一个样式css数组对象而言，可以使用for-in方法遍历
for(var i in box){
alert(i+':'+box[i]);
}
在Jquery中，一般使用each()方法对元素进行遍历设置。
a、遍历原生态对象数组each()方法
var box=$('div').css(['color','width','height']);
$.each(box,function(attr,value){
alert(attr+':'+value);
});b、遍历jQuery对象数组的each()方法
$.each(function(index,element){
alert(index+':'+element);
});c、设置css多样式简写方式
（1）数组方式
$('div').css({
'color':'red';
'width':'200px';
'height':'30px';
});
（2）匿名函数
$('div').css('width',function(index,value){
return (parseInt(value)-500)+'px';
});（3）对class的操作addClass/removeClass/toggleClass
前两个较为简单，主要说明toggleClass，它表示的是指定样式、默认样式两种样式之间的切换。
a、指定的html，有两个class，red和size
<div class="red size">欢迎光临</div>b、添加指定的样式css
.red{
color:red;
}
.size{
font-size:30px;
}c、点击“div”，会使得元素变红，变大，对应jquery
$('div').click(function(){
$(this).toggleClass('red size');
});
若要对上述案例进行扩展，即在绿色和红色之间切换(若为red，删除，用green替换；否则删除green，用red替换)
$('div').click(function(){
$(this).toggleClass(function(){
//局部
if($(this).hasClass('red')){
$(this).removeClass('red');
return 'green';
}
else{
$(this).removeClass('green');
rerturn 'red';
}
});
});
d、无内外边距方法：width()、height()
有内外边距方法：
（1）包含内边距padding innerWidth()
（2）包含边框border、padding outerWidth()
（3）包含边框border、padding、外边距margin outerWidth(true)（表示有外边距margin）
e、元素偏移方法
（1）offset():获取某个元素相对于视口的偏移位置
（2）position():获取某个元素相对于父元素的偏移位置
$('div').offset().left;
$('div').position().left;
（3）scrollTop():获取垂直滚动条的位置
（4）scrollLeft():设置水平滚动条的位置
