博主辛苦了，我要打赏银两给博主，犒劳犒劳站长。
【摘要】本文简单介绍一下 dom 的节点相关知识，然后给出一个 js 通过递归方式遍历网页中的所有 dom 节点的实例。
dom 节点主要包含三个属性：nodeType（节点类型）、nodeName（节点名称）、nodeValue（节点值）。
关于 nodeType， 常见的节点类型如下：
元素节点 nodeType 的值是：1
属性节点 nodeType 的值是：2
文本节点 nodeType 的值是：3
注释节点 nodeType 的值是：8
文档节点 nodeType 的值是：9
关于 nodeName：
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 是 #text
注释节点的 nodeName 是 #comment
文档节点的 nodeName 是 #document
关于 nodeValue：
元素节点的 nodeValue 是 null
属性节点的 nodeValue 是包含的属性值
文本节点的 nodeValue 是包含的文本
注释节点的 nodeValue 是包含的注释内容
文档节点的 nodeValue 是 null
接下来给出一个小例子，让我们能够能加清晰的了解 dom 的基本结构，在这个例子中，我们使用 js 来遍历网页中的所有 dom 节点。html 文件中的代码如下：
<!DOCTYPE><html><head><meta charset="utf-8" /><title>Dom遍历</title></head><body><!-- 注释 --><div id="frm">用户名:<input type="text" name="username" id="uname"/></div></body> </html><script src="05.js" type="text/javascript"></script>
05.js 文件中的代码：
<!--
var msg = "";
var num = 0;
window.onload = function() // 当窗体加载完毕后触发此函数
{var root = document.documentElement; // document 获取根元素
traverseNodes(root); // 遍历所有节点
document.write(msg);
}
function traverseNodes(node)
{ if(node.nodeType == 1) // 判断是否是元素节点
{display(node);
for(var i = 0;i < node.attributes.length; i++) // 判断是否有属性节点
{var attr = node.attributes.item(i); // 得到属性节点
if(attr.specified) // 判断该节点是否存在，如果存在，显示输出
{display(attr);
}
}
if(node.hasChildNodes) // 判断该元素节点是否含有子节点
{var sonnodes = node.childNodes; // 得到所有的子节点
for (var i = 0; i < sonnodes.length; i++) // 遍历所有子节点
{var sonnode = sonnodes.item(i); // 得到具体的某个子节点
traverseNodes(sonnode); // 递归遍历
}
}
}else
{ display(node);
}
}
function display(node)
{if(node.nodeType == 1)
{msg += (++num) + ". nodeName=" + node.nodeName + ",nodeType=" + node.nodeType + "<br/>";
}else
{msg += (++num) + ". nodeName=" + node.nodeName + ",nodeValue=" + node.nodeValue + ",nodeType=" + node.nodeType + "<br/>";
}
}
-->
执行的结果如下图所示：
从中可以看出，网页中的隐式空白符都会成为一个文本节点。
版权归 马富天PHP博客 所有
本文标题：《DOM 元素节点,文本节点,属性节点,js遍历网页中的 DOM 节点》
本文链接地址：http://www.mafutian.net/275.html
转载请务必注明出处，小生将不胜感激，谢谢! 喜欢本文或觉得本文对您有帮助，请分享给您的朋友 ^_^
顶0
踩0
| 评论审核未开启 |
|
||