[jQuery]DOM操作

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选择器来完成，例如：

1

2

3

var $li = $("ul li:eq(1)");

var li_txt = $li.text();

alert(li_txt);

利用jQuery选择器查找到所需元素后，就可以使用attr()方法来获取它的各种属性值，例如：

1

2

3

var $para = $("p");

var p_txt = $para.attr("title");

alert(p_txt);

2.2 创建节点

如果要创建两个<li>元素节点，并且要把它们作为<ul>元素节点的子节点添加到DOM节点树上，可使用工厂函数$()来完成，格式如下：

1

$(html);

$(html)方法会根据传入的HTML标记字符串，创建一个DOM对象，并将这个DOM对象包装成一个jQuery对象后返回，例如：

1

2

3

4

var $li_1 = $("<li></li>");

var $li_2 = $("<li></li>");

$("ul").append($li_1);

$("ul").append($li_2);

创建属性节点与创建文本节点类似，也是直接在创建元素节点时一起创建，例如：

1

2

3

4

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中删除所有匹配的元素，例如：

1

$("ul li:eq(1)").remove();

当某个节点用remove()方法删除后，该节点所包含的所有后代节点将同时被删除，这个方法的返回值是一个指向已被删除的节点的引用。

empty()方法的作用是清空节点，例如：

1

$("ul li:eq(1)").empty();

当运行代码后，第2个<li>元素的内容被清空了，只剩下<li>标签默认的圆点符号。

2.5 复制节点

如果需要复制一个元素，可以使用clone()来完成，例如：

1

2

3

$("ul li").click(function(){

  $(this).clone().appendTo("ul");

})

复制节点后，被复制的新元素并不具有任何行为，如果需要新元素也具有复制功能，可以在clone()方法中传递一个参数true，例如：

1

2

3

$("ul li").click(function(){

  $(this).clone(true).appendTo("ul");

})

2.6 替换节点

如果要替换节点，jQuery提供了相应的方法，即replaceWith()和replaceAll()。replaceWith()方法的作用是将所有匹配的元素都替换成指定的HTML或者DOM元素，例如：

1

$("p").replaceWith("<strong>Name</strong>");

也可以使用另一个方法replaceAll()来实现，该方法与replaceWith()方法的作用相同，只是颠倒了replaceWith()操作，例如：

1

$("<strong>Name</strong>").replaceAll("p");

2.7 包裹节点

如果要将某个节点用其他标记包裹起来，jQuery提供了相应的方法，即wrap()，例如：

1

$("strong").wrap("<b></b>");

wrapAll()方法会将所有匹配的元素用一个元素来包裹，它不同于wrap()方法，wrap()方法是将所有的元素进行单独的包裹，例如：

1

$("strong").wrapAll("<b></b>");

wrapInner()方法将每一个匹配的元素的子内容用其他结构化的标记包裹起来，例如：

1

$("strong").wrapInner("<b></b>");

2.8 属性操作

在jQuery中，用attr()方法来获取和设置元素属性值，例如：

1

var p_txt = $("p").attr("title");

如果要设置元素属性值，也可以使用同一个方法，不同的是，需要传递两个参数，例如：

1

$("p").attr("title","my title");

在某些情况下，要删除文档中某个元素的特定属性，可以使用removeAttr()方法来完成，例如：

1

$("p").removeAttr("title");

2.9 样式操作

使用attr()方法可以获取元素的class，例如：

1

var p_class = $("p").attr("class");

也可以使用attr()方法来设置class，例如：

1

$("p").attr("class","high");

在大多数情况下，它是将原来的class替换为新的class，而不是在原来的基础上追加新的class。jQuery提供了专门的addClass()方法来追加样式，例如：

1

$("p").addClass("another");

如果用户要删除class的某个值，可以使用与addClass()方法相反的removeClass()方法来完成，例如：

1

$("p").removeClass("high");

当它不带参数时，就会将class的值全部删除，例如：

1

$("p").removeClass();

jQuery还提供了一个toggleClass()方法控制样式上的重复切换，如果类名存在则删除它，如果类名不存在则添加它，例如：

1

$("p").toggleClass("high");

hasClass()可以用来判断元素中是否含有某个class，如果有，则返回true，否则返回false，例如：

1

$("p").hasClass("high");

2.10 设置和获取HTML、文本和值

html()方法类似于javascript中的innerHTML属性，可以用来读取或者设置某个元素中的HTML内容，例如：

1

var p_html = $("p").html();

如果需要设置某元素的HTML，也可以使用该方法，例如：

1

$("p").html("<strong>Name</strong>");

text()方法类似于javascript中的innerText属性，可以用来读取或设置某个元素中的文本内容，例如：

1

var p_text = $("p").text();

val()方法类似于javascript中的value属性，可以用来设置和获取元素的值，例如：

1

2

3

4

$("#username").focus(function(){

  vartext_value = $(this).val();

  alert(text_value);

});

2.11 遍历节点

children()方法用于取得匹配元素的子元素集合，例如：

1

$("p").children();

next()方法用于取得匹配元素后面紧邻的同辈元素，例如：

1

$("p").next();

prev()方法用于取得匹配元素前面紧邻的同辈元素，例如：

1

$("p").prev();

siblings()方法用于取得匹配元素前后所有的同辈元素，例如：sli

1

$("p").siblings();

closet()方法用来取得最近的匹配元素，首先检查当前元素是否匹配，如果匹配则直接返回，如果不匹配则向上查找父元素，直到找到匹配选择器的元素，如果没有找到，则返回一个空的jQuery对象，例如：

1

$(e.target).closet("li").css("color","red");

2.12 CSS-DOM操作

CSS-DOM技术简单来说就是读取和设置style对象的各种属性，可以直接利用css()方法获取元素的样式属性，例如：

1

$("p").css("color");

也可以直接利用css()方法设置某个元素的单个样式，例如：

1

$("p").css("color","red");

在jQuery中还有一个height()方法，可以取得匹配元素当前计算的高度值，例如：

1

$("p").height();

与height()方法对应的还有一个width()方法，可以取得匹配元素的宽度值，例如：

1

$("p").width();

CSS-DOM中，还有以下几个经常使用的方法。offset()方法的作用是获取元素在当前视窗的相对偏侈，其中返回的对象包含两个属性，即top和left，它只对可见元素有效，例如：

1

2

3

var offset = $("p").offset();

var left = offset.left;

var top = offset.top;

position()方法的作用是获取元素相对于最近的一个position样式属性设置relative或absolute的祖父节点的相对偏移，它返回的对象也包括两个属性，即top和left，例如：

1

2

3

var position = $("p").position();

var left = position.left;

var top = position.top;

scrollTop()方法和scrollLeft()方法的作用分别是获取元素的滚动条距顶端的距离和距左侧的距离，例如：

1

2

3

var $p = $("p");

var scrollTop = $p.scrollTop();

var scrollLeft = $p.scrollLeft();

另外，可以为这两个方法指定一个参数，控制元素的滚动条滚动到指定位置，例如：

1

2

$("textarea").scrollTop(300);

$("textarea").scrollLeft(300);