`

IE与FF对 DOM节点类型的部分不同

阅读更多

万维网联盟(W3C)定义HTML DOM 标准节点有以下几种 ()

类型 值 说明  
ELEMENT_NODE  1 元素节点 *
ATTRIBUTE_NODE     2 属性节点 *
TEXT_NODE   3 文本节点 *
CDATA_SECTION_NODE 4 CDATA 区段  
ENTITY_REFERENCE_NODE 5 实体引用  
ENTITY_NODE 6 实体  
PROCESSING_INSTRUCTION_NODE 7 处理指令  
COMMENT_NODE 8 注释节点 *
DOCUMENT_NODE 9 文档节点 *

注: * 表示常用

IE与FF 对 以上节点的 "理解" 有差异,如比我们写js :  对象.nextSibling   ,  来取得对象的下一个兄弟节点,
在IE中,只会取ELEMENT_NODE (元素节点), 忽略其它类型节点.     FF会取得上面各种类型节点.

如:
<table>
  <tr  id="nst"><td></td></tr>(这里有换行,就是一个文本节点)
  <tr><td></td></tr>
</table>
--------------------------------------
<js>
var o=$('nst');
var next=o.nextSibling;
</js>
---------------------------------------
结果:
IE中:next 是元素节点 (第二个<tr>)
FF中:next 是文本节点 (那个换行)

解决办法:   通过判断 nodeType == 1  来解决问题

// 获得下一个元素对象(nodeType=1)


function $NE(e)
{
	e = e.nextSibling;
	while

 (e && e.nodeType != 1){e = e.nextSibling;}
	return

 e;
}
// 获得第一个元素对象(nodeType=1)


function $FE(e)
{
	e = e.firstChild;
	while

 (e && e.nodeType != 1){e = e.nextSibling;}
	return

 e;
}
分享到:
评论

相关推荐

    采集基本概念Web信息检索与数据抓取网页DOM结构3优秀文档.pptx

    DOM 中的节点类型有很多,如 `Document` 节点、`Element` 节点、`Attribute` 节点等。`Document` 节点是文档节点,所有任何节点的根节点,即文档根对象。 在 HTML 中,访问 DOM 对象的节点属性在所有浏览器中都支持...

    兼容FF,IE的JAVASCRIPT日历控件

    1. **DOM操作**:为了在页面上显示日历,控件需要与HTML元素交互,如创建和修改DOM节点。这可能涉及到`document.createElement`、`appendChild`、`innerHTML`等DOM操作。 2. **事件处理**:控件需要监听用户的交互...

    JS 动态获取节点代码innerHTML分析 [IE,FF]

    JavaScript中的动态获取节点和操作节点是前端开发中的常见任务,特别是在处理DOM(Document Object Model)时。本篇文章主要探讨了在Internet Explorer(IE)和Firefox两种浏览器环境下,如何使用`innerHTML`属性...

    常用DOM整理

    本文对这些常见的问题进行了整理,并提供了一系列实用的DOM操作技巧。 首先,要了解DOM树是由不同类型的节点构成的。节点类型包括元素节点(1)、属性节点(2)、文本节点(3)等等。在JavaScript中,我们使用这些...

    javascript浏览器兼容手册

    FF 中 `childNodes` 包含所有子节点,而 IE 中则可能不包含某些特定类型的节点。 - **IE** 和 **FF** 对于 `parentNode` 和 `childNodes` 的处理也不完全一致,特别是在处理 `&lt;form&gt;` 内的 `&lt;table&gt;` 结构时,IE 和...

    Dom操作之兼容技巧分享

    这些文本节点在某些浏览器中(比如IE)会被自动过滤掉,但在Firefox(FF)和Chrome等浏览器中则会被保留。这意味着在这些浏览器中,DOM树中实际上包含着你可能未曾注意的空白文本节点。 例如,当我们使用JavaScript...

    javascript读写XML实现广告轮换(兼容IE、FF)

    ### JavaScript读写XML实现广告轮换(兼容IE、FF) #### 知识点概述 1. **广告轮换机制**:该文章介绍了一个简单的广告轮换机制,该机制通过JavaScript和XML结合来实现。采用JavaScript读取XML文件中的广告信息,...

    获取div编辑框,textarea,input text的光标位置 兼容IE,FF和Chrome的方法介绍

    3. 通过DOM节点的父节点或者自身来获取与编辑元素相对应的标签名称。 4. 根据标签名称判断光标位置的获取方式。例如,对于textarea和input text,直接使用element.selectionStart获取位置;对于div编辑框,需要...

    IE与FireFox中的childNodes区别

    在JavaScript中,对DOM元素进行操作和遍历是常见的任务,`getElementsByTagName` 和 `childNodes` 都是用于处理这一需求的API。`getElementsByTagName` 用于根据标签名获取元素的子节点,而`childNodes` 返回一个...

    解决IE下select标签innerHTML插入option的BUG(兼容IE,FF,Opera,Chrome,Safari)

    总的来说,解决IE中的这个`innerHTML`与`&lt;select&gt;`和`&lt;option&gt;`的问题需要对浏览器差异有深入理解,并通过编写兼容性代码来确保一致的行为。通过封装`addOption`这样的函数,我们可以简化代码,提高可维护性,并确保...

    FF火狐下获取一个元素同类型的相邻元素实现代码

    它们在Firefox下可以很好地工作,但请注意,在其他浏览器如Chrome、Safari或IE中,可能需要额外的兼容性处理,因为不同浏览器对DOM API的实现可能存在差异。 总结来说,获取元素同类型的相邻元素在JavaScript中可以...

    浏览器兼容性问题

    - **问题描述**:在处理盒子模型时,Firefox和IE对`width`和`padding`的计算方式不同,可能会导致2px的差异。 - **解决方法**:推荐使用`box-sizing:border-box`来统一盒模型的计算方式。 ##### 6. IE5和IE6的BOX...

    javascript中的previousSibling和nextSibling的正确用法

    特别是在Internet Explorer(IE)和Firefox(FF)浏览器中,它们对空白文本节点的处理方式不同,IE可能会忽略这些空白文本节点,而Firefox则不会。 在IE中,如果你使用nextSibling获取下一个兄弟节点,可能会直接...

    Javascript数组操作高级心得整理

     innerText(IE)、textContent(FF)、innerHTML 26  outerText、outerHTML(少用) 26  value属性获取表单节点内容 26 (3) 访问节点的样式 27  使用节点对象的style属性对象改变样式 27  使用className设置...

    interviewee-web&java

    CSS Hack是一种技术手段,用于解决不同浏览器对CSS的支持差异问题。主要有以下几种类型: - **条件Hack**:仅适用于Internet Explorer浏览器。 ```html &lt;!--[if IE]&gt; .test { color: red; } &lt;![endif]--&gt; ...

    JS实现iframe编辑器光标位置插入内容的方法(兼容IE和Firefox)

    这里我们使用`designMode`属性开启iframe内的文档编辑模式,然后根据浏览器类型(IE、Firefox或Chrome)来执行不同的插入内容逻辑。 ```javascript // 开启iframe的编辑模式 function t() { window.frames["x"]...

    详解JS中的attribute属性

    例如,在IE和FF之间,对于 `attributes` 属性的访问方式、对属性值和属性节点的处理方式都有所不同。了解这些差异,并采取兼容措施(比如使用方括号来访问属性集合),是进行跨浏览器开发所必需的。 通过上述方法,...

    js parentElement和offsetParent之间的区别

    首先,`parentElement`属性是DOM层次结构的一部分,它代表了元素的直接父元素。如果元素A包含元素B,元素B的`parentElement`就是元素A。这是一个直观且直接的关系,遵循HTML结构。在非IE浏览器中,通常使用`...

    js+xml生成级联下拉框代码

    1. **兼容性问题**:不同的浏览器对DOM操作的支持程度不同,因此在实际项目中可能需要考虑更多的兼容性问题。 2. **性能优化**:如果XML文件很大,或者需要处理的数据非常复杂,那么可能需要考虑更高效的处理方式,...

    精易模块[源码] V5.15

    MD5:6592799FF42CE9AFDF122C47642C9DEE 精易模块 V3.87 what’s new:(20141021) 1、新增“效验_取md5_进度”,进度获取文件MD5值,支持大文件,采纳易友【@易模块】建议。 2、改善“程序_禁止重复运行”添加...

Global site tag (gtag.js) - Google Analytics