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);
                }
            }
        }
版权声明:本文为博主原创文章,未经博主允许不得转载。

JS nodeType返回类型

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

js nextSibling属性和previousSibling属性和NodeType返回类型

1:nextSibling属性         该属性表示当前节点的下一个节点(其后的节点与当前节点同属一个级别);如果其后没有与其同级的节点,则返回null。        需要特别注意...
  • sou3713
  • sou3713
  • 2013年07月08日 16:52
  • 919

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

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

JQuery nodeName、nodeValue 以及 nodeType

最近在读jquery nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。 (一)nodeName 属性含有某个节点的名称。 元素节点的 nodeName...
  • editionman
  • editionman
  • 2014年07月24日 15:18
  • 2760

认识DOM的三大节点:元素节点,文本节点,属性节点以及nodeName,nodeType,nodeValue的区别

既然看做树形结构,那么就有对应的节点。DOM中有三大节点,分别是元素节点,文本节点,属性节点 元素节点:构成了DOM的基础。文档结构中,是根元素,代表整个文档,其他的还有,,等等。元素节点之间可以相互...
  • u010792238
  • u010792238
  • 2014年04月12日 15:54
  • 5119

js中nodeType类型

· nodeType  (返回节点的类型,一般是整数) · 元素element     1  ---指标签  · 属性attr             2   color=""         g...
  • rj532029887
  • rj532029887
  • 2014年10月09日 20:35
  • 1111

nodeValue和nodeType

nodeValue看到value我们就知道是值了,nodeType看到Type就知道是类型了   nodevalue是取得文本值  当nodeType==3的时候才有会返回值。不然会返回一个null值...
  • u011551941
  • u011551941
  • 2015年03月18日 11:12
  • 436

Windows系统ipconfig /all查询结果Node Type中的含义

Windows系统ipconfig /all查询结果Node Type中的含义
  • snlying
  • snlying
  • 2011年03月08日 14:57
  • 6637

JS DOM 中的空白节点的过滤

看如下HTML代码 DOM Test         由于DOM中,空白也是作为一个文本节点,而两个input元素后面都有空白(回车、空格、...
  • zsf8701
  • zsf8701
  • 2012年08月07日 16:29
  • 4862

移除空白文本节点(在非IE浏览器中,换行符被当作空白文本节点)

//移除空白节点(在非IE浏览器中换行符被当作空白的文本节点) function removeWhiteNode(node){ for(var i=0;i...
  • fututadeyoushang
  • fututadeyoushang
  • 2017年01月04日 17:46
  • 182
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:NodeType节点及 去空白文本节点
举报原因:
原因补充:

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