您的位置：首页 > Web前端 > HTML

021遍历HTML文档内容

2017-04-08 18:32 417 查看

通过节点的childNodes属性，可以得到该节点的所有子节点数组。

parentNode属性用于得到目前节点的直接父节点。

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>遍历文档树</title>
<script>
//遍历文档树
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

相关文章推荐

新的分享

章节导航