• 因浏览器而异的空白节点(js清除空白节点)


    先看下面的代码:
    <dl id="dll">
      <dt>title</dt>
      <dd>definition</dd>
    </dl>

    分别在IE浏览器FF浏览器下执行下面的代码,作用是显示<dl>标记子节点的个数。
    var dll=document.getElementById("dll");
    alert(dll.childNodes.length);

    结 果显示:IE为2,FF为5。两个浏览器产生了不同的结果,这是由于一段文本是一个独立的节点,但如果这段文本仅仅由空格,换行,制表符这些特殊的文本字 符组成,IE和FF就会产生分歧,IE会忽略这些节点,而FF则认可这些节点。分歧产生的原因是FF认为<dl> 和<dt>,</dt>和<dd>,</dd>和<dl>之间的空白节点也是一个单独的节 点,所说FF的结果是5,而IE的结果是2。

    对于节点的认定,IE在不同的场合也有不同的结果,如下:
    <div>
     <img alt="ttt" src="yy.gif" />
     <span>some here</span>
    </div>

    IE认为改div有4个子节点,而FF仍然认为是5个,通过测试发现IE忽略了<div>和<img>标记之间的空白文本节点,而其他空白文本节点则未被忽略。

    这种分歧给开发带来了很大的难度,它影响了childNodes[index],nextSibling,previousSibling这些间接节点引用的行为,因为nextSibling很可能是一个无用的空白文本节点。解决这个问题是避免文档中出现文本节点。如:
    <dl id=”dll”><dt>title</dt><dd>definition</dd></dl>

    这样看上去不好阅读。

    另一种解决的办法就是使用节点的判断,判断要引用的节点是不是需要的节点。prototype-1.3.1框架中提供了一个方法来解决这个问题,在使用前先删除其中的空白节点:
    <script language="javascript" type="text/javascript">
    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>

    所以第一例子的代码就可以改成:

    var dll=document.getElementById("dll");
    cleanWhitespace(dll);
    alert(dll.childNodes.length);

    结果在IE和FF都是2。

  • 相关阅读:
    【leetcode】11. 盛最多水的容器
    【leetcode】8. 字符串转换整数 (atoi)
    【leetcode】6. Z 字形变换
    【leetcode】5. 最长回文子串
    【leetcode】LCP 19. 秋叶收藏集
    删除第一个节点问题
    问一个大学学习计算机这门专业的问题
    Struts文件上传页面上传后显示“连接已重置”
    2013-12-6 思杨没吃饱 饿醒了
    2013-12-7 snoopy乐园中的思杨
  • 原文地址:https://www.cnblogs.com/autismtune/p/5394377.html
Copyright © 2020-2023  润新知