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中空白节点的问题

带着问题上路是我喜欢的学习方式1.为什么会出现空白节点的问题因为浏览器的差异在对于非空文本节点前面或后面有空格或换行符等特殊的文本字符组成,IE和FF就会产生分歧,IE会忽略这些节点,而FF则认可这些...
  • osdfhv
  • osdfhv
  • 2016年10月20日 18:15
  • 1847

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

DOM 定义了访问和操作 HTML 文档的标准方法。 1、DOM访问节点 document.documentElement:返回HTML根元素  var ohtml = document.docum...

删除空白文本节点

var oUl = document.getElementById("ul1"); //获取ul节点 deleteSpace(oUl); //传入父节点,删除它子节点中的空白文本节点 f...

DOM遍历元素节点时忽略空格文本节点的方法

元素节点之间的空格在浏览器中会被解释为文本节点给父节点操作子节点方法带来困扰,DOM中扩展了方法解决 A.childElementCount--->返回子元素(不包括文本节点和注释)的个数 B.fir...
  • jarniyy
  • jarniyy
  • 2017年03月16日 14:28
  • 522

JS DOM 中的空白节点的过滤

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

Vue.js 动态数据处理 简单版

Vue.js 动态数据处理,增删改查基本页面展示,简单版

js 判断上传图片尺寸大小(var img =new Image())

上传时常常会碰到限制图片尺寸的需求,而在后台通过byte判断大小,虽可行,但如果在JS中判断显然是更好的选择,尤其是在不限制文件大小,只限制尺寸时。  通常会使用创建Image对象,或添加一个来获取,...

jQuery的index()原生js实现以及删除空白文本节点函数

funtion findIndex ( elem, array, i ){//实现jQuery.inArray()方法 var len; if ( array ) { ...

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

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

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

既然我们把网页文档看做树形结构,那么就有对应的节点。诚然DOM中有三大节点,分别是元素节点,文本节点,属性节点 元素节点:构成了DOM的基础。文档结构中,是根元素,代表整个文档,其他的还有,,,等等...
  • judyge
  • judyge
  • 2015年12月09日 11:10
  • 1783
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:NodeType节点及 去空白文本节点
举报原因:
原因补充:

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