万维网联盟(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 来解决问题
function $NE(e)
{
e = e.nextSibling;
while
(e && e.nodeType != 1){e = e.nextSibling;}
return
e;
}
function $FE(e)
{
e = e.firstChild;
while
(e && e.nodeType != 1){e = e.nextSibling;}
return
e;
}
分享到:
相关推荐
DOM 中的节点类型有很多,如 `Document` 节点、`Element` 节点、`Attribute` 节点等。`Document` 节点是文档节点,所有任何节点的根节点,即文档根对象。 在 HTML 中,访问 DOM 对象的节点属性在所有浏览器中都支持...
1. **DOM操作**:为了在页面上显示日历,控件需要与HTML元素交互,如创建和修改DOM节点。这可能涉及到`document.createElement`、`appendChild`、`innerHTML`等DOM操作。 2. **事件处理**:控件需要监听用户的交互...
JavaScript中的动态获取节点和操作节点是前端开发中的常见任务,特别是在处理DOM(Document Object Model)时。本篇文章主要探讨了在Internet Explorer(IE)和Firefox两种浏览器环境下,如何使用`innerHTML`属性...
本文对这些常见的问题进行了整理,并提供了一系列实用的DOM操作技巧。 首先,要了解DOM树是由不同类型的节点构成的。节点类型包括元素节点(1)、属性节点(2)、文本节点(3)等等。在JavaScript中,我们使用这些...
FF 中 `childNodes` 包含所有子节点,而 IE 中则可能不包含某些特定类型的节点。 - **IE** 和 **FF** 对于 `parentNode` 和 `childNodes` 的处理也不完全一致,特别是在处理 `<form>` 内的 `<table>` 结构时,IE 和...
这些文本节点在某些浏览器中(比如IE)会被自动过滤掉,但在Firefox(FF)和Chrome等浏览器中则会被保留。这意味着在这些浏览器中,DOM树中实际上包含着你可能未曾注意的空白文本节点。 例如,当我们使用JavaScript...
### JavaScript读写XML实现广告轮换(兼容IE、FF) #### 知识点概述 1. **广告轮换机制**:该文章介绍了一个简单的广告轮换机制,该机制通过JavaScript和XML结合来实现。采用JavaScript读取XML文件中的广告信息,...
3. 通过DOM节点的父节点或者自身来获取与编辑元素相对应的标签名称。 4. 根据标签名称判断光标位置的获取方式。例如,对于textarea和input text,直接使用element.selectionStart获取位置;对于div编辑框,需要...
在JavaScript中,对DOM元素进行操作和遍历是常见的任务,`getElementsByTagName` 和 `childNodes` 都是用于处理这一需求的API。`getElementsByTagName` 用于根据标签名获取元素的子节点,而`childNodes` 返回一个...
总的来说,解决IE中的这个`innerHTML`与`<select>`和`<option>`的问题需要对浏览器差异有深入理解,并通过编写兼容性代码来确保一致的行为。通过封装`addOption`这样的函数,我们可以简化代码,提高可维护性,并确保...
它们在Firefox下可以很好地工作,但请注意,在其他浏览器如Chrome、Safari或IE中,可能需要额外的兼容性处理,因为不同浏览器对DOM API的实现可能存在差异。 总结来说,获取元素同类型的相邻元素在JavaScript中可以...
- **问题描述**:在处理盒子模型时,Firefox和IE对`width`和`padding`的计算方式不同,可能会导致2px的差异。 - **解决方法**:推荐使用`box-sizing:border-box`来统一盒模型的计算方式。 ##### 6. IE5和IE6的BOX...
特别是在Internet Explorer(IE)和Firefox(FF)浏览器中,它们对空白文本节点的处理方式不同,IE可能会忽略这些空白文本节点,而Firefox则不会。 在IE中,如果你使用nextSibling获取下一个兄弟节点,可能会直接...
innerText(IE)、textContent(FF)、innerHTML 26 outerText、outerHTML(少用) 26 value属性获取表单节点内容 26 (3) 访问节点的样式 27 使用节点对象的style属性对象改变样式 27 使用className设置...
CSS Hack是一种技术手段,用于解决不同浏览器对CSS的支持差异问题。主要有以下几种类型: - **条件Hack**:仅适用于Internet Explorer浏览器。 ```html <!--[if IE]> .test { color: red; } <![endif]--> ...
这里我们使用`designMode`属性开启iframe内的文档编辑模式,然后根据浏览器类型(IE、Firefox或Chrome)来执行不同的插入内容逻辑。 ```javascript // 开启iframe的编辑模式 function t() { window.frames["x"]...
例如,在IE和FF之间,对于 `attributes` 属性的访问方式、对属性值和属性节点的处理方式都有所不同。了解这些差异,并采取兼容措施(比如使用方括号来访问属性集合),是进行跨浏览器开发所必需的。 通过上述方法,...
首先,`parentElement`属性是DOM层次结构的一部分,它代表了元素的直接父元素。如果元素A包含元素B,元素B的`parentElement`就是元素A。这是一个直观且直接的关系,遵循HTML结构。在非IE浏览器中,通常使用`...
1. **兼容性问题**:不同的浏览器对DOM操作的支持程度不同,因此在实际项目中可能需要考虑更多的兼容性问题。 2. **性能优化**:如果XML文件很大,或者需要处理的数据非常复杂,那么可能需要考虑更高效的处理方式,...
MD5:6592799FF42CE9AFDF122C47642C9DEE 精易模块 V3.87 what’s new:(20141021) 1、新增“效验_取md5_进度”,进度获取文件MD5值,支持大文件,采纳易友【@易模块】建议。 2、改善“程序_禁止重复运行”添加...