AJAX开发简略续一(2)
2005/12/20 23:05:49
阅读全文(2653) | 回复(0) | 编辑 | 精华
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> 运行效果如下： 500)this.width=500'>500)this.width=500'>
Posted by Qr on 2005/12/20 23:05:49
| 发表评论： |