DOM信息nodeType的应用
来源:互联网 发布:smtp.aliyun.com 端口 编辑:程序博客网 时间:2024/06/06 12:24
本文介绍了使用DOM节点的nodeType属性来过滤出特定类型节点的方法。并且举了一个统计文档内所有元素节点的实例。
使用DOM时一个很奇怪(也很恼人)的情况就是连代码中的换行都可能会被视为节点。以下面的HTML代码为例。
HTML代码
代码如下,我们可以清楚地看到div节点内只有一个段落。
<div id="test">
<p>我是测试段落</p>
</div>
<div id="result"> </div>
JavaScript代码
之后我们使用下面的JavaScript代码来显示id为test的div的子节点。首先,我们使用getElementById获得id为test的节点。之后使用childNodes获得它的子结点。最后在id为result的节点中显示这些子结点的节点名称和节点类型。
<script type="text/javascript">
function test(){
var str = "";
var nodes = document.getElementById("test").childNodes;
for( var i = 0;i < nodes.length; i++){
str += nodes[i].nodeName;
str += ":";
str += nodes[i].nodeType;
str += "<br />";
}
document.getElementById("result").innerHTML = str;
}
</script>
nodeType的应用
点击下面的按钮就可以看到您所使用的浏览器认为这个div有几个子结点。
我是测试段落
P:1
在FireFox下,得到如下的结果:
#text:3P:1#text:3
在IE下,得到如下结果:
P:1
可见,在FireFox中,代码中的换行也被认为是一个类型为1,名字为#text的节点。但是通常我们对代码中的换行并不感兴趣。这时我们就可以使用nodeType来过滤掉这类不需要的元素。使用下面的JS代码就可以实现了。
for( var i = 0;i < nodes.length; i++){
if(nodes[i].nodeType == 1){//代码,只有在节点为元素节点的时候才执行}
}
遍历文档所有的元素节点
下面我们在来看一段使用nodeType的JS代码。它的功能是遍历文档中所有的元素节点,并且统计元素节点的总数。当然我们以可以修改代码来对这些元素节点做任何操作。JavaScript代码如下:
<script type="text/javascript">
function countElements(node){
var total = 0;
if(node.nodeType == 1){ total +=1; }
var children = node.childNodes;
for(var i = 0;i < children.length; i++){
total += countElements(children[i]);
}
return total;
}
function test2(){
var elementsCount = countElements(document);
alert(elementsCount);
}
</script>
点击上面的按钮就可以看到这个网页的总元素节点数了。
- DOM信息nodeType的应用
- 关于DOM的nodeType
- HTML DOM的nodeType值
- HTML DOM的nodeType值
- Html Dom 的nodetype解析
- Html Dom 的nodetype解析
- Html Dom 的nodetype解析
- HTML DOM的nodeType值
- HTML DOM的nodeType值
- HTML Dom 的nodetype解析
- Html Dom 的nodetype解析
- DOM NodeType
- DOM中nodeType的值说明
- [转]HTML DOM的nodeType值[试验田]
- 关于HTML Dom的nodeName,nodeValue,nodeType
- javascript的nodeName,nodeType,nodeValue的应用
- Dom中的NodeType
- DOM----nodeType nodeValue nodeName
- vs2008开发wap网站(一)
- Android接电话流程,JAVA部分
- TOMCAT的热重启 Tomcat中配置默认的路径和默认端口号的问题
- 关于JavaScript中apply与call的用法意义及区别
- 批处理和自动处理
- DOM信息nodeType的应用
- 滤镜
- 如何处理SQL2000数据库的xxx_Log.LDF文件
- AD 实战之十:实战操作主机角色转移
- 树形菜单
- 向sdcard添加文件fail可能的情况
- 陶陶书评 之 Scala程序设计:Java虚拟机多核编程实战
- AD 实战之十一:什么是站点
- QT中用中文