`

childNodes behavior diffrent in IE & FF

    博客分类:
  • HTML
阅读更多
IE and FF count in different ways the childNodes. FF (DOM compliant mode) counts even the possible textNodes (the gaps between tags) while IE counts only some of them.

To avoid this, use one the solutions:
1. use getElementsByTagName() rather than childNodes[]
2. use a while loop and nodeType attribute to check whether a child is a tag or a text
3. use a "gaps cleaner" code onload :
4. manually clear the gaps, of course
Code:

var notWhitespace = /\S/;
function cleanWhitespace(node) {
  for (var x = 0; x < node.childNodes.length; x++) {
    var childNode = node.childNodes[x]
    if ((childNode.nodeType == 3)&&(!notWhitespace.test(childNode.nodeValue))) {
// that is, if it's a whitespace text node
      node.removeChild(node.childNodes[x])
      x--
    }
    if (childNode.nodeType == 1) {
// elements can have text child nodes of their own
      cleanWhitespace(childNode)
    }
  }
}
}

分享到:
评论

相关推荐

    JS读取XML例子(兼容IE和FF).rar

    这个"JS读取XML例子(兼容IE和FF).rar"压缩包包含了一个示例,展示了如何在不依赖任何插件的情况下,使用JavaScript在Internet Explorer(IE)和Firefox(FF)等浏览器中读取XML文件。下面我们将详细探讨JavaScript...

    IE与FireFox中的childNodes区别

    在JavaScript中,对DOM元素进行操作和遍历是常见...总之,虽然`childNodes`在IE和Firefox中的行为略有不同,但通过适当的条件判断,我们可以编写出既兼容IE又适用于Firefox的代码,确保在处理DOM遍历时的正确性和效率。

    js -- childNodes

    在JavaScript的世界里,`childNodes` 是一个非常重要的属性,它用于获取任何节点(如元素、文本或注释)的所有子节点。这篇博文“js -- childNodes”深入探讨了这一概念,帮助开发者更好地理解和利用这个特性。 `...

    ajax或者jquery操作xml相关源文件

    info[0].childNodes[0].childNodes[0].childNodes[0].nodeValue&#41;;//获取节点值 //alert&#40;info.getAttribute('type'&#41;); } catch (exception) { alert&#40;"The node is not exist"&#41;; } var str =...

    js操作XML文件(兼容FF,IE)

    可以使用`childNodes`属性和`firstChild`/`nextSibling`方法遍历节点。例如: ```javascript for (var child = rootElement.firstChild; child; child = child.nextSibling) { // 处理child节点 } ``` 5. **...

    js浏览器兼容手册OSOS.pdf

    10. `parentElement`和`children`问题:FF使用`parentNode`和`childNodes`,而IE中可能有`parentElement`和`children`。`childNodes`在不同浏览器中的处理方式不同,可能包含空白文本节点。建议使用`...

    javascript在IE和Firefox中兼容性问题

    `childNodes`属性在IE和Firefox中的行为也有所不同。IE会将空格和换行符视为文本节点,而Firefox则不会。因此,当遍历元素的子节点时,需要考虑这些差异。 3. **_frame1.html 和 FrameTest.html** 这些文件涉及到...

    javascript浏览器兼容手册

    - **IE** 和 **FF** 对于 `parentNode` 和 `childNodes` 的处理也不完全一致,特别是在处理 `&lt;form&gt;` 内的 `&lt;table&gt;` 结构时,IE 和 FF 返回的 `parentNode` 可能不同。 - **IE** 中使用 `node.parentNode....

    childNodes 用法两例

    `childNodes` 是一个在DOM(文档对象模型)中非常重要的属性,它返回一个NodeList,包含了元素的所有子节点,包括文本节点、注释节点以及子元素。这个属性主要用于遍历和操作HTML或XML文档的结构。下面我们将详细...

    使用 childNodes 和 rows,cells 操作表格列着色源代码

    本文包含两个源代码:使用 childNodes 操作表格列着色、使用 rows,cells 操作表格列着色。两种着色方式有什么区别?具体分析请参阅作者博客:http://blog.csdn.net/defonds/archive/2010/07/17/5741214.aspx。

    javascript兼容手册.doc

    - `parentNode.childNodes`在FF和IE中的解释不同,FF的`childNodes`可能包含空白文本节点。可以使用`getElementsByTagName()`避免这个问题。 - FF中的节点没有`removeNode`方法,需要使用`node.parentNode....

    js在IE和fireFox的区别

    ### JavaScript在Internet Explorer (IE) 和 Firefox 中的区别与解决方案 #### 一、获取HTML元素的方式差异 1. **通过ID获取元素**: - **IE**:支持`document.getElementById`和`document.all`两种方式。 - ...

    火狐和IE支持javaScript脚本的一些区别

    IE中`parentNode`和`childNodes`的使用与Firefox基本一致,但在处理子节点集合时,Firefox提供了更强大的`getElementsByTagName`方法,而IE中的`childNodes`可能包含文本节点和其他非元素节点,这在处理时需额外注意...

    JavaScript操作DOM元素的childNodes和children区别

    对于DOM元素,children是指DOM Object类型的子对象,不包括tag之间隐形存在的TextNode,而childNodes包括tag之间隐形存在的TextNode对象。 具体看一下针对children和childNodes在chrome环境下的测试: &lt;!DOCTYPE...

    比较全面的event对像在IE与FF中的区别 推荐

    Firefox则使用`parentNode`、`parentNode.childNodes`和`node.parentNode.removeChild(node)`来实现相同的功能。 总的来说,理解并掌握不同浏览器间事件对象的差异,对于编写兼容性良好的JavaScript代码至关重要。...

    ie和火狐的兼容问题总结

    ### IE和火狐的兼容问题总结 在前端开发过程中,我们经常会遇到不同浏览器之间的兼容性问题,特别是Internet Explorer(简称IE)与Firefox(火狐)之间的差异。由于这两种浏览器在处理CSS和JavaScript方面存在显著...

    IE6/7/8中使用innerHTML清空元素,其子元素也被清空

    本文将深入探讨一个特定的问题,即在Internet Explorer 6、7和8(以下简称IE6/7/8)浏览器中使用`innerHTML`属性清空元素时,其子元素也会被一并清空的特性。这个现象在其他现代浏览器中并不常见,因此了解这一问题...

    IE下使用XML DOM解析XML文件(ASP.NET Web)

    本文将深入探讨如何在Internet Explorer(IE)环境下利用XML Document Object Model (DOM) API来解析XML文件。DOM是一种标准的接口,允许程序和脚本创建、修改以及访问XML文档的结构。 首先,理解XML DOM是非常重要...

Global site tag (gtag.js) - Google Analytics