DOM是Document Model Object的缩写，意思是文档对象模型。
3.1DOM操作的分类
一般来说，DOM操作分为DOM Core、HTML-DOM、CSS-DOM。
1、DOM Core
JavaScript中的getElementById()、getElementByTagName()、getAttribute()、setAttribute()等方法都属于DOM Core的组成部分。
2、HTML-DOM
示例：
document.forms //HTML-DOM提供了一个form对象
element.src //使用HTML-DOM获取src属性
3、CSS-DOM
示例：
element.style.color="red";
3.2JQuery中的DOM操作
3.2.1查找节点
使用JQuery查找结点非常容易，可以通过JQuery的选择器来完成。
var $li=$("ul li:eq(0)");//获取ul中的第一个li节点
1、查找元素节点
var li_txt=$li.text();//获取ul中第一个li节点的内容
alert(li_txt);//打印输出节点的内容
2、查找属性节点
使用JQuery查找到元素节点之后，可以使用attr()方法输出其各种属性值。
程序实例：
var $para=$("ul li:eq(2)");
var Str=$para.attr("title");//输出title属性的值
alert(Str);
var $Value=$("ul li:eq(0)");
var Str2=$Value.attr("value");//输出value属性的值
alert(Str2);
3.2.2创建节点
1、创建元素节点
在向HTML页面中添加新的元素节点，先创建HTML元素
var li_1=$("<li>第一个元素节点</li>");
var li_2=$("<li>第二个元素节点</li>");//向ul列表中添加新创建的li节点
$("ul").append(li_1);
$("ul").append(li_2);
将新建的元素添加到文档中可以使用JQuery的append()方法。
注意：
（1）动态创建的新元素节点不会被自动添加到文档中，而是需要使用其他的方法添加到文档中。
（2）创建新的元素的时候要使用闭合标签和标准的XHTML格式。
2、创建属性节点。
var li_1=$("<li title='大西瓜'>大西瓜</li>");
var li_2=$("<li title='小西瓜'>小西瓜</li>");
$("ul").append(li_1);
$("ul").append(li_2);
3.2.3插入节点
JQuery中插入节点的方法有以下几种。插入节点的方法：
|
方法
|
描述
|
|
append()
|
向每一个匹配的元素内部追加内容。 |
|
appendTo();
|
将所有匹配的元素追加到指定的元素中。该方法颠倒了常规的$(A).append(B)的操作，不是将B追加到A中，而是将A追加到B中。 |
|
prepend();
|
向每一个匹配的元素内部前置内容。 |
|
after()
|
在每一个匹配的元素后面添加内容。
|
|
insertAfter()
|
将所有匹配的元素添加到指定元素的后面，该方法颠倒了常规的$(A).after(B),不是将B插入到A的后面，而是将A插入到B的后面。
|
|
before()
|
在每一个匹配的元素前面插入内容。 |
|
insertBefore()
|
将所有匹配的元素添加到指定元素的后面，该方法颠倒了常规的$(A).after(B),不是将B插入到A的后面，而是将A插入到B的后面。 |
删除文档中的节点可以使用JQery的remove()、detach()、empty()方法。
1、remove()方法
使用remove()方法删除元素节点，示例如下：
$("ul li:eq(1)").remove();//获取ul列表中的第二个元素之后，将其从网页中删除。
当某一个元素节点被删除以后，该节点包含的所有后代节点也会被一并删除。remove()方法也可以通过传递参数选择性的删除节点元素，程序示例：
$("ul li").remove("[title=菠萝]");//删除title等于"菠萝"的节点。
2、detach()方法
detach()是将所有匹配的元素节点删除，这个方法不会将元素从JQuery中删除，所以将来可以再使用这些匹配的元素，并且该元素绑定的事件，附加的数据都会被保留下来。
3、empty()方法
empty()不是删除节点而是清空节点。意思是清空匹配元素的所有后代节点。程序实例：
$("ul li:eq(1)").empty();//获取第二个li标签之后，清空该元素里面的内容。
2.3.5复制节点
$("ul li").clone().appendTo("ul");//复制当前的元素节点，并且追加到ul后面。复制追加的元素不具有任何的行为。
$("ul li").clone(true).appendTo("ul");//clone()方法中的true表示复制追加的元素也被绑定了事件。
2.3.6替换节点
替换某一个节点，JQuery提供了相应的方法，replaceWith()和replaceAll()。
replaceWith():作用是将匹配的所有元素替换成指定的HTML或者DOM元素。
程序示例：
$("p").replaceWith("<strong>你最喜欢的水果是什么？</strong>");//将原本的p标签以及内容替换成"<strong>你最喜欢的水果是什么？</strong>".
注意：如果在替换之前，已经为元素绑定事件，发生替换之后原来绑定的事件将会和被替换的元素一起消失，需要在新的元素上重新绑定事件。replaceAll()方法的使用介绍：replaceAll()的作用于replaceWith()相同，只是在书写形式上不同。程序实例如下：$("<strong>我最喜欢的水果是:苹果</strong>").replaceAll("p");
2.3.7包裹节点
1、warp()方法
当某一个节点需要用其他节点包裹起来，可以使用JQuery提供的方法wrap()实现包裹节点。而且使用warp()方法不会破化原始文档的语义。
2、warpAll()方法
wrapAll()方法是将文档中所有的元素进行单独的包裹。wrap()是将所有的元素单独包裹。
3、wrapInner()方法
该方法是将每一个匹配的元素的子内容(包括文本节点)用其他结构化的标记包裹起来。
2.3.8属性操作
在JQuery中用attr()来获取和设置元素属性，使用removeAttr()方法来删除元素属性。
1、获取属性和设置属性
程序示例：
var para=$("p");//获取元素<p>
var p_title=para.attr("title");//获取元素<p>的title属性
设置元素属性的程序示例：
$("p").attr("title","your title");//设置单个的属性值
如果需要给一个元素设置多个属性值，可以用以下的代码实现。
$("p").attr({"title":"newTitle","name":"test"});//设置p元素的title和name的值
2、删除属性值
当需要删除元素的属性时，可以用removeAttr()方法来实现过程。
程序实例：
$("p").removeAttr("title");//删除p元素的title属性值
注意：JQuery1.6中新添加了prop()和removeProp(),分别来获取在匹配的元素集中第一个元素的属性值和为匹配的元素删除设置的属性值。
3.2.9样式操作
1、获取样式和设置样式
程序实例：
var divClass=$("div").attr("class");//获取div元素的class的值
设置元素的样式程序示例：
$("div").attr("class","divClass");//将div元素的class值设置为divClass
2、追加样式
JQuery提供了addClass()方法来追加样式。在添加样式的时候，可以先在CSS文件中添加一组样式，然后使用addClass()来添加样式。
addClass()的使用程序实例如下：
<
div class="div_class">
div容器
</div>
.div_class{
border: 2px solid orangered;
width: 300px;
height: 300px;
}
.divClass{
border-radius: 50%;
background-color: orangered;
}
addClass();添加样式：$(".div_class").assClass("divClass");//添加样式之后div同时具有div_class和divClass两种样式。
注意：(1)如果给同一个元素添加多个样式就相当于多个class合并
(2)如果多个不同的class设置了相同的class样式属性，则后者覆盖前者。
attr()和addClass()的区别:attr()用于设置样式，addClass()样式是用来追加样式。
3、移除样式
需要移除样式的时候使用removeClass()方法从而可以移除所有或者指定的CSS样式。
删除单个CSS样式的程序实例：
$(".div_class").remove("divClass");//移除class值为div_class的div的divClass样式。
删除多个CSS样式的程序示例：
$("div").removeClass("div_class divClass");//删除了div元素的div_class和divClass两个样式。
4、切换样式
在两种样式切换的时候可以使用toggle()方法，JQuery代码如下：
5、判断是否含有某一个样式
使用hasClass()可以判断元素是否含有某一个class,如果有则返回true，否则返回false.
3.2.10设置和获取HTML、文本和值
1、html()方法
html()方法类似于JavaScript的innerHTML属性，可以用来读取或者某一个元素的HTML内容。
程序实例如下：
$("body").html();//获取页面body的HTML内容,结果如截图所示
2、text()方法
此方法类似于JavaScript的innerText()方法，可以用来读取和设置某一个元素的文本内容。
$("p").text();//是获取p元素里面的文本。
3、val()方法
此方法类似于JavaScript的value()方法，可以用来设置和获取元素的值。value()可以获取文本框，下拉列表，单选框，都可以返回值。
程序实例：
<input type="text" id="address" value="请输入地址"><br/>
<input type="password" id="password" value="请输入密码"><br/>
<input type="button" value="登陆">
$(document).ready(function () {
$("#address").focus(function () {
var text_value=$(this).val();
if(text_value=="请输入地址"){
$(this).val("");
}
});
$("#address").blur(function () {
var text_address=$(this).val();
if(text_address==""){
$(this).val("请输入邮箱地址");
}
});
});
注意：JQuery的focus()方法相当于JavaScript中的onfocus()方法，用来处理元素获得焦点的事件。JQuery中blur()方法相当于JavaScript的onblur()方法，用来处理元素失去焦点的事件。
选中多选框、单选框、下拉列表：
程序实例：
$("#multipe").val(["选择二号","选择三号"]);
$(":checkbox").val(["check2","check3"]);
$(":radio").val(["radio1","radio2"]);
1、children()方法
children()方法用于获取匹配元素的子元素集合。
程序实例：
var body=$("body").children();
var p=$("p").children();
var ul=$("ul").children();
alert("body:"+body.length);
alert("p:"+ p.length);
alert("ul:"+ul.length);
for(var i=0;i<ul.length;i++){
alert(ul[i].innerHTML);
}
2、next()方法
next()方法用于取得匹配元素后面紧接着的同辈元素。
程序实例：
3、prev()方法
prev()方法用于匹配所选元素前面紧接着的元素。
程序实例：
alert($("ul").prev().html());
4、siblings()方法
siblings()用于匹配所选元素前后所有的同辈元素。
5、closest()方法
closest()方法用于匹配最近的元素。先检查选中的元素是否匹配，如果匹配则直接返回元素本身，如果不匹配则向上查找父元素，逐级向上直到找到匹配的元素，如果没找到就返回一个空对象。
6、parent()、parents()、closest()方法的区别
parent()、parents()、closest()方法的区别
|
方法
|
描述
|
示例
|
|
parent()
|
获取集合中每一个匹配元素的父级元素 | $(".item-1").parent().css("background-olor","red");parent()方法从指定类型的直接父节点开始查找。parent()返回一个父节点。 |
|
parents()
|
获取集合中每一个匹配元素的祖先元素
|
parents()的查找方法与parent()类似，不同的是，当他找到第一个父节点之后还会继续查找会返回多个父元素。 |
| closest() |
从元素本身开始，逐级向上级 元素匹配，并且返回最先匹配的父级元素。
|
closest()方法是从包含自身的节点开始查找，和parents()方法类似，但是它只返回第一个匹配的元素节点
|
除此之外,JQuery中提供的遍历节点的方法还有，find()、filter()、nextAll()和prevAll()等。
CSS-DOM技术用于用于读取和设置style对象的属性。在JQuery中可以用css()方法来获取选定元素的CSS样式属性。
css()方法获取样式属性程序示例：
$("div").css("background-color");
css()方法设置样式属性程序示例：
注意：
(1)如果值是数字，将会被自动转换为像素值。
(2)在css()方法中，如果属性用带有“-”符号，例如background-color，在设置属性的时候可以不带引号，但是要采用驼峰式的写法。
1、offset()方法
offset()方法是获取元素在当前视窗的相对偏移，其中包含两个属性：top和left。offset()方法只对可见元素有效。
2、position()方法
position()方法的作用是获取元素相对于最近的一个position样式属性值设置为relative或者absolute的祖父节点的相对偏移，包括left和top属性。
3、scrollTop()方法和scrollLeft()方法
这两个方法分别用于获取元素滚动条距离顶端的距离和距离左端的距离。