text_node 3
cdata_section_node 4
entity_reference_node 5
entity_node 6
processing_instrction_node 7
comment_node 8
document_node 9
document_type_node 10
document_fragment_node 11
notation_node 12
ie6不支持,不过你可以自定义一个js对象node。
3.处理特性
处理特性可以使用标准的namenodemap中的方法:
getnameditem(name) removenameditem(name) setnameditem(node) item(pos)
比如:<p id="test">测试</p>
假设变量op是上面的p节点的引用,我们要访问op的id属性:
var sid=op.attributes.getnameditem("id").nodevalue;
这些方法用起来很累赘,所以dom又定义了三个方法来简化:
getattribute(name) ——返回名称为name的属性的值
setattribute(name,value) ——顾名思义
removeattribute(name) ——顾名思义
上面的例子可以改写为:
var sid=op.getattribute("name");
4.访问指定节点:
熟知的getelementbytagname(name),getelementbyname(name),getelementbyid(id)三个方法,不再展开。
5.创建和操作节点:
(1)创建新节点,一张ie(6.0)和ff对dom level1的创建新节点方法支持的对照表:
方法 ie ff
createattribute(name) y y
createcdatasection(text) n y
createcomment(text) y y
createdocumentfragment() y y
createelement(tagname) y y
createentityreference(name) n y
createprocessinginstruction(
target,data) n y
createtextnode(text) y y
下面介绍常用的几个方法
(2)createelement(),createtextnode(),appendchild()
例子:
<html>
<head>
<title>createelement() example</title>
<script type="text/javascript">
function createmessage() {
var op = document.createelement("p");
var otext = document.createtextnode("hello world!");
op.appendchild(otext);
document.body.appendchild(op);
}
</script>
</head>
<body onload="createmessage()">
</body>
</html>
在页面载入后,创建节点op,并创建一个文本节点otext,otext通过appendchild方法附加在op节点上,为了实际显示出来,将op节点通过appendchild方法附加在body节点上。此例子将显示hello world!
(3)removechild(),replacechild()和insertbefore()
从方法名称就知道是干什么的:删除节点,替换节点,插入节点。需要注意的是replacechild和insertbefore两个参数都是新节点在前,旧节点在后。
(4)createdocumentfragment()
此方法主要是为了解决大量添加节点时,速度过慢。通过创建一个文档碎片节点,将要添加的新节点附加在此碎片节点上,然后再将文档碎片节点append到body上面,替代多次append到body节点。
<title>insertbefore() example</title>
function addmessages() {
var arrtext = ["first", "second", "third", "fourth", "fifth", "sixth", "seventh", "eighth", "ninth", "tenth"];
var ofragment = document.createdocumentfragment();
for (var i=0; i < arrtext.length; i++) {
var op = document.createelement("p");
var otext = document.createtextnode(arrtext[i]);
op.appendchild(otext);
ofragment.appendchild(op);
}
document.body.appendchild(ofragment);
<body onload="addmessages()">
二、html dom的特征功能
html dom的特性和方法不是标准的dom实现,是专门针对html同时也让一些dom操作变的更加简便。
1.让特性像属性一样
访问某元素的特性需要用到getattribute(name)方法,html dom扩展,可以直接使用同样名称的属性来获取和设置这些值:
比如 <img src="test.jpg"/>
假设oimg是此元素的引用
(oimg.getattribute("src")可以直接写成:oimg.src,设置值简化为:
oimg.src="test2.gif";
唯一特殊的class属性,因为class是ecmascript的保留字,所以替代的属性名是classname.
2.table的系列方法:
为了简化创建表格,html dom提供了一系列的表格方法,常用几个:
cells ——返回</tr>元素中的所有单元格
rows ——表格中所有行的集合
insertrow(position) ——在rows集合中指定位置插入新行
deleterow(position) ——与insertrow相反
insertcell(position) ——在cells集合的指定位置插入一个新的单元格
deletecell(position) ——与insertcell相反
三。遍历dom
dom的遍历是dom level2中提出的标准,ie6没有实现,mozilla和safari已经实现,最新ie7不清楚是否实现。不再展开,具体请见《javascript高级程序设计》