一、什么是DOM?
DOM是 Document Object Model 的缩写,意思是
文档对象模型 。
DOM 是一种与浏览器、平台、语言无关的
接口,使用该接口可以轻松地访问页面中所有的标准组件。
DOM 让Web设计师能够轻松
获取和操作网页中的数据、脚本和表层对象。
二、DOM的操作分类
DOM操作分3类,即DOM Core(核心)、HTML-DOM 和 CSS-DOM
1.DOM Core
2.HTML-DOM
3.CSS-DOM
三、jQuery中的DOM操作 节点
1、获取节点及其值
(1)获取节点
var $li =$("ul li:eq(1)"); //获取节点
(2)text():获取节点的文本内容. 例:
var $li =$("ul li:eq(1)"); //获取<ul>里第2个<li>节点
var li_txt=$li.text(); //获取第二个<li>元素节点的文本内容
alert(li_txt);
(3)attr():获取节点的各种属性的值。例:
var $li =$("ul li:eq(1)"); //获取<ul>里第2个<li>节点
var li_title=$li.attr("title");//获取第二个<li>元素节点属性title
alert(li_title);
append()、appendTo() :插入内的最后面
prepend()、prependTo() :
插入内的最前面
after()、insertAfter() :插入外的最后面
before()、insertBefore() :
插入外的最前面
append()
var $li=$("<li><em>这是</em><b>一个</b>人</li>");
$("ul").append($li);
prepend()
HTML代码:
<p>我想说:</p>
jQuery代码:
$("p").prepend("<b>你好</b>");
结果:
<p><b>你好</b>我想说:</p>
prependTo()
HTML代码:
<p>我想说:</p>
jQuery代码:
$("<b>你好</b>").prependTo("p");
结果:
<p><b>你好</b>我想说:</p>
after()
HTML代码:
<p>我想说:</p>
jQuery代码:
$("p").after("<b>你好</b>");
结果:
<p>我想说:</p><b>你好</b>
before()
HTML代码:
<p>我想说:</p>
jQuery代码:
$("p").before("<b>你好</b>");
结果:
<b>你好</b><p>我想说:</p>
3、删除节点
remove() :删除节点,删除节点后,该删除的节点所包含的所有后代节点将被同时删除
empty() :清空节点,清空节点后,该清空的节点所包含的所有后代节点将被同时清空
remove()
var $li=$("ul li:eq(1)").remove(); //获取第2个<li>元素节点后,将它从网页中删除;
//删除后,remove()方法的返回值是一个指向已被删除的节点的引用,因此可以在以后再使用这些元素。
$li.appendTo("ul"); //把刚才删除的节点重新添加到ul里的最后
empty()
$("ul li:eq(1)").empty();
4、复制节点
clone()
$("ul li").click(function(){
$(this).clone(true).appendTo("ul");
//复制当前单击的节点,并将它追加到<ul>元素中
//在clone()方法中传递了一个参数ture,它的含义是复制元素的同时复制元素中所绑定的事件,因此该元素的副本也同样具有复制功能
})
5、替换节点
replaceWith()
replaceAll()
两者用法相同,只是颠倒了以下操作顺序
//例如将"<p title="asas">你最喜欢的水果?</p>" 替换为 "<strong>你最不喜欢的水果</strong>"
replaceWith()
$("p").replaceWith("<strong>你最不喜欢的水果</strong>");
replaceAll()
$("<strong>你最不喜欢的水果</strong>").replaceAll("p");
6、包裹节点
将某个节点用其他节点包裹起来
wrap() :外包裹一条
wrapAll() :
外包裹多条
wraplnner() :内包裹所有
wrap()
$("strong").wrap("<b></b>");
结果:
<b><strong title="sda">11313</strong></b>
wrapInner()
$("strong").wrapInner("<b></b>");
结果
<strong title="sda"><b>11313</b></strong>
7、遍历节点
children() :取得匹配元素的子元素的集合(不考虑子元素的子元素等)
next() :
取得匹配元素后面紧邻(
第一个)的同辈元素
prev() :
取得匹配元素前面紧邻(
第一个)的同辈元素
siblings() :
取得匹配元素前后
所有的同辈元素
closest() :取得最近的匹配元素
其他遍历节点的方法:find()、filter()、nextAll()、prevAll()、parent()、parents()
以这颗DOM树为例
children()
var $body=$('body').children();
var $p=$('p').children();
var $ul=$('ul').children();
alert($body.length); //<body>元素下有2个子元素
alert($p.length); //<p>元素下有0个子元素
alert($ul.length); //<ul>元素下有3个子元素
for(var i=0,len=$ul.length;i<len;i++){
alert($ul[i].innerHTML); //循环输出<li>元素的HTML内容
}
next()
var $pl=$("p").next(); //取得紧邻<p>元素后的同辈元素
结果:
<ul>
<li>135</li>
<li>4646</li>
<li>sadassd</li>
</ul>
prev()
var $ul=$("ul").prev(); //取得紧邻<ul>元素前的同辈元素
结果:
<p title="sda">6546554</p>