JS childNodes属性和想象中不一样，空白节点的处理

ゞ浴缸里的玫瑰 2022-05-22 08:24 159阅读 0赞

## 关于childNodes属性 ##

childNodes返回的是所有的孩子节点，但是当我实际尝试的时候发现，孩子节点的长度并不是我想要的那样，于是我便展开了探索

## 示例代码： ##

html 部分

<ul id="imagegallery">
        <li><a id="picture1" href="images/1.jpg" title="Picture 1">图片1</a></li>
        <li><a id="picture2" href="images/2.jpeg" title="Picture 2">图片2</a></li>
        <li><a id="picture3" href="images/3.jpeg" title="Picture 3">图片3</a></li>
    </ul>

测试js:

var result = "";
    var ulChilds = document.getElementById("imagegallery").childNodes;
    var length = ulChilds.length;
    document.write(length+"<br>");
    for (var i=0;i<ulChilds.length;i++){
        result = result+ulChilds[i].nodeName +"<br>";
    }
    document.write(result);

浏览器显示结果：

7
    #text
    LI
    #text
    LI
    #text
    LI
    #text

## 问题 ##

按照我们正常的思路，这个孩子节点应该是3个li啊，怎么就成了7个，而且这里面怎么多了这么多的text呢？

答案：我们为了清晰，把代码排版了，浏览器把回车也当做了一个节点，所以多了4个text

## 解决方案 ##

思路：用正则表达式和nodeType类型去匹配空文本节点，然后让父节点删除空文本节点即可。

<script type="text/javascript"> var result = ""; // 正则表达式 var re = /\s/; var ulChilds = document.getElementById("imagegallery").childNodes; document.write(ulChilds.length + "<br>"); for (var i = 0; i < ulChilds.length; i++) { var node = ulChilds[i]; // nodetype 和 re的正则匹配 if (node.nodeType == 3 && re.test(node.nodeValue)) { node.parentNode.removeChild(node); } } document.write(ulChilds.length + "<br>"); for (var i = 0; i < ulChilds.length; i++) { result = result + ulChilds[i].nodeName + "<br>"; } document.write(result); </script>
    
    ----output----
    7
    3
    LI
    LI
    LI

这样问题就得到了解决。

发表评论取消回复

表情：

评论列表（有 0 条评论，159人围观）

还没有评论，来说两句吧...

相关阅读

相关 XML对代码中的空白处理

这篇文章主要介绍了XML对代码中的空白处理,文中介绍到了XML书写中的有效空白与无效空白的区分,需要的朋友可以参考下 1、在XML规范中，空白包括空格，制表符和空行。在编辑X

系统管理员/ 2024年03月31日 15:00/ 0 赞/ 70 阅读

相关 MyBabits 中当实体类中的属性名和表中的字段名不一样，怎么办？

解决方案： 1：写sql语句时起别名； 2：在MyBatis的全局配置文件中开启驼峰命名规则（mapUnderscoreToCamelCase）； 3：在Mapper映射

墨蓝/ 2022年10月07日 06:52/ 0 赞/ 160 阅读

相关一样的Android，不一样的学习

这几年，Android开始慢慢流行起来，很多项目也开始涉及这部分内容，所以学习Android也就变的很有意义了。学什么学

桃扇骨/ 2022年08月23日 14:49/ 0 赞/ 234 阅读

相关不一样的视角，不一样的VR

\ 写在前面 ![1240][] 直到上周，我才跟同事一起看了[Google I/O 2016][Google I_O 2016]发布会。其实也并不是不想关注VR，只是觉得

缺乏、安全感/ 2022年07月19日 05:57/ 0 赞/ 206 阅读

相关 js中空白节点的问题

带着问题上路是我喜欢的学习方式 1.为什么会出现空白节点的问题因为浏览器的差异在对于非空文本节点前面或后面有空格或换行符等特殊的文本字符组成，IE和FF就会产生分歧，

缺乏、安全感/ 2022年07月15日 15:20/ 0 赞/ 164 阅读

相关 js节点属性的创建添加删除

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8">

快来打我*/ 2022年07月13日 23:16/ 0 赞/ 205 阅读

相关 JS childNodes属性和想象中不一样，空白节点的处理

关于childNodes属性 childNodes返回的是所有的孩子节点，但是当我实际尝试的时候发现，孩子节点的长度并不是我想要的那样，于是我便展开了探索示例代码：

ゞ浴缸里的玫瑰/ 2022年05月22日 08:24/ 0 赞/ 160 阅读

相关 python在dict如何使用动态属性【动态变量属性名称】名称【和js不一样】

transaction_status = "finish" dd = {transaction_status:transaction_sta

Myth丶恋晨/ 2021年08月20日 02:58/ 0 赞/ 310 阅读

相关 JS--JavaScript访问节点（childNodes、parentNode、firstChild、lastChild、nextSibling、previousSibling）

访问节点通过节点之间的树形关系，可以定位文档中的每个节点。DOM为Node类型定义如下属性，以方便JavaScript对文档树中每个节点进行遍历。 ownerD

矫情吗；*/ 2021年08月13日 16:28/ 0 赞/ 455 阅读

相关 html中childNodes节点属性

之前看html后对节点这个东西的盖帘一直很模糊，so在网上找了一本《DOM编程艺术》的PDF文档来看，编程试验了下

红太狼/ 2021年03月22日 13:30/ 0 赞/ 517 阅读