马富天PHP博客

DOM 元素节点,文本节点,属性节点,js遍历网页中的 DOM 节点

学习笔记 马富天 2017-06-26 09:43:26 16 0

【摘要】本文简单介绍一下 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 文件中的代码如下:

  1. <!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 文件中的代码:

  1. <!-- 
  2. var msg = "";
  3. var num = 0;
  4. window.onload = function()  //  当窗体加载完毕后触发此函数  
  5. {
  6.     var root = document.documentElement;    //  document 获取根元素
  7.     traverseNodes(root);    //  遍历所有节点
  8.     document.write(msg);
  9. }
  10. function traverseNodes(node)
  11. {           
  12.     if(node.nodeType == 1)  //  判断是否是元素节点
  13.     {
  14.         display(node);
  15.         for(var i = 0;i < node.attributes.length; i++)  //  判断是否有属性节点
  16.         {
  17.             var attr = node.attributes.item(i); //  得到属性节点
  18.             if(attr.specified)  //  判断该节点是否存在,如果存在,显示输出
  19.             {
  20.                 display(attr);  
  21.             }  
  22.         }
  23.           
  24.         if(node.hasChildNodes)  //  判断该元素节点是否含有子节点
  25.         {
  26.             var sonnodes = node.childNodes; //  得到所有的子节点
  27.             for (var i = 0; i < sonnodes.length; i++)   //  遍历所有子节点
  28.             {
  29.                 var sonnode = sonnodes.item(i); //  得到具体的某个子节点
  30.                 traverseNodes(sonnode); //  递归遍历
  31.             }  
  32.         }  
  33.     }else
  34.     {  
  35.         display(node);  
  36.     }  
  37. }
  38. function display(node)
  39. {
  40.     if(node.nodeType == 1)
  41.     {
  42.         msg += (++num) + ". nodeName=" + node.nodeName + ",nodeType=" + node.nodeType + "<br/>";
  43.     }else
  44.     {
  45.         msg += (++num) + ". nodeName=" + node.nodeName + ",nodeValue=" + node.nodeValue + ",nodeType=" + node.nodeType + "<br/>";
  46.     }
  47.     
  48. }
  49. -->

执行的结果如下图所示:

请输入图片名称

从中可以看出,网页中的隐式空白符都会成为一个文本节点。

版权归 马富天PHP博客 所有

本文标题:《DOM 元素节点,文本节点,属性节点,js遍历网页中的 DOM 节点》

本文链接地址:http://www.mafutian.net/275.html

转载请务必注明出处,小生将不胜感激,谢谢! 喜欢本文或觉得本文对您有帮助,请分享给您的朋友 ^_^

0

0

上一篇《 该网页无法正常运作,ERR_BLOCKED_BY_XSS_AUDITOR,关闭 Google 浏览器的 xss 过滤机制的方法 》 下一篇《 PHP 设置网页utf8,header("Content-type:text/html;charset=utf-8"); 》
分享到:

暂无评论

评论审核未开启
表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情 表情
验证码