js nextSibling属性和previousSibling属性概述及使用注意


Posted in Javascript onFebruary 16, 2013

1:nextSibling属性
该属性表示当前节点的下一个节点(其后的节点与当前节点同属一个级别);如果其后没有与其同级的节点,则返回null。
需要特别注意的是:该属性在不同的浏览器中的执行结果并不都相同,见下面例示:
先来看一个例子:

<body> 
<div> 
<input id="a4" type="button" onclick="alert(this.nextSibling);" value="d" /> 
<input id="a5" type="button" onclick="alert(this.nextSibling);" value="e" /> 
</div> 
</bod

该对象的结构表面上看,div的nextSibling只有2项——两个input节点。但实际上有5项——/n,input,/n,input,/n。这是因为input作为创建各种表单输入控件的标签,无论是生成button、checkbox、radio...等或其他表单控件,IE都会自动在后面创建一个1字节位的空白。
IE将跳过在节点之间产生的空格文档节点(如:换行字符),而Mozilla不会这样——FF会把诸如空格换行之类的排版元素视作节点读取,因此,在ie中用nextSibling便可读取到的下一个节点元素,在FF中就需要这样写:nextSibling.nextSibling了。
opera和safari对nextSibling的处理方式与FF一致

2:previousSibling属性
该属性与nextSibling属性的作用正好相反。例如:someTagObject.nextSibling.previousSibling其实返回的是该标签元素本身,但前提必须是:该标签元素的后面必须有一个同级的元素,否则就返回null了。

3:通过nextSibling或者 previousSibling所获得的HTML标签元素对象的属性问题
一般先通过nextSibling.nodeName来获知其标签名,或者通过nextSibling.nodeType来获知其标签类型,然后,如果该nextSibling.nodeName = #text,则通过nextSibling.nodeValue来获知其文本值;否则,可以通过nextSibling.innerHTML等其他常用标签元素属性来获取其属性。

Javascript 相关文章推荐
用javascript做拖动布局的思路
May 31 Javascript
jQuery 自定义函数写法分享
Mar 30 Javascript
Js,alert出现乱码问题的解决方法
Jun 19 Javascript
jquery 跳到顶部和底部动画2句代码简单实现
Jul 18 Javascript
js实现圆盘记速表
Aug 03 Javascript
javascript实现禁止复制网页内容汇总
Dec 30 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
Vue.JS项目中5个经典Vuex插件
Nov 28 Javascript
对Vue beforeRouteEnter 的next执行时机详解
Aug 25 Javascript
使用webpack构建应用的方法步骤
Mar 04 Javascript
9102了,你还不会移动端真机调试吗
Mar 25 Javascript
Vue实现点击当前行变色
Dec 14 Vue.js
jQuery事件绑定.on()简要概述及应用
Feb 07 #Javascript
10个基于浏览器的JavaScript调试工具分享
Feb 07 #Javascript
利用JQuery动画制作滑动菜单项效果实现步骤及代码
Feb 07 #Javascript
jquery 选择器引擎sizzle浅析
Feb 06 #Javascript
extjs3 combobox取value和text案例详解
Feb 06 #Javascript
js汉字转拼音实现代码
Feb 06 #Javascript
jquery解决图片路径不存在执行替换路径
Feb 06 #Javascript
You might like
用 Composer构建自己的 PHP 框架之构建路由
2014/10/30 PHP
PHP并发多进程处理利器Gearman使用介绍
2016/05/16 PHP
PHP 常用时间函数资料整理
2016/10/22 PHP
PHP+jQuery实现滚屏无刷新动态加载数据功能详解
2017/05/04 PHP
jquery nth-child()选择器的简单应用
2010/07/10 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
JS中for循序中延迟加载动态效果的具体实现
2013/08/18 Javascript
JS中使用sort结合localeCompare实现中文排序实例
2014/07/23 Javascript
JavaScript设计模式之装饰者模式介绍
2014/12/28 Javascript
jQuery焦点控制图层展示延迟隐藏的方法
2015/03/09 Javascript
每天一篇javascript学习小结(Function对象)
2015/11/16 Javascript
jQuery的deferred对象使用详解
2016/09/25 Javascript
jQuery序列化表单成对象的简单实现
2016/11/29 Javascript
详解Vue-Cli 异步加载数据的一些注意点
2017/08/12 Javascript
Grunt针对静态文件的压缩,版本控制打包的实例讲解
2017/09/29 Javascript
详解Element-UI中上传的文件前端处理
2019/08/07 Javascript
javascript设计模式 ? 装饰模式原理与应用实例分析
2020/04/14 Javascript
JSONP解决JS跨域问题的实现
2020/05/25 Javascript
用Python创建声明性迷你语言的教程
2015/04/13 Python
浅谈tensorflow1.0 池化层(pooling)和全连接层(dense)
2018/04/27 Python
在django admin中添加自定义视图的例子
2019/07/26 Python
Python爬虫:url中带字典列表参数的编码转换方法
2019/08/21 Python
python实现异常信息堆栈输出到日志文件
2019/12/26 Python
Python要如何实现列表排序的几种方法
2020/02/21 Python
Python 安装 virturalenv 虚拟环境的教程详解
2020/02/21 Python
给Django Admin添加验证码和多次登录尝试限制的实现
2020/07/26 Python
通俗易懂了解Python装饰器原理
2020/09/17 Python
python 实时调取摄像头的示例代码
2020/11/25 Python
匡威比利时官网:Converse Belgium
2017/04/13 全球购物
娇韵诗加拿大官网:Clarins加拿大
2017/11/20 全球购物
德国高品质男装及配饰商城:Cultizm(Raw Denim原色牛仔裤)
2018/04/16 全球购物
村委会主任先进事迹
2014/01/15 职场文书
大专应届毕业生求职信
2014/07/15 职场文书
反洗钱宣传活动总结
2014/08/26 职场文书
行政执法队伍作风整顿剖析材料
2014/10/11 职场文书
导游词之天津盘山
2019/11/01 职场文书