JS 清除DOM 中空白元素节点

Posted 马三荷

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JS 清除DOM 中空白元素节点相关的知识,希望对你有一定的参考价值。

html中的空白节点会影响整体的HTML的版面排榜

例如:

制作百度首页时,两个input之间的空白节点将本来是要整合在一起的搜索栏硬是把按钮和搜索框分离出现好丑的间隙

 

这时我们就可以用js清除这个空白格

 

下面是HTML的代码

<form id="fm" name="f" action="post" >
            <span class="search_box">
                <input name="s_r" type="text" maxlength="255" class="s_r" id="s_r" >
                <span class="search_box_btn"></span>
            </span>
            <span class="search_btn">
                <input type="submit" name="search" id="search" class="s_btn" value="百度一下">
            </span>
        </form>

css代码

form{
    position: relative;
}

.search_box{
    display: inline-block;
    width: 539px;
    height: 34px;
    border: 1px solid #b6b6b6;
    border-width: 1px;
    border-style:solid ;
    vertical-align: top;
    border-color:#b8b8b8 transparent #ccc #b8b8b8;
    position: relative;

}

.s_r{
    width: 500px;
    height: 22px;
    font: 16px  arial;
    line-height: 22px;
    margin: 6px 0 0 7px;
}

.search_box_btn{
    position: absolute;
    width: 18px;
    height: 16px;
    background: #fff url(../image/search_box_btn.png) no-repeat;
    top: 50%;
    margin-top: -8px;
    cursor: pointer;

    right: 11px;
}
.search_btn{
    display: inline-block;
}

.s_btn{
    width: 100px;
    height: 36px;
    color: #fff;
    border-bottom: 1px solid #2d78f4;
    background: #3385ff;
}

js清除节点,为了重复利用,可以将它包装成一个函数:

 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("fm")

问题就解决了,嘻嘻

 

以上是关于JS 清除DOM 中空白元素节点的主要内容,如果未能解决你的问题,请参考以下文章

JS——DOM操作(childNodesnodeType和children区别与用法)

jQuery的DOM操作

JS DOM对象,控制HTML元素

js中,dom元素和节点的区别

JS中的DOM操作怎样添加移除移动复制创建和查找节点

JS HTML DOM元素节点