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 中空白元素节点的更多相关文章

  1. html5中的dom中的各种节点的层次关系是怎样的

    html5中的dom中的各种节点的层次关系是怎样的 一.总结 一句话总结:Node节点是所有节点的基类,所以都继承它的方法 1.dom提供在js中动态修改html标签的作用 比如增加修改标签等,并且是 ...

  2. JS基础入门篇( 三 )—使用JS获取页面中某个元素的4种方法以及之间的差别( 一 )

    1.使用JS获取页面中某个元素的4种方法 1.通过id名获取元素 document.getElementById("id名"); 2.通过class名获取元素 document.g ...

  3. javaScript获取文档中所有元素节点的个数

    HTML+JS 代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset=&qu ...

  4. DOM中获取元素的节点兼容IE6-8封装,带jquery源码分析children

    <ul id="box"> <li>第一个节点</li> <li>第二个节点</li> <li>第三个节点& ...

  5. DOM基础+domReady+元素节点类型判断

    DOM节点类型  nodeType element  1    Node.ELEMENT_NODE   元素节点 attr  2   Node.ATTRIBUTE_NODE  属性节点 text  3 ...

  6. 原生JS和jQuery中基本的节点操作

    js中节点操作**document.createElement()**用来生成网页元素节点,参数为元素的标签名: **document.createTextNode()**用来生成文本节点,参数为所要 ...

  7. javascript中获取元素节点的文本

    <div id="test"> <strong>i'm strong</strong> </div> 1.elementNode.i ...

  8. js 获取iframe中的元素

    今天要修改编辑器插件中的元素遇到的问题 jquery 在父窗口中获取iframe中的元素 1.Js代码 格式:$("#iframe的ID").contents().find(&qu ...

  9. js 删除 数组中某个元素(转载)

    来源:https://www.jb51.net/article/134312.htm js删除数组中某一项或几项的几种方法 https://www.jb51.net/article/154737.ht ...

随机推荐

  1. Linux系统 磁盘IO过高排查总结

    最近做的一个电商网站因为磁盘 I/O 过高导致访问速度奇慢,问题存在两个月有余未得到解决办法.此次排查原因的经验可以作下次问题的参考. 1.会看懂 top 系统命令出来的各项参数.此次是无意中发现 u ...

  2. WPF DataGrid 绑定行双击行命令

    WPF DataGrid 绑定行双击行命令 <DataGrid ...> <DataGrid.InputBindings> <MouseBinding MouseActi ...

  3. 论文笔记:Auto-DeepLab: Hierarchical Neural Architecture Search for Semantic Image Segmentation

    Auto-DeepLab: Hierarchical Neural Architecture Search for Semantic Image Segmentation2019-03-18 14:4 ...

  4. 七牛云图片的存储与处理--基于node

    1. 手动上传 . 快速入门,这个简单,可以参考七牛官方文档: https://developer.qiniu.com/kodo/manual/1233/console-quickstart#step ...

  5. xampp集成环境下重置mysql的密码

    第一步:打开两个命令行工具,都进入到你的xampp安装目录下的mysql下的bin目录,如我安装的位置是D:xampp/mysql/bin: 第二步:在完成第一步的情况下,输入:mysqld --sk ...

  6. linux下dpkg繁忙,解决方法

    安装软件,提示: E: 无法获得锁 /var/lib/dpkg/lock - open (11: 资源暂时不可用)E: 无法锁定管理目录(/var/lib/dpkg/),是否有其他进程正占用它? 只要 ...

  7. vue cli 3 lintOnSave 配置有时无效问题

    一个使用vue cli 3.2创建的项目,创建时未开启 lintOnSave,后来希望开启并设置为 lintOnSave: 'error',但配置不生效. 解决方法1:新创建项目(此时vue cli ...

  8. Go语言库之strconv包(转载自--http://blog.csdn.net/alvine008/article/details/51283189)

    golang strconv.ParseInt 是将字符串转换为数字的函数 func ParseInt(s string, base int, bitSize int) (i int64, err e ...

  9. Jenkins 改成中文语言显示

    到系统管理    插件管理中下载如下插件接口  Localization: Chinese (Simplified) 搜索的时候用ctrl+f 进行搜索,不要用Jenkins下面下的filter 只有 ...

  10. (简单)华为P9plus VIE-AL00的usb调试模式在哪里开启的经验

    每次我们使用pc接通安卓手机的时候,如果手机没有开启Usb调试模式,pc则没能成功检测到我们的手机,有时,我们使用的一些功能比较强的的app比如之前我们使用的一个app引号精灵,老版本就需要打开Usb ...