1. DOM操作分类
1.1 DOM Core
DOM Core不专属于JavaScript，任何支持DOM的程序设计语言都可以使用。JavaScript中的getElementById()、getElemetsByTagName()、getAttribute()和setAttribute()等方法，都是DOM Core的组成部分。
1.2 HTML DOM
在使用JavaScript和DOM为HTML文件编写脚本时，有许多专属于HTML-DOM的属性。它提供了一些更简明的记号来描述各种HTML元素的属性，例如document.forms或element.src。有些方法即可以用DOM Core来实现，也可以使用HTML-DOM实现。
1.3 CSS DOM
CSS DOM 是针对CSS的操作。在JavaScript中，CSS DOM技术的主要作用是获取和设置style对象的各种属性，通过改变style对象的各种属性，可以使网页呈现出各种不同的效果。
2. DOM操作
2.1 查找节点
使用jQuery在文档树上查找节点，可通过jQuery选择器来完成，例如：
var $li = $("ul li:eq(1)");var li_txt = $li.text();alert(li_txt);利用jQuery选择器查找到所需元素后，就可以使用attr()方法来获取它的各种属性值，例如：
var $para = $("p");var p_txt = $para.attr("title");alert(p_txt);2.2 创建节点
如果要创建两个<li>元素节点，并且要把它们作为<ul>元素节点的子节点添加到DOM节点树上，可使用工厂函数$()来完成，格式如下：
$(html);
$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回，例如：
var $li_1 = $("<li></li>");var $li_2 = $("<li></li>");$("ul").append($li_1);$("ul").append($li_2);创建属性节点与创建文本节点类似，也是直接在创建元素节点时一起创建，例如：
var $li_1 = $("<li title="t1">t1</li>");var $li_2 = $("<li title="t2">t2</li>");$("ul").append($li_1);$("ul").append($li_2);2.3 插入节点
将新创建的节点插入某个文档的方法有多种，如下表：
| 方法 | 描述 | 示例 |
| append() | 向每个匹配的元素内部追加内容。 | $("p").append("<b>me</b>"); |
| appendTo() | 将所有匹配的元素追加到指定的元素中。 | $("<b>me</b>").appendTo("p"); |
| prepend() | 向每个匹配的元素内部前置内容。 | $("p").prepend("<b>me</b>"); |
| prependTo() | 将所有匹配的元素前置到指定的元素中。 | $("<b>me</b>").prependTo("p"); |
| after() | 在每个匹配的元素之后插入内容。 | $("p").after("<b>me</b>"); |
| insertAfter() | 将所有匹配的元素插入到指定元素的后面。 | $("<b>me</b>").insertAfter("p"); |
| before() | 在每个匹配的元素之前插入内容。 | $("p").before("<b>me</b>"); |
| insertBefore() | 将所有匹配的元素插入到指定的元素的前面。 | $("<b>me</b>").insertBefore("p"); |
2.4 删除节点
如果文档中某一个元素多余，那么应将其删除。jQuery提供了两种删除节点的方法，即remove()和empty()。
remove()方法的作用是从DOM中删除所有匹配的元素，例如：
$("ul li:eq(1)").remove();当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除，这个方法的返回值是一个指向已被删除的节点的引用。
empty()方法的作用是清空节点，例如：
$("ul li:eq(1)").empty();当运行代码后，第2个<li>元素的内容被清空了，只剩下<li>标签默认的圆点符号。
2.5 复制节点
如果需要复制一个元素，可以使用clone()来完成，例如：
$("ul li").click(function(){ $(this).clone().appendTo("ul");})复制节点后，被复制的新元素并不具有任何行为，如果需要新元素也具有复制功能，可以在clone()方法中传递一个参数true，例如：
$("ul li").click(function(){ $(this).clone(true).appendTo("ul");})2.6 替换节点
如果要替换节点，jQuery提供了相应的方法，即replaceWith()和replaceAll()。replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素，例如：
$("p").replaceWith("<strong>Name</strong>");也可以使用另一个方法replaceAll()来实现，该方法与replaceWith()方法的作用相同，只是颠倒了replaceWith()操作，例如：
$("<strong>Name</strong>").replaceAll("p");2.7 包裹节点
如果要将某个节点用其他标记包裹起来，jQuery提供了相应的方法，即wrap()，例如：
$("strong").wrap("<b></b>");wrapAll()方法会将所有匹配的元素用一个元素来包裹，它不同于wrap()方法，wrap()方法是将所有的元素进行单独的包裹，例如：
$("strong").wrapAll("<b></b>");wrapInner()方法将每一个匹配的元素的子内容用其他结构化的标记包裹起来，例如：
$("strong").wrapInner("<b></b>");2.8 属性操作
在jQuery中，用attr()方法来获取和设置元素属性值，例如：
var p_txt = $("p").attr("title");如果要设置元素属性值，也可以使用同一个方法，不同的是，需要传递两个参数，例如：
$("p").attr("title", "my title");在某些情况下，要删除文档中某个元素的特定属性，可以使用removeAttr()方法来完成，例如：
$("p").removeAttr("title");2.9 样式操作
使用attr()方法可以获取元素的class，例如：
var p_class = $("p").attr("class");也可以使用attr()方法来设置class，例如：
$("p").attr("class", "high");在大多数情况下，它是将原来的class替换为新的class，而不是在原来的基础上追加新的class。jQuery提供了专门的addClass()方法来追加样式，例如：
$("p").addClass("another");如果用户要删除class的某个值，可以使用与addClass()方法相反的removeClass()方法来完成，例如：
$("p").removeClass("high");当它不带参数时，就会将class的值全部删除，例如：
$("p").removeClass();jQuery还提供了一个toggleClass()方法控制样式上的重复切换，如果类名存在则删除它，如果类名不存在则添加它，例如：
$("p").toggleClass("high");hasClass()可以用来判断元素中是否含有某个class，如果有，则返回true，否则返回false，例如：
$("p").hasClass("high");2.10 设置和获取HTML、文本和值
html()方法类似于javascript中的innerHTML属性，可以用来读取或者设置某个元素中的HTML内容，例如：
var p_html = $("p").html();如果需要设置某元素的HTML，也可以使用该方法，例如：
$("p").html("<strong>Name</strong>");text()方法类似于javascript中的innerText属性，可以用来读取或设置某个元素中的文本内容，例如：
var p_text = $("p").text();val()方法类似于javascript中的value属性，可以用来设置和获取元素的值，例如：
$("#username").focus(function(){ var text_value = $(this).val(); alert(text_value);});2.11 遍历节点
children()方法用于取得匹配元素的子元素集合，例如：
$("p").children();next()方法用于取得匹配元素后面紧邻的同辈元素，例如：
$("p").next();prev()方法用于取得匹配元素前面紧邻的同辈元素，例如：
$("p").prev();siblings()方法用于取得匹配元素前后所有的同辈元素，例如：sli
$("p").siblings();closet()方法用来取得最近的匹配元素，首先检查当前元素是否匹配，如果匹配则直接返回，如果不匹配则向上查找父元素，直到找到匹配选择器的元素，如果没有找到，则返回一个空的jQuery对象，例如：
$(e.target).closet("li").css("color", "red");2.12 CSS-DOM操作
CSS-DOM技术简单来说就是读取和设置style对象的各种属性，可以直接利用css()方法获取元素的样式属性，例如：
$("p").css("color");也可以直接利用css()方法设置某个元素的单个样式，例如：
$("p").css("color", "red");在jQuery中还有一个height()方法，可以取得匹配元素当前计算的高度值，例如：
$("p").height();与height()方法对应的还有一个width()方法，可以取得匹配元素的宽度值，例如：
$("p").width();CSS-DOM中，还有以下几个经常使用的方法。offset()方法的作用是获取元素在当前视窗的相对偏侈，其中返回的对象包含两个属性，即top和left，它只对可见元素有效，例如：
var offset = $("p").offset();var left = offset.left;var top = offset.top;position()方法的作用是获取元素相对于最近的一个position样式属性设置relative或absolute的祖父节点的相对偏移，它返回的对象也包括两个属性，即top和left，例如：
var position = $("p").position();var left = position.left;var top = position.top;scrollTop()方法和scrollLeft()方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离，例如：
var $p = $("p");var scrollTop = $p.scrollTop();var scrollLeft = $p.scrollLeft();另外，可以为这两个方法指定一个参数，控制元素的滚动条滚动到指定位置，例如：
$("textarea").scrollTop(300);$("textarea").scrollLeft(300);
随时随地看视频
