`

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 是文本节点 (那个换行)

解决办法: 在base.js中有如下方法:  通过判断 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;
}
分享到:
评论

相关推荐

    浅谈Javascript中的12种DOM节点类型

    DOM是javascript操作网页的接口,全称为文档对象模型(Document Object Model)。本文将主要说明DOM节点类型,有需要的可以参考借鉴。

    Javascript入门学习第八篇 js dom节点属性说明第1/2页

    今天我们讲DOM属性。 前面其实我们已经碰过DOM属性了。 比如: nodeName,nodeType…..今天我们详细的讲解下。 1,nodeName属性 : 节点的名字。... 2,,nodeType属性 : 返回一个整数,代表这个节点的类型。 我

    js DOM模型操作

    DOM模型中的节点:元素节点、文本节点、属性节点 例:私のdotnet小屋&lt;/a&gt; (1)a是元素节点 (2)“私のdotnet小屋”是文本节点 (3)href=”http://www.cnblogs.com/shuz”是属性节点 DOM节点的属性 属性 类型...

    JavaScript DOM进阶方法

    DOM自身存在很多类型,在上一章中有介绍,比如Element类型:表示的是元素节点;...Element 表示元素节点类型; Text 表示文本节点类型; Comment 表示文档中的注释类型; CDATASection 表示CDATA区域类型; D

    基于JavaScript的一个轻量级的大屏数据展示适配方案源码+项目操作说明.zip

    说明:可以传入一个dom节点,也可以传入id选择器 let options = {el: document.querySelector('#dashboar')}; let options = {el: '#dashboard'}; 【备注】 主要针对计算机相关专业的正在做毕设的学生和需要项目实战...

    JDT生成代码实例

    //(2)为变量创建表AST节点类型 VariableDeclarationStatement statement = ast.newVariableDeclarationStatement(fragment); //(3)对变量进行修鉓符设置 statement.setType(ast.newSimpleType(ast....

    Javascript入门学习资料收集整理篇

    Javascript入门学习第一篇 js基础Javascript入门学习第二篇 js类型...js dom实例操作Javascript入门学习第八篇 js dom节点属性说明Javascript入门学习第九篇 Javascript DOM 总结jQuery基础教程笔记适合js新手

    javascript完全学习手册2 源码

    14.1.5 跑马灯式说明文字 14.1.6 跳动的文字 14.2 图片特效 14.2.1 线性幻灯片 14.2.2 非线性幻灯片 14.2.3 展示翻页效果 14.2.4 展示缩略图新闻效果 14.2.5 图片滑动效果 14.2.6 三维相册 14.3 ...

    平行语料数据库设计.doc

    "表二:Domain(领域表) " "列名 "数据类型 "说明 " "DomId "Int(10) "领域的唯一标识符 " "PdomId "Int(10) "父节点的ID " "DomName "Nvarchar "领域名称 " "DomDate "Datetime "领域添加时间 " "Isleaf "Bit...

    DWR.xml配置文件说明书(含源码)

    DWR 自动将DOM、DOM4J、JDOM和XOM转换成DOM树,前面这几种类型都仅仅返回Document,Element,Node.DWR会自动将这些转换成浏览器DOM对象.通常在启动JDOM Converter时会有一个提示信息,除非你想采用JDOMconverter否则可以...

    javascript完全学习手册1 源码

    14.1.5 跑马灯式说明文字 398 14.1.6 跳动的文字 400 14.2 图片特效 402 14.2.1 线性幻灯片 402 14.2.2 非线性幻灯片 409 14.2.3 展示翻页效果 416 14.2.4 展示缩略图新闻效果 419 14.2.5 图片滑动效果 423 14.2.6 ...

    jQuery权威指南366页完整版pdf和源码打包

    2.3.4 代码分析 2.4 本章小结 第3章 jquery操作dom 3.1 dom基础 3.2 访问元素 3.2.1 元素属性操作 3.2.2 元素内容操作 3.2.3 获取或设置元素值 3.2.4 元素样式操作 3.3 创建节点元素 3.4 插入...

    Javascript数组操作高级心得整理

    (1) 对象类型说明 21  本地对象 21  内置对象 21  宿主对象 21 (2) Object对象 21  Object对象的属性 21  Object对象的方法 21 (3) JavaScript对象参考(略) 21 (4) Browser(浏览器)对象参考(略) 21 (5) ...

    JS 函数式编程指南

    在纯函数式编程语言中,你必须使用 monad 才能打印变量或者读取 DOM 节点。JavaScript 则简单得多,可以作弊走捷径,因为毕竟我们的目的是学写纯函数式代码。JavaScript 也更容易入门,因为它是一门混合范式的语言,...

    jQuery权威指南-源代码

    书名:jQuery权威指南(系统介绍jQuery方方面面,囊括118个实例和2个综合案例,实战性强) 作者:陶国荣 著 ...10.8.2 DOM对象与jQuery对象的类型转换/335 10.9 本章小结/337 第11章 综合案例开发...

    JavaScript应用177例

    代码说明:本章代码只能在Mozilla Firefox中运行。 7.1.htm 事件流 7.2.htm DOM2鼠标事件 7.3.htm 取消默认动作 7.4.htm 创建DOM2事件 第8章(\cha08) 8.1.htm 页面...

    (全)传智播客PHP就业班视频完整课程

    10-27 3 jquery节点操作 10-27 4 练习题讲解 10-27 5 jquery属性操作 获取子元素和兄弟元素的方法 10-27 6 练习题讲解 10-27 7 jquery和ajax整合使用的方法 10-29 1 svn安装及常用操作 10-29 2 svn常用操作 实例讲解...

    史上最全韩顺平传智播客PHP就业班视频,10月份全集

    10-27 3 jquery节点操作 10-27 4 练习题讲解 10-27 5 jquery属性操作 获取子元素和兄弟元素的方法 10-27 6 练习题讲解 10-27 7 jquery和ajax整合使用的方法 10-29 1 svn安装及常用操作 10-29 2 svn常用操作 实例讲解...

    韩顺平PHP JS JQUERY 所有视频下载种子 货真价实

    10-27 3 jquery节点操作 10-27 4 练习题讲解 10-27 5 jquery属性操作 获取子元素和兄弟元素的方法 10-27 6 练习题讲解 10-27 7 jquery和ajax整合使用的方法 10-29 1 svn安装及常用操作 10-29 2 svn常用操作 实例讲解...

    史上最全传智播客PHP就业班视频课,8月份视频

    10-27 3 jquery节点操作 10-27 4 练习题讲解 10-27 5 jquery属性操作 获取子元素和兄弟元素的方法 10-27 6 练习题讲解 10-27 7 jquery和ajax整合使用的方法 10-29 1 svn安装及常用操作 10-29 2 svn常用操作 实例讲解...

Global site tag (gtag.js) - Google Analytics