1、DOM操作的分类
(1) DOM Core
JavaScript中的getElementById( )、getElementsByTagName( )、getAttribute()和setAttribute()都是DOM Core的组成部分
(2)HTML-DOM
document.forms//获取表单对象
(3)CSS-DOM
CSS-DOM技术的主要作用是获取和设置style对象的各种属性
element.style.color="red";
2、jQuery中的DOM操作
(1)查找节点
类型
|
方法
|
示例
|
查找元素节点
|
直接查找
| var $li= $("ul li:eq(1)");获取<ul> 里第2个<li>节点 |
查找属性节点
|
attri()
|
var $para=$("p");
var p_text=$para.attr("title");
|
(2) 创建节点
类型
|
方法
|
示例
|
创建元素节点
|
$(html)
|
var $li_1=$("<li></li>")//创建<li>元素
$("ul").append($li_1);
|
创建文本节点
|
在创建元素节点时直接把文本内容写出来
| var $li_1=$("<li>橘子</li>") |
创建属性节点
|
直接在创建元素节点时一起创建
| var $li_1=$("<li title="橘子">橘子</li>"); |
(3)插入节点
append();appendTo();prepend();prependTo();after();insertAfter();before();insertBefore()
(4)删除节点
remove():从DOM中删除所有匹配的元素,返回值是一个指向已被删除节点的引用,因此可以在以后再使用删除的节点
detach():
empty():清空节点
(5)复制节点
clone():参数true,含义为复制元素的同时复制元素中所绑定的事件,这样该元素的副本也同样具有复制功能
(6)替换节点
replaceWith():将所有匹配的元素都替换成指定的HTML或者DOM元素
$("p").replaceWith("<strong>你好</strong>");
replaceAll()
$("<strong>你好</strong>".replaceAll("p"));
(7)包裹节点
wrapAll( ):包裹元素 $("strong").wrapAll("<b></b>")
wrapInner( ):包裹内容
(8)属性操作
方法 | 示例 | |
获取属性和设置属性 |
attr(“属性名”)
attr(“属性名”,“属性值”)
| $("p").attr("title","your title"); |
删除属性 | removeAttr(“属性名”) | $("p").removeAttr("title"); |
(9)样式操作
方法 | 示例 | |
获取样式和设置样式 | attr() | $("p").attr("class","high") |
追加样式 | addClass( ) | $("p").addClass("another"); |
移除样式 | removeClass( ) | $("p").removeClass("high") |
切换样式 | toggle( 1 , 2 ) | |
判断是否含有某个样式 | hasClass() |
(10)设置和获取HTML、文本和值
html():类似于innerHTML属性,可以用来读取或者设置某个元素中的HTML内容
text():读取或者设置某个元素中的文本内容
val():设置或获取元素的值
(11)遍历节点
children():只考虑子元素,不考虑其他后代元素
next():取得匹配元素后面紧邻的同辈元素
prev():取得匹配元素前面紧邻的同辈元素
sibling():取得匹配元素前后所有的同辈元素
closest():取得最近的匹配元素