AJAX开发简略续一(2)

本文介绍DOM中Element和Node对象的常用方法及属性,演示如何遍历HTML文档,统计Element元素数量并打印标记名。
Element常用的方法:

方法
描述
getAttribute()
以字符串形式返回指定属性的值。
getAttributeNode()
以Attr节点的形式返回指定属性的值。
getElementsByTabName()
返回一个Node数组,包含具有指定标记名的所有Element节点的子孙节点,其顺序为在文档中出现的顺序。
hasAttribute()
如果该元素具有指定名字的属性,则返回true。
removeAttribute()
从元素中删除指定的属性。
removeAttributeNode()
从元素的属性列表中删除指定的Attr节点。
setAttribute()
把指定的属性设置为指定的字符串值,如果该属性不存在则添加一个新属性。
setAttributeNode()
把指定的Attr节点添加到该元素的属性列表中。

Attr对象代表文档元素的属性,有name、value等属性,可以通过Node接口的attributes属性或者调用Element接口的getAttributeNode()方法来获取。不过,在大多数情况下,使用Element元素属性的最简单方法是getAttribute()和setAttribute()两个方法,而不是Attr对象。
7.4.3、使用DOM操作HTML文档
Node对象定义了一系列属性和方法,来方便遍历整个文档。用parentNode属性和childNodes[]数组可以在文档树中上下移动;通过遍历childNodes[]数组或者使用firstChild和nextSibling属性进行循环操作,也可以使用lastChild和previousSibling进行逆向循环操作,也可以枚举指定节点的子节点。而调用appendChild()、insertBefore()、removeChild()、replaceChild()方法可以改变一个节点的子节点从而改变文档树。
需要指出的是,childNodes[]的值实际上是一个NodeList对象。因此,可以通过遍历childNodes[]数组的每个元素,来枚举一个给定节点的所有子节点;通过递归,可以枚举树中的所有节点。下表列出了Node对象的一些常用属性和方法:
Node对象常用属性:

属性
描述
attributes
如果该节点是一个Element,则以NamedNodeMap形式返回该元素的属性。
childNodes
以Node[]的形式存放当前节点的子节点。如果没有子节点,则返回空数组。
firstChild
以Node的形式返回当前节点的第一个子节点。如果没有子节点,则为null。
lastChild
以Node的形式返回当前节点的最后一个子节点。如果没有子节点,则为null。
nextSibling
以Node的形式返回当前节点的兄弟下一个节点。如果没有这样的节点,则返回null。
nodeName
节点的名字,Element节点则代表Element的标记名称。
nodeType
代表节点的类型。
parentNode
以Node的形式返回当前节点的父节点。如果没有父节点,则为null。
previousSibling
以Node的形式返回紧挨当前节点、位于它之前的兄弟节点。如果没有这样的节点,则返回null。

Node对象常用方法:

方法
描述
appendChild()
通过把一个节点增加到当前节点的childNodes[]组,给文档树增加节点。
cloneNode()
复制当前节点,或者复制当前节点以及它的所有子孙节点。
hasChildNodes()
如果当前节点拥有子节点,则将返回true。
insertBefore()
给文档树插入一个节点,位置在当前节点的指定子节点之前。如果该节点已经存在,则删除之再插入到它的位置。
removeChild()
从文档树中删除并返回指定的子节点。
replaceChild()
从文档树中删除并返回指定的子节点,用另一个节点替换它。

接下来,让我们使用上述的DOM应用编程接口,来试着操作HTML文档。
A、遍历文档的节点
DOM把一个HTML文档视为树,因此,遍历整个树是应该是家常便饭。跟之前说过的一样,这里我们提供两个遍历树的例子。通过它,我们能够学会如何使用childNodes[]和firstChile、lastChild、nextSibling、previousSibling遍历整棵树。
例子1-- sample3_1.htm:
这个例子使用了childNodes[]和递归方式来遍历整个文档,统计文档中出现的Element元素总数,并把Element标记名全部打印出来。需要特别注意的是,在使用DOM时,必须等文档被装载完毕再执行遍历等行为操作文档。sample3_1.htm具体代码如下:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script language="javascript">
var elementName = ""; //全局变量,保存Element标记名,使用完毕要清空
function countTotalElement(node) { //参数node是一个Node对象
       var total = 0;
       if(node.nodeType == 1) { //检查node是否为Element对象
              total++;                 //如果是,计数器加1
              elementName = elementName + node.tagName + "/r/n"; //保存标记名
       }
       var childrens = node.childNodes;         //获取node的全部子节点
       for(var i=0;i<childrens.length;i++) {
              total += countTotalElement(childrens[i]); //在每个子节点上进行递归操作
       }
       return total;
}
</script>
</head>
<body>
<a href="javascript :void(0)"
onClick="alert('标记总数:' + countTotalElement(document) + '/r/n全部标记如下:/r/n' + elementName);elementName='';">开始统计</a>
</body>
</html>
运行效果如下:
遍历文档_1.jpg遍历文档_2.jpg               
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值