DOM操作的分类
一般来说，DOM操作分为3个方面，即DOM Core、HTML-DOM和CSS-DOM。
1. DOM Core
DOM Core并不专属于JavaScript，任何一种支持DOM的程序设计语言都可以使用它。它的用途并非仅限于处理网页，也可以处理任何一种使用标记语言编写出来的文档，例如XML。
JavaScript中的getElementById()、getElementsByTagName()、getAttribute()和setAttribute()等方法，这些都是DOM Core的组成部分。
2. HTML-DOM
它提供了一些简明的记号来描述各种HTML元素。如：document.forms、element.src。它只能用来处理Web文档。
3. CSS-DOM
它是针对CSS的操作。在JavaScript中CSS-DOM技术的主要作用是获取和设置style对象的各种属性。如：element.style.colr = "red";
jQuery中的DOM操作
1. 查找元素节点，查找属性节点
// 查找节点 var $para = $("p"); // 获取<p>节点 var $li = $("ul li:eq(1)"); // 获取第二个<li>元素节点 // 查找属性 var p_txt = $para.attr("title"); // 输出<p>元素节点属性title var ul_txt = $li.attr("title"); // 获取<ul>里的第二个<li>元素节点的属性title var li_txt = $li.text(); // 输出第二个<li>元素节点的text
2. 创建节点
创建元素节点
var $li_1 = $("<li></li>"); // 创建第一个<li>元素 var $li_2 = $("<li></li>"); // 创建第二个<li>元素 var $parent = $("ul"); // 获取<ul>节点。<li>的父节点 $parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示 $parent.append($li_2); // 可以采取链式写法：$parent.append($li_1).append($li_2);
创建文本节点
var $li_1 = $("<li>香蕉</li>"); // 创建一个<li>元素，包括元素节点和文本节点 var $li_2 = $("<li>雪梨</li>"); // 创建一个<li>元素，包括元素节点和文本节点 var $parent = $("ul"); // 获取<ul>节点。<li>的父节点 $("ul").append($li_1); // 添加到<ul>节点中，使之能在网页中显示 $("ul").append($li_2); // 添加到<ul>节点中，使之能在网页中显示
创建属性节点
var $li_1 = $("<li title='香蕉'>香蕉</li>"); //创建一个<li>元素 var $li_2 = $("<li title='雪梨'>雪梨</li>"); //创建一个<li>元素
var $parent = $("ul"); // 获取<ul>节点。<li>的父节点
$parent.append($li_1); // 添加到<ul>节点中，使之能在网页中显示 $parent.append($li_2); // 等价于：$parent.append($li_1).append($li_2);
3. 插入节点
普通插入
var $li_1 = $("<li title='香蕉'>香蕉</li>"); // 创建第一个<li>元素 var $li_2 = $("<li title='雪梨'>雪梨</li>"); // 创建第二个<li>元素 var $li_3 = $("<li title='其它'>其它</li>"); // 创建第三个<li>元素 var $parent = $("ul"); // 获取<ul>节点，即<li>的父节点 var $two_li = $("ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点 $parent.append($li_1); // append方法将创建的第一个<li>元素添加到父元素的最后面 $parent.prepend($li_2); // prepend方法将创建的第二个<li>元素添加到父元素里的最前面 $li_3.insertAfter($two_li); // insertAfter方法将创建的第三个<li>元素元素插入到获取的<li>之后
移动节点
var $one_li = $("ul li:eq(1)"); // 获取<ul>节点中第二个<li>元素节点 var $two_li = $("ul li:eq(2)"); // 获取<ul>节点中第三个<li>元素节点 $two_li.insertBefore($one_li); //移动节点
4. 删除节点
remove()方法
$("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后，将它从网页中删除。
var $li = $("ul li:eq(1)").remove(); // 获取第二个<li>元素节点后，将它从网页中删除。 $li.appendTo("ul"); // 把刚才删除的又重新添加到<ul>元素里 //所以，删除只是从网页中删除，在jQuery对象中，这个元素还是存在的，我们可以重新获取它
$("ul li").remove("li[title!=菠萝]"); //把<li>元素中属性title不等于"菠萝"的<li>元素删除
detach()方法
var $li = $("ul li:eq(1)").detach(); // 获取第二个<li>元素节点后，将它从网页中删除。 $li.appendTo("ul"); // 重新追加此元素，它之前绑定的事件还在；如果用remove()方法，之前的方法不复存在。
empty()方法
$("ul li:eq(1)").empty(); // 找到第二个<li>元素节点后，清空此元素里的内容
5. 复制节点
$(this).clone().appendTo("ul"); // 复制当前点击的节点，并将它追加到<ul>元素 $(this).clone(true).appendTo("ul"); // 注意参数true //可以复制自己，并且他的副本也有同样功能。
6. 替换节点
$("p").replaceWith("<strong>你最不喜欢的水果是?</strong>");
// 同样的实现： $("<strong>你最不喜欢的水果是?</strong>").replaceAll("p");
如果在替换之前，已经为元素绑定事件，替换后原先绑定的事件将会与被替换的元素一起消失，需要在新元素上重新绑定事件。
7. 包裹节点
$("strong").wrap("<b></b>");//用<b>元素把<strong>元素包裹起来，结果：
// <b><strong>test1</b></strong>
// <b><strong>text2</b></strong>
$("strong").wrapAll("<b></b>"); // 结果：<b><strong>test1</strong><strong>text2</strong>
$("strong").wrapInner("<b></b>"); // 在标记里包裹，结果：<strong><b>test</b></strong>
8. 属性操作
//设置<p>元素的属性'title' $("input:eq(0)").click(function(){ $("p").attr("title","选择你最喜欢的水果."); }); //获取<p>元素的属性'title' $("input:eq(1)").click(function(){ alert( $("p").attr("title") ); }); //删除<p>元素的属性'title' $("input:eq(2)").click(function(){ $("p").removeAttr("title"); });
9. 样式操作
//获取样式 $("input:eq(0)").click(function(){ alert( $("p").attr("class") ); }); //设置样式 $("input:eq(1)").click(function(){ $("p").attr("class","high"); }); //追加样式 $("input:eq(2)").click(function(){ $("p").addClass("another"); }); //删除全部样式 $("input:eq(3)").click(function(){ $("p").removeClass(); }); //删除指定样式 $("input:eq(4)").click(function(){ $("p").removeClass("high"); }); //重复切换样式 $("input:eq(5)").click(function(){ $("p").toggleClass("another"); }); //判断元素是否含有某样式 $("input:eq(6)").click(function(){ alert( $("p").hasClass("another") ) alert( $("p").is(".another") ) });
10. 设置和获取HTML、文本和值
html()方法，类似于JavaScript中的innerHTML属性。
text()方法，类似于JavaScript中的innerText属性。
val()方法，类似于JavaScript中的value属性。
11. 遍历节点
children()方法
var $ul = $("ul").children(); for(var i=0;i< $ul.length;i++){ alert( $ul[i].innerHTML ); }
next()方法
prev()方法
sibling()方法
var $p1 = $("p").next(); alert( $p1.html() ); // 紧邻<p>元素后的同辈元素 var $ul = $("ul").prev(); alert( $ul.html() ); // 紧邻<ul>元素前的同辈元素 var $p2 = $("p").siblings(); alert( $p2.html() ); // 紧邻<p>元素的唯一同辈元素
closeset()方法
$(e.target).closest("li").css("color","red");
parent()、parents()、closeset()方法区别
- $(".item-1").parent().css(...)，parent()方法从指定类型的直接父节点开始查找，返回一个元素节点。
- $(".item-1").parents('ul').css(...)，parents()方法查找同parents()方法类似，不同在于它查找多个父节点。
- $(".item-a").closeset('ul').css(...)，closeset()方法从包含自身节点开始查找，同parents()方法类似，但它只返回匹配的第一个节点。
12. CSS-DOM操作
//获取<p>元素的color alert( $("p").css("color") ); //设置<p>元素的color $("p").css("color","red"); //设置<p>元素的fontSize和backgroundColor $("p").css({"fontSize":"30px" ,"backgroundColor":"#888888"}); //获取<p>元素的高度 alert( $("p").height()); //获取<p>元素的宽度 alert( $("p").width()); //设置<p>元素的高度 $("p").height("100px"); //设置<p>元素的宽度 $("p").width("400px"); // offset()方法，获取当前元素在当前视窗的相对偏移 var offset = $("p").offset(); var left = offset.left; var top = offset.top; alert("left:"+left+";top:"+top); // 其它还有position()方法，scrollTop()方法与scrollLeft()方法