DOM文档对象模型，是一种与浏览器、平台、语言无关的接口，使用该接口可以轻松访问页面中所有标准组件。
DOM操作的分类
1、DOM Core（核心）
不专属于JavaScript ，任何DOM的编程都可使用它。
2、HTML-DOM
代码通常比较短，只能用来处理web文档。
3、CSS-DOM
针对CSS的操作。在JavaScript中，它的作用是获取和设置style对象的各种属性。
jQuery中的DOM操作
查找节点
1、查找元素节点
2、查找属性节点：
在jQuery选择器查找到需要的元素后，使用attr()方法获取获取属性值。
创建节点
1、创建元素节点
（1）创建新元素
（2）将新元素插入到文档中
var li_1 = $("<li>hello</li>");
$("ul").append($li_1);
2、创建文本节点
在上一步的基础上添加内容
3、创建属性节点
在创建元素节点时一起创建属性节点
插入节点
| 方法 | 描述 |
|---|---|
| append() | 向每个匹配的元素内部追加内容 |
| appendTo() | 将所有匹配的元素追加到指定的元素中。$(A).append(B)的意思是将A加到B中 |
| prepend() | 向每个匹配的元素内部前置内容 |
| prependTo() | 将所有匹配的元素前置到指定元素中。$(A).prependTo(B)的意思是将A前置到B中 |
| after() | 在每个匹配的元素后插入内容 |
| insertAfter() | 将所有匹配的元素插入到指定元素的后面。$(A).insertAfter(B)的意思是将A插入到B的后面 |
| before() | 在每个匹配的元素之前插入内容 |
| insertBefore() | 将所有匹配的元素插入到指定元素的前面。$(A).insertBefore(B)的意思是将A插入到B的前面 |
删除节点
- remove()方法
作用：从DOM中删除所有匹配的元素，传入的参数根据jQuery表达式来筛选元素
当某个节点用remove()方法后，该节点包含的所有后代节点将被同时删除 - detach()方法
这个方法不会把匹配的元素从jQuery对象中删除，是从DOM中去掉所有匹配的元素。与remove不同的是，所有绑定的事件、附加的数据等都会保留下来。
区别：当删除使用的是detach()时，点击被删除项的alert时，是有alert效果的，如果删除换成remove()，则不会有alert效果
//html代码
<ul>
<li title="苹果">苹果</li>
<li title="橘子">橘子</li>
<li title="菠萝">菠萝</li>
</ul>
//jQuery代码
$("ul li").click(function(){
alert( $(this).html() );
})
var $li = $("ul li:eq(1)").detach();
$li.appendTo("ul");
- empty()方法
此方法严格来讲不是删除节点，是清空节点，它可以清空元素中的所有后代节点。
复制节点
通过鼠标拖动一个对象，拖动功能就是复制节点。使用clone()方法。
复制节点后，被复制的新元素不具有任何行为，如果需要新元素也具有复制功能，可以在clone()方法中传递参数true。
有无参数区别：
有参数：点击<li>标签下的字，在下方也会出发click效果。
无参数：只能点击<li>标签内的字，在下方才会出发click效果。
//html代码
<ul>
<li title="苹果">苹果</li>
<li title="橘子">橘子</li>
<li title="菠萝">菠萝</li>
</ul>
//jQuery代码
$("ul li").click(function(){
$(this).clone(true).appendTo("body");
})
替换节点
replaceWith()和replaceAll()方法
- replaceWith()是将所有匹配的元素都替换成指定的HTML或者DOM元素。
$("p").replaceWith("<strong>你最不喜欢的水果是？</strong>"); - replaceAll()方法与replaceWith()方法的作用相同，只是颠倒了操作。
$(("<strong>你最不喜欢的水果是？</strong>").replaceAll("p");
如果在替换之前，已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。
包裹节点
如果要将某个节点用其他标记包裹起来，就用wrap()方法。该方法对于需要在文档中插入额外的结构化标记非常有用，且不会破坏原始文档的语义。
$("strong").wrap("<b></b>");
的意思为
<b><strong title="选择你最喜欢的水果">你最喜欢的水果是？</strong></b>
包裹节点还有其他两个方法：
- wrapAll()方法
该方法将所有匹配的元素用一个元素来包裹。
wrap()是将所有元素进行单独的包裹。 - wrapInner()方法
该方法将每一个匹配的元素的子内容（包含文本节点）用其他结构化的标记包裹起来。
属性操作
- 获取设置属性
//获取p元素的节点属性title
var $para = $("p");
var p_txt = $para.attr("title");
//设置属性
$p("p").attr("title","your title");
//设置多个属性
$("p").attr({"title":"your title","name":"test"});
- 删除属性
删除文档中某个特定属性，可以使用removeAttr()方法
样式操作
- 获取设置样式
//获取样式和设置样式
var p_class = $("p").attr("class");
$("p").attr("class","high");
追加样式
用addClass()方法
注意：如果给一个元素设置了多个class属性，就相当于合并了它们的样式；
如果有不同的class设置了同一个属性，则后者覆盖前者。移除样式
removeClass()方法:从匹配的元素中删除全部或者指定的class。
//移除指定属性样式
$("p").removeClass("high another");
//移除所有class
$("p").removeClass();
切换样式
toggle()方法：交替执行代码
toggleClass()方法：控制样式上的重复切换，如果类名存在则删除它，如果类名不存在则添加它。判断是否含有某个样式
hasClass()方法：用来判断是否含有某个class，如果有则返回true，没有则返回false。该方法也可以用is来表达。
$("p").is("another"); //判断p里是否含有another类
设置和获取html、文本和值
html()方法
类似于JavaScript的innerHTML属性，用来读取或设置某个元素中的HTML内容
$("p").html("<strong>你最喜欢的水果是？</strong>"); //设置p元素的html代码
注意：html()方法可以用于XHTML文档，但不能用于XML文档。text()方法
类似于JavaScript的innerText属性，用来读取或设置某个元素中的文本内容。
注意：innerText属性不能在火狐浏览器运行，但text()支持所有浏览器；text()对HTML和XML文档都有用。val()方法
类似于JavaScript中的value属性，用来设置和获取元素的值。还有一个用处，就是它能使select（下拉列表框）、CheckBox（多选框）和radio（单选框）响应的选项被选中。
遍历节点
- children()方法
用于取得匹配元素的子元素集合（不考虑其他后代元素） - next()方法
用于匹配元素后面紧邻的同辈元素。 - prev()方法
用于匹配元素前面紧邻的同辈元素。 - siblings()方法
用于匹配元素前后所有的同辈元素。 - closest()方法
用于取得最近的匹配元素。首先检查当前元素是否匹配，如果匹配则直接返回元素本身，如果不匹配则向上查找父元素，逐级向上直到找到匹配选择器的元素。如果什么都没找到则返回空的jQuery对象。 - parent()、parents()、closest()区别
| 方法 | 描述 |
|---|---|
| parent() | 获得集合中每个匹配元素的父级元素 |
| parents() | 获得集合中每个匹配元素的祖先元素（它找到第一个父节点后没有停止，而是继续寻找，最后返回多个父节点） |
| closest() | 从元素本身开始，逐级向上级元素匹配，并返回最先匹配的祖先元素 |
- 其他遍历节点的方法在此先不写了，遇到时候再查~
CSS-DOM操作
css()方法可以获取和设置元素的样式属性
注意：1、如果值是数字，将会被自动转为像素值
2、如果属性带有“-”符号，如果在设置属性的值时不带引号，就要用驼峰写法，如果带上引号，则可以写成font-size或者fontSize。 建议最好带引号~
offset()方法
用来获取元素在当前视窗的相对位移，其中返回的对象包含两个属性，top右偏移和left左偏移position()方法
用来获取元素相对于最近的一个position样式属性设置为relative或者absolute的祖父节点的相对位移，返回对象和offset一样。scrollTop()、scrollLeft()方法
获取元素滚动条距顶端距离、距左侧距离
