NodeType节点及 去空白文本节点

原创 2016年09月20日 14:42:29
节点数
  1. nodeType 节点的类型,Node有很多类型,元素节点,属性节点,文本节点,注释节点等,通过NodeType区分,常见的有
节点类型 NodeType
元素element 1
属性attr 2
文本text 3
注释comments 8
文档document 9
Element继承了Node类,也就是说Element是Node多种类型中的一种,即当NodeType为1时Node即为ElementNode,另外,Element拓展了Node,Element用有id、class、children等属性。
<div id="div1">
    <p id="p1" class="class1">我是第一个P</p>
    <p id="p2" class="class2">我是第二个P</p>
</div>

window.onload = function () {
   var node1 = document.querySelector(".class2");
   console.log(node1.parentNode.innerHTML);
   //输出<p id="p1" class="class1">我是第一个P</p><p id="p2" class="class2">我是第二个P</p>

   var nodelist = document.getElementById("div1");
   var arr = nodelist.childNodes;
   console.log(arr);//[text, p#p1.class1, text, p#p2.class2, text]
                    //   0      1           2       3         4
                    //0,2,4就是空白文本节点
   console.log(arr[1].innerHTML + " - " + arr[3].innerHTML); 
   //输出 我是第一个P - 我是第二个P 为什么是1,3呢?因为本方法文本节点也会获取也就是说0,2,4是文本节点
 }

下面我简单做下修改,把他们放在一起,不留空格

<div id="div1"><p id="p1" class="class1">我是第一个P</p><p id="p2" class="class2">我是第二个P</p></div>
window.onload = function () {
        var node1 = document.querySelector(".class2");
        alert(node1.parentNode.innerHTML); 

        var nodelist = document.getElementById("div1");
        var arr = nodelist.childNodes;
        console.log(arr)//[p#p1.class1, p#p2.class2]
                    //      0              1
        console.log(arr.nodeValue)               
}

在我们开发过程中,像上面写html是不现实的。所以呢,可以做如下处理,在定义去空白文本节点。
如下:

function cleanWhiteSpace(element){   
    for(var i=0; i<element.childNodes.length; i++){   
        var node = element.childNodes[i];   
        if(node.nodeType == 3 && !/\S/.test(node.nodeValue)){   
            node.parentNode.removeChild(node);   
        }   
    }   
}  
cleanWhiteSpace(document.getElementById(element))

下面这个是根据NodeType来判断

 <div id="div1">
     空白文本1
      <p id="p1" class="class1">
          我是第一个P</p>
      空白文本2
      <p id="p2" class="class2">
          我是第二个P</p>
      空白文本3
</div>

    window.onload = function () {        //依次输出,空白文本1,我是第一个P,空白文本2,我是第二个P,空白文本3
            var node = document.getElementById("div1");
            for (var i = 0; i < node.childNodes.length; i++) {
                if (node.childNodes[i].nodeType == 1) {
                    console.log(node.childNodes[i].innerHTML);
                }
                else if (node.childNodes[i].nodeType == 3) {
                    console.log(node.childNodes[i].nodeValue);
                }
            }
        }
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/biaogeshiwo/article/details/52595902

用Winsock完成了话音的一端—端传输

摘要:在Windows 95环境下,基于TCP/IP协议,用Winsock完成了话音的一端—端传输。采用双套接字技术,阐述了主要函数的使用要点,以及基于异步选择机制的应用方法。同时,给出了相应的实例程...
  • ghj1976
  • ghj1976
  • 2001-08-19 18:57:00
  • 1416

js中nodeName nodeType nodeValue的用法和区别

js中nodeName  nodeType  nodeValue的用法和区别  Title function test(){ ...
  • miachen520
  • miachen520
  • 2016-07-08 08:07:25
  • 1024

18、Dom--childNodes和nodeType的结合使用

1、DOM节点  . childNodes  nodeType  两个一起使用,避免浏览器的差异    .获取子节点(第一级别的节点信息)        .IE获取的就是,标签节点的个数       ...
  • zbw18297786698
  • zbw18297786698
  • 2016-06-03 16:24:27
  • 486

JS nodeType返回类型

JS nodeType返回类型 前几天朋友正好问道 这个 js的nodeType是个什么概念(做浏览器底层的)正好遇到这篇文章可以向大家解释下 将HTML DOM中几个容易常用...
  • qyf_5445
  • qyf_5445
  • 2013-07-03 13:33:59
  • 9129

jquery冲突的关键字nodeName、nodeValue和nodeType!

【缘由】在工作流数据库设计的时候,  都节点管理的功能。  结果有2个字段为  NODE_TYPE, NODE_NAME, 在编辑的时候,form表单load出现问题, 字段为nodeType和nod...
  • hdfyq
  • hdfyq
  • 2016-10-13 12:22:02
  • 1543

JS清除HTML之间的空白节点

JS清除HTML之间的空白节点
  • qq_28339819
  • qq_28339819
  • 2017-12-06 21:10:24
  • 200

忽略解析xml文件时的text节点

xml 忽略解析时text节点
  • fangfangwenwen
  • fangfangwenwen
  • 2017-03-30 15:43:38
  • 403

html节点树分享(html元素间的空格会在节点树上产生一个text节点)

这个小知识点也是我偶然遇到的~~搞了半天才弄懂 根据w3c的HTML DOM标准,HTML中所有内容都是节点,当我用原生js获取dom中的某个节点时,却没有拿到我想拿到的节点。。。 html结构是这...
  • juzipidemimi
  • juzipidemimi
  • 2017-10-18 19:39:00
  • 139

DOM操作HTML文档;js创建表格;清除空文本节点

DOM 定义了访问和操作 HTML 文档的标准方法。 1、DOM访问节点 document.documentElement:返回HTML根元素  var ohtml = document.docum...
  • u011955860
  • u011955860
  • 2013-12-05 16:23:58
  • 1536

Text 节点与标准库

Text 节点 可以通过nodeValue属性或者data属性访问节点中包含的文本,这两个属性中包含的值相同。 对nodeValue 的修改也会通过data反应出来,反之亦然。 he...
  • q812258983
  • q812258983
  • 2017-11-14 14:49:09
  • 150
收藏助手
不良信息举报
您举报文章:NodeType节点及 去空白文本节点
举报原因:
原因补充:

(最多只允许输入30个字)