javascript之解决dom中存在的空白节点问题

最新推荐文章于 2023-07-22 15:09:25 发布

zz410675629

最新推荐文章于 2023-07-22 15:09:25 发布

阅读量4.2k

点赞数 2

分类专栏： web相关问题 javascript基础学习

本文链接：https://blog.csdn.net/zz410675629/article/details/38556307

版权

javascript基础学习同时被 2 个专栏收录

18 篇文章 0 订阅

订阅专栏

web相关问题

7 篇文章 0 订阅

订阅专栏

下面有一段html文档

<body>
    <h1>Introduction to the DOM</h1>
    <p class="test">There are a number of reasons why the DOM is awesome, here are some:</p>
    <ul>
        <li id="everywhere">It can be found everywhere.</li>
        <li class="test">It's easy to use.</li>
        <li class="test">It can help you to find what you want, really quickly.</li>
    </ul>
</body>

当我们得到ul标签的下一个节点的时候，我们会习惯的引用下面的js

 var every = document.getElementById( "everywhere" );
        // and remove it from the document
 console.info(every.parentNode.childNodes[0].nodeType);

但是我们发现，控制台打印的 nodeType:3.(chorme浏览器测试)

出现这样的问题是因为什么呢？

这是因为在UL标签和LI标签之间出现了空格，被浏览器误认为是文本节点，所以打印出nodeType=3,而实际我们需要得到的是元素节点LI

如何解决这个问题呢？

原理很简单，即去除节点之间的空格即可；

下面就是一段清除空格的函数

function cleanWhitespace(oEelement){
            for(var i=0;i<oEelement.childNodes.length;i++){
                var node=oEelement.childNodes[i];
                if(node.nodeType==3 && !/\S/.test(node.nodeValue)){
                    node.parentNode.removeChild(node)
                }
            }
        }

通过使用此函数，控制台打印出来的 nodeType:1--》这才是正解。

具体详细例子见如下index.html

<html>
<head>
    <title>Introduction to the DOM</title>
    <script>
    // We can't manipulate the DOM until the document
    // is fully loaded
    window.onload = function(){
        // Locate the element with an ID of 'everywhere'
        var every = document.getElementById( "everywhere" );
        // and remove it from the document
        var a=every.parentNode;
        console.info(a.childNodes[0].nodeType);
        
        cleanWhitespace(a)
        console.info(a.childNodes[0].nodeType);
        //清除空白函数
        function cleanWhitespace(oEelement){
            for(var i=0;i<oEelement.childNodes.length;i++){
                var node=oEelement.childNodes[i];
                if(node.nodeType==3 && !/\S/.test(node.nodeValue)){
                    node.parentNode.removeChild(node)
                }
            }
        }

    };

    
    </script>
</head>
<body>
    <h1>Introduction to the DOM</h1>
    <p class="test">There are a number of reasons why the DOM is awesome, here are some:</p>
    <ul>
        <li id="everywhere">It can be found everywhere.</li>
        <li class="test">It's easy to use.</li>
        <li class="test">It can help you to find what you want, really quickly.</li>
    </ul>
</body>
</html>

zz410675629

关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
javascript之解决dom中存在的空白节点问题

下面有一段html文档 Introduction to the DOM There are a number of reasons why the DOM is awesome, here are some: It can be found everywhere. It's easy to use. It can
复制链接

扫一扫