DOM操作-遍历HTML文档内容

基础:

  JS nodeType返回类型:http://blog.csdn.net/qyf_5445/article/details/9232907

代码:

<!DOCTYPE html>
<html>
<head>
<title>遍历文档树</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript">
//遍历文档树
function getDomTree(){
alert(text(document.body)); //用提示框显示树内容
}
function text(elem){
var t=""; //定义文字字符串
//获取改节点的所有子节点
var elemelem = elem.childNodes;
//遍历所有子节点
for(var i=0; i<elemelem.length;i++){
//当前节点
var e = elemelem[i];
//文本、注释节点不被遍历,并判断其是否为直接父节点
if(e.parentNode == elem && e.nodeType == 1){
t += e.tagName + ' '; //把标签名添加到文本内容里
//循环子节点
if(e.childNodes.length > 0){
//如果子节点只有一个文本子节点,则跳过
if(e.childNodes.length == 1){
var fe = e.childNodes[0];
if(fe.nodeType == 3) //是否为文本子节点
continue; //跳过
}
t += '\n\t'; //子节点分隔符
t += text(e); //递归还有子元素的子节点
}
}
}
return t; //返回得到的文本
}
</script>
</head>
<body style="text-align:center">
<p>
<!-- 定义链接和按钮 -->
<a id="myLink" href="#">链接</a>
<br/>
<input type="button" value="遍历文档树" onclick="getDomTree();"/>
</p>
</body>
</html>

效果:

  DOM操作-遍历HTML文档内容

上一篇:WPF 中动态改变控件模板


下一篇:Delphi插件创建、调试与使用应用程序扩展