JS操作DOM元素属性和方法
属性名 描述
childNodes 返回当前元素所有子元素的数组
firstChild 返回当前元素的第一个下级子元素
lastChild 返回当前元素的最后一个子元素
nextSibling 返回紧跟在当前元素后面的元素
nodeValue 指定表示元素值的读/写属性
parentNode 返回元素的父节点
previousSibling 返回紧邻当前元素之前的元素
方法名 描述
getElementById(id) (document) 获取有指定惟一ID属性值文档中的元素
getElementsByTagName(name) 返回当前元素中有指定标记名的子元素的数组
hasChildNodes() 返回一个布尔值，指示元素是否有子元素
getAttribute(name) 返回元素的属性值，属性由name指定
document.createElement(tagName) 文档对象上的createElement方法可以创建由tagName指定的元素。如果以串div作为方法参数， 就会生成一个div元素
document.createTextNode(text) 文档对象的createTextNode方法会创建一个包含静态文本的节点
<element>.appendChild(childNode) appendChild方法将指定的节点增加到当前元素的子节点列表（作为一个新的子节点）。例如， 可以增加一个option元素，作为select元素的子节点
<element>.getAttribute(name)
<element>.setAttribute(name, value)这些方法分别获得和设置元素中name属性的值
<element>.insertBefore(newNode, targetNode)将节点newNode作为当前元素的子节点插到targetNode元素前面
<element>.removeAttribute(name) 这个方法从元素中删除属性name
<element>.removeChild(childNode) 这个方法从元素中删除子元素childNode
<element>.replaceChild(newNode, oldNode) 这个方法将节点oldNode替换为节点newNode
<element>.hasChildnodes() 这个方法返回一个布尔值，指示元素是否有子元素 Document－－最顶层的节点，所有的其他节点都是附属于它的。
DocumentType－－DTD引用（使用<!DOCTYPE>语法）的对象表现形式，它不能包含子节点。
DocumentFragment－－可以像Document一样来保存其他节点。
Element－－表示起始标签和结束标签之间的内容，例如<tag></tab>或者<tag/>。这是唯一可以同时包含特性和子节点的节点类型。
Attr－－代表一对特性名和特性值。这个节点类型不能包含子节点。
Text－－代表XML文档中的在起始标签和结束标签之间，或者CDataSection内包含的普通文本。这个节点类型不能包含子节点。
CDataSection－－<![CDATA[]]>的对象表现形式。这个节点类型仅能包含文本节点Text作为子节点。
Entity－－表示在DTD中的一个实体定义，例如<!ENTITY foo"foo">。这个节点类型不能包含子节点。
EntityReference－－代表一个实体引用，例如"。这个节点类型不能包含子节点。
ProcessingInstruction－－代表一个PI。这个节点类型不能包含子节点。
Comment－－代表XML注释。这个节点不能包含子节点。
Notation－－代表在DTD中定义的记号。这个很少用到。
Node接口定义了所有节点类型都包含的特性和方法。 特性/方法 类型/返回类型 说明
nodeName String 节点的名字;根据节点的类型而定义
nodeValue String 节点的值;根据节点的类型而定义
nodeType Number 节点的类型常量值之一
ownerDocument Document 指向这个节点所属的文档
firstChild Node 指向在childNodes列表中的第一个节点
lastChild Node 指向在childNodes列表中的最后一个节点
childNodes NodeList 所有子节点的列表
previousSibling Node 指向前一个兄弟节点;如果这个节点就是第一个兄弟节点，那么该值为null
nextSibling Node 指向后一个兄弟节点;如果这个节点就是最后一个兄弟节点，那么该值为null
hasChildNodes() Boolean 当childNodes包含一个或多个节点时,返回真 attributes NamedNodeMap 包含了代表一个元素的特性的Attr对象;仅用于Element节点
appendChild(node) Node 将node添加到childNodes的末尾
removeChild(node) Node 从childNodes中删除node
replaceChild(newnode,oldnode) Node 将childNodes中的oldnode替换成newnode
insertBefore(newnode,refnode) Node 在childNodes中的refnode之前插入newnodd
除节点外，DOM还定义了一些助手对象，它们可以和节点一起使用，但不是DOM文档必有的部分。
NodeList－－节点数组，按照数值进行索引;用来表示和一个元素的子节点。 NamedNodeMap－－同时使用数值和名字进行索引的节点表;用于表示元素特性。
二、jquery操作元素：
addClass() 向匹配的元素添加指定的类名。
attr() 设置或返回匹配元素的属性和值。
hasClass() 检查匹配的元素是否拥有指定的类。
html() 设置或返回匹配的元素集合中的 HTML 内容。
removeAttr() 从所有匹配的元素中移除指定的属性。
removeClass() 从所有匹配的元素中删除全部或者指定的类。
toggleClass() 从匹配的元素中添加或删除一个类。
val() 设置或返回匹配元素的值。
创建新的元素
下面介绍两种正确创建元素的方法.
1.使用HTML DOM创建元素
var p = document.createElement("p");
p.innerText = "this is param";
2.使用jQuery函数创建元素
$("<p>this is a param</p>")
我们此处使用了jQuery核心类库中的一个方法:
jQuery(html,ownerDocument)
return:jQuery
根据HTML原始字符串动态创建Dom元素.
此处,我们要注意,如果传入的是一个完整的HTML字符串,jQuery内部使用的也是innerHTML.所以,我们参见另一种方法来创建元素
//注意:
// 不要写成$("p").html("this is a param");
$("<p/>").html("this is a param");
将元素添加至对象上
添加元素时,我们要注意,应该在页面加载完元素后,才可以修改Dom的结构,至少也应该是需要被修改的元素被加载完后,再修改该元素.
我们可以使用下面两种方法来将元素添加至Dom
window.onload = function () {
var p = document.createElement("p");
p.innerHTML = "this is a param";
document.getElementById("dv1").appendChild(p);
}
此段代码的缺点是,加载行为会在页面加载完毕之后再执行,即:如果页面上有大量图片或许多资源时,我们可能会因此等很久.
解决办法是,我们在该dom元素加载完毕后,即对其进行添加行为.jQuery函数可实现此功能:
$(function () {
var p = document.createElement("p");
p.innerHTML = "this is a param";
document.getElementById("dv1").appendChild(p);
});
常用函数
常用的函数比较多,按照帮助文档的分类罗列,我们来一个一个了解函数的使用方法.
1.内部插入
函数名 描述 举例 结果
append(content) 向每个匹配的元素内部追加内容
$("#dv1").append("<b>this is append</b>");
使用以下样式:
div
{
display:inline;
border:solid 1px silver;
margin:2px;
line-height:25px;
}
使用效果如下:
image
prepend(content) 向每个匹配的元素内部前置内容
$("#dv2").prepend("<b>this is prepend</b>");
appendTo(content) 把所有匹配的元素追加到另一个指定的元素集合中
$("<b>this is appendTo</b>").appendTo($("#dv3"));
prependTo(content) 将每个匹配的元素前置到另一个指定元素集合中
$("<b>this is prependTo</b>").prependTo($("#dv4"));
注意:
上述方法均是在元素内部进行操作,append是添加到元素内部的后面,而prepend是添加到元素内部的前面.
append和prepend均是主体A添加B,而appendTo和prependTo均是B添加至A主体.
2.外部插入
函数名 描述 举例 结果
after(content) 在每个匹配的元素后插入内容
$("#dv1").before("<b>this is before</b>");
使用以下样式:
div
{
display:inline;
border:solid 1px silver;
margin:2px;
line-height:25px;
}
效果如下:
image
before(content) 在每个匹配的元素前插入内容
$("#dv2").after("<b>this is after</b>");
insertAfter(content) 把所有匹配的元素插入指定的元素集合后面
$("<b>this is insertAfter</b>").insertAfter($("#dv3"));
insertBefore(content) 把所有匹配的元素插入指定的元素集合前面
$("<b>this is insertBefore</b>").insertBefore($("#dv4"));
3.包裹
函数名 描述 举例 备注
wrap(elem) 把匹配的元素用其他元素匹配的结构化标记包装起来
$("b").wrap($("div"));
生成源码:
<div>
<b>this is b1</b></div>
<div>
<b>this is b2</b></div>
<div>
wrap(html) 把匹配的元素用其他元素匹配的结构化标记包装起来
$("b").wrap("<div></div>");
wrapAll(elem) 将所有匹配的元素用单个元素匹配起来
$("b").wrapAll($("div"));
生成源码:
<DIV>
<B>this is b1</B>
<B>this is b2</B>
</DIV>
wrapAll(html) 将所有匹配的元素用单个元素匹配起来
$("b").wrapAll("<div></div>");
wrapInner(elem) 将匹配元素的内容用一个Dom元素包装起来
$("p").wrapInner($("b"));
<p>
<b>this is p1</b>
</p>
wrapInner(html) 将匹配元素的内容用一个Dom元素包装起来
$("p").wrapInner("<b></b>");
注意:
wrap,wrapAll,wrapInner三者之间的区别.
wrap是为每个匹配的元素都包装了一个格式化标记.
wrapAll是将所有匹配的元素用一个格式化标记包装起来
4.替换
函数名 描述 举例 备注
replaceAll(selector) 用匹配的元素替换掉所有selector匹配到的元素
$("<p>this is param</p>").replaceAll($("b"));
replaceWith(content) 将匹配的元素替换成指定的HTML或Dom元素
$("b").replaceWith("<p>this is param</p>");
注意:
此两个函数与append 和 appendTo相似.
replaceAll是满足条件的A元素集替换匹配的B元素集
replaceWith(content)是A元素集被content元素集替换
5.删除
函数名 描述 举例 备注
empty() 删除匹配的集合的所有子节点
<div id="dv1">
dv1<p>
this is a param</p>
</div>
<div>
dv2</div>
<b>this is b</b>
<script type="text/javascript">
$("div").empty();
</script>
清除div下所有的子元素.
页面源码:
<div id="dv1">
</div>
<div>
</div>
<b>this is b</b>
remove([expr]) 从Dom中删除所有匹配的元素
expr:用于筛选元素的jQuery表达式
<div id="dv1">
dv1<p>
this is a param</p>
</div>
<div>
dv2</div>
<b>this is b</b>
<script type="text/javascript">
$("div").remove();
</script>
删除页面中所有的div
页面源码:
<B>this is b</B>
6.复制
函数名 描述 举例 结果
clone() 克隆匹配的元素,并且选中这些克隆的副本
<div id="dv1">dv1</div>
<b this is b</b>
<script type="text/javascript">
$("b").clone().insertBefore($("#dv1"));
</script>
clone(true) 克隆匹配的元素及其所有的事件,并选中这些克隆的副本
<div id="dv1">dv1</div>
<b onclick="alert(this.innerHTML)">this is b</b>
<script type="text/javascript">
$("b").clone(true).insertBefore($("#dv1"));
</script>
参考自：1、百度文库
2、http://www.cnblogs.com/oneword/archive/2010/11/10/1873238.html
