最近越来越发现DOM操作是js,jquery最基本功,自己总是觉得会用起来比较吃力费时间,于是乎总结DOM基本的操作(包括js和jquery的用法),话不多说,直接切入正题。
首先,说一下自己写的整片文章的脉络,即总结js DOM基本操作的方法,然后在js,jquery在用法上进行比较举例,相信这是最让人记忆的法子。
js DOM基本操作方法
获取节点
常用获取节点的方法有:
getElementById() 功能:通过元素ID获取节点getElementsByTagName() 功能:通过元素标签名获取节点
getElementsByName() 功能:通过元素Name属性获取节点
getElementsByClassName() 功能:通过元素类名获取节点
节点指针有:
firstChild 语法:父节点.firstChild 功能:获取节点列表第一个lastChild 语法:父节点.lastChild 功能:获取节点列表最后一个
childNodes 语法:父节点.childNodes 功能:获取元素的子节点列表
previousSibling 语法:兄弟节点.previousSibling 功能:获取前一个节点
nextSibling 语法:兄弟节点.nextSibling 功能:获取已知节点的后一个节点
parentNode 语法:子节点.parentNode 功能:获取已知节点的父节点
节点操作
创建节点
其中节点包括元素节点、属性节点以及文本节点,当然也有注释节点,以下就前三个节点进行说明createElement() 语法:document.createElement() 功能:创建元素节点
createAttribute() 语法:document.createAttribute() 功能:创建属性节点
createTextNode() 语法:document.createTextNode() 功能:创建文本节点
插入节点
appendChild() 语法:被添加的节点.appendChild(所添加的新节点)insertBefore() 语法:被添加的节点.insertBefore(添加的新节点,已知节点)
替换节点
replaceChild() 语法:replace(要插入的新元素,将被替换的元素)
复制节点
cloneNode() 语法:需要被复制的节点.cloneNode(true/false)true是指复制当前节点及其所有子节点 false是指仅复制当前节点
删除节点
removeChild() 语法:removeChild(要删除的节点)注意:该方法可以删除指定节点及其包含的所有子节点,并返回这些内容
属性操作
属性操作分为:获取属性、设置属性、删除属性,如以下:
getAttribute() 功能:获取元素节点中指定属性的属性值setAttribute() 功能:创建或改变元素节点的属性
removeAttribute() 功能:删除元素中指定属性
文本操作
insertData(offest,string) 从offest指定位置插入string
appendData(string) 将string插入到文本节点的末尾处
deleteData(offest,count) 从offest起删除count个字符
replace(offest,count,string) 从offest将count个字符用String替代
splitData(offset) 从offset起将文本节点分成2哥节点
subString(offset,count) 返回由offset起的count个字符串的节点。
appendData(string) 将string插入到文本节点的末尾处
deleteData(offest,count) 从offest起删除count个字符
replace(offest,count,string) 从offest将count个字符用String替代
splitData(offset) 从offset起将文本节点分成2哥节点
subString(offset,count) 返回由offset起的count个字符串的节点。
js,jquery在用法上进行比较举例
创建节点
js用法
<script>
window.οnlοad=function(){
var div=document.createElement("div");
var txt=document.createTextNode("DOM");
div.appendChild(txt);
document.body.appendChild(div);
div.setAttribute("title","盒子");
}
</script>
jquery用法
<script>
$(function(){
var $div=$("<div title='盒子'>DOM</div>");
$('body').append($div);
})
</script>
插入内容
js用法
<script type="text/javascript">
window.οnlοad=function(){
var div=document.getElementsByTagName("div")[0];
var h1=document.createElement("h1");
var o=div.insertBefore(h1,div.firstChild);//返回值o表示新添加的子节点
}
</script>
<body>
<div>
<p>段落文本</p>
</div>
</body>
jquery内部插入内容有4种方法如下:
append()、appendTo()、prepend()、prependTo()
具体用法如下:
append(content) 参数content可以是一个元素、HTML字符串、jquery对象
append(function(index,html)) 参数是个返回HTML字符串的函数
具体用法如下:
append(content) 参数content可以是一个元素、HTML字符串、jquery对象
append(function(index,html)) 参数是个返回HTML字符串的函数
<script type="text/javascript">
$(function(){
$(".container").append("<img src='#'/>");
})
</script>
<body>
<h2>图列表</h2>
<ul class="container">
<li><img src="#"/></li>
<li><img src="#"/></li>
</ul>
</body>
jquery外部插入内容有4种方法如下:
after()、before()、insertAfter()、insertBefore()
具体用法如下:
after(content) 参数content可以是一个元素、HTML字符串、jquery对象
after(function(index)) 参数是个返回HTML字符串的函数
after(content) 参数content可以是一个元素、HTML字符串、jquery对象
after(function(index)) 参数是个返回HTML字符串的函数
<script type="text/javascript">
$(function(){
$("li img").after($("li img").attr('src'));
})
</script>
<body>
<h2>图列表</h2>
<ul class="container">
<li><img src="#"/></li>
<li><img src="#"/></li>
</ul>
</body>
删除内容
js用法
其中js的removeChild()方法,可以删除指定的节点及其包含的所有子节点,并返回这些删除的内容
<script type="text/javascript">
window.οnlοad=function(){
var div=document.getElementsByTagName("div")[0];
var p=document.getElementsByTagName("p")[0];
var p1=div.removeChild(p);
div.parentNOde.insertBefore(p1,div.nextSibling);
}
</script>
<body>
<div>
<p>段落文本</p>
</div>
</body>
jquery用法
jquery提供有3种删除内容的方法如下:
remove()、empty()、detach()
remove() 从DOM中删除所有匹配的元素
empty() 删除匹配的元素集合所有的子节点
detach() 从DOM中删除所有匹配的元素
remove()、empty()、detach()
remove() 从DOM中删除所有匹配的元素
empty() 删除匹配的元素集合所有的子节点
detach() 从DOM中删除所有匹配的元素
<script type="text/javascript">
$(function(){
$('button').onclick(function(){
$('p').empty();
});
})
</script>
<body>
<p>段落文本1</p>
<p>段落文本2</p>
<div>布局文本</div>
<button>清除段落文本</button>
</body>
克隆内容
js用法
nodeObject.cloneNode(incluede_all)其中参数值要么为true要么为false,以此来设置被复制的节点是否包括源节点的所有属性和子节点
true:表示复制当前节点及所有子节点
false:仅复制当前节点
true:表示复制当前节点及所有子节点
false:仅复制当前节点
<script type="text/javascript">
window.οnlοad=function(){
var div=document.getElementsByTagName("div")[0];
div.οnclick=function(){
var div1=div.cloneNode(true);
div.parentNode.insertBefore(div1,div.nextSibling);
}
}
</script>
<body>
<div>
<p>段落文本</p>
</div>
</body>