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

ゞ浴缸里的玫瑰 2022-05-22 08:24 195阅读 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 条评论，195人围观）

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

相关阅读

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

当实体类中的属性名和表中的字段名不一样时，通常需要使用一种映射机制来将表中的字段名映射到实体类的属性上。这种映射机制通常使用注解或配置文件来实现。一种常见的方法是使用Jav

雨点打透心脏的1/2处/ 2024年02月05日 18:55/ 0 赞/ 89 阅读

相关安装个指定版本的 jenkins 发现和想象的不太一样？

对于图片里的内容你们是怎么认为的呢？我呢，刚好最近在和同事一起折腾 jenkins，我觉得这里说的就是一个类 "Devops" 的化处理思想，Devops改变世界。用 je

灰太狼/ 2023年10月03日 09:31/ 0 赞/ 12 阅读

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

我们使用idea通过右上角Database可以将数据库中的数据直接导入，点击此处有教程。通过上面快速导入的方法idea会把mgr\_id，mgr\_name该字段，转变为m

傷城~/ 2023年01月21日 02:06/ 0 赞/ 4 阅读

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

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

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

相关 js中空白节点的问题

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

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

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

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

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

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

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

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

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

transaction_status = "finish" dd = {transaction_status:transaction_sta

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

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

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

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

相关 html中childNodes节点属性

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

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