使用childNodes时如何解决返回nodelist中空白文本节点的问题

最新推荐文章于 2023-04-12 10:32:24 发布

RebootTang

最新推荐文章于 2023-04-12 10:32:24 发布

阅读量2.3k

点赞数

CC 4.0 BY-SA版权

文章标签： html dom 空节点正则表达式

本文链接：https://blog.youkuaiyun.com/applyTang/article/details/92853594

在处理DOM时，使用childNodes会包含空的文本节点。本文介绍了一种通过正则表达式删除这些空节点的方法，以确保仅获取所需元素。通过检查nodeName和nodeValue，可以确定并移除空白文本节点，同时介绍了removeChild()方法的工作原理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在使用childNodes属性来返回节点的全部子节点的时候，childNodes会将子节点之间的空格看做一个空的文本节点一并返回。
html代码如下：

<div id="content">
     <ul>
         <li><span>HTML</span></li>
         <li><span>JS</span></li>
         <li><span>CSS</span></li>
         <li><span>JS</span></li>
      </ul>
</div>

    <script>
        function myfunction(sectionId) {
        var findUl = document.getElementById(sectionId).getElementsByTagName("ul")[0];
        var findLi = findUl.childNodes;
        console.log(findLi);
        }
        myfunction("content");
    </script>

打印出的结果：可以看到一共返回了9个子元素，其中有5个空的text节点，我们可以使用正则表达式将这些空的文本节点从删除掉（或者将空格从HTML中删除，又或者使用children来获取子节点）

删除空白文本节点的方法：

<script>
        function myfunction(sectionId) {
        var findUl = document.getElementById(sectionId).getElementsByTagName("ul")[0];
        var findLi = findUl.childNodes;
        for(i = 0; i < findLi.length; i++) {
            if(findLi[i].nodeName == "#text" && /\s/.test(findLi[i].nodeValue)) {
                findUl.removeChild(findLi[i]);
            }
        }
        console.log(findLi);
    }
      myfunction("content");
    </script>

之后可以看到打印结果只包括所需要的四个list子元素。nodeName和nodeValue的值可以从第一个打印结果中找到，然后用这两个值确定是否为要删除的空白文本节点。

这里在说一下removeChild（）方法，它从dom中删除一个子节点，并返回所删除的子节点。被移除的这个子节点任然存在与内存当中，只是没有添加到当前文档的dom中，所以这个被移除的子节点还可以被重新添加回来，前提是你需要用一个变量来保存这个被移除的子节点。列如：

var oldNode = findUl.removeChild(findLi[i]);