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 相关文章推荐
在线编辑器的实现原理(兼容IE和FireFox)
Mar 09 Javascript
js 实现无干扰阴影效果 简单好用(附文件下载)
Dec 27 Javascript
js页面跳转的问题(跳转到父页面、最外层页面、本页面)
Aug 14 Javascript
jquery实现图片灯箱明暗的遮罩效果
Nov 15 Javascript
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
Oct 17 Javascript
jQuery使用$.ajax进行异步刷新的方法(附demo下载)
Dec 04 Javascript
关于JS变量和作用域详解
Jul 28 Javascript
bootstrap导航、选项卡实现代码
Dec 28 Javascript
react实现菜单权限控制的方法
Dec 11 Javascript
解决mpvue + vuex 开发微信小程序vuex辅助函数mapState、mapGetters不可用问题
Aug 03 Javascript
js事件机制----捕获与冒泡机制实例分析
May 22 Javascript
Vue按时间段查询数据组件使用详解
Aug 21 Javascript
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
PHP新手上路(十一)
2006/10/09 PHP
discuz图片顺序混乱解决方案
2015/07/29 PHP
php提交post数组参数实例分析
2015/12/17 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
laravel框架路由分组,中间件,命名空间,子域名,路由前缀实例分析
2020/02/18 PHP
js对象的比较
2011/02/26 Javascript
禁止按回车键提交表单的方法
2015/06/11 Javascript
location.hash保存页面状态的技巧
2016/04/28 Javascript
jQuery简单实现上下,左右滑动的方法
2016/06/01 Javascript
AngularJS中的表单简单入门
2016/07/28 Javascript
jQuery实现简单的滑动导航代码(移动端)
2017/05/22 jQuery
JavaScript创建对象_动力节点Java学院整理
2017/06/27 Javascript
基于jQuery的左滑出现删除按钮的示例
2017/08/29 jQuery
JavaScript实现开关等效果
2017/09/08 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
详解React Native 屏幕适配(炒鸡简单的方法)
2018/06/11 Javascript
Webpack的dll功能使用
2018/06/28 Javascript
详解vue使用$http服务端收不到参数
2019/04/19 Javascript
uniapp电商小程序实现订单30分钟倒计时
2020/11/01 Javascript
Vue组件简易模拟实现购物车
2020/12/21 Vue.js
[53:21]2014 DOTA2国际邀请赛中国区预选赛5.21 DT VS LGD-CDEC
2014/05/22 DOTA
[57:24]LGD vs VGJ.T 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
HTML5 层的叠加的实现
2020/07/07 HTML / CSS
服务口号大全
2014/06/11 职场文书
环境监测与治理技术专业求职信
2014/07/06 职场文书
庆六一活动总结
2014/08/29 职场文书
结婚老公保证书
2015/02/26 职场文书
2015年保安个人工作总结
2015/04/02 职场文书
圣诞晚会主持词开场白
2015/05/28 职场文书
创业计划书之牛肉汤快餐店
2019/10/08 职场文书
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL
Go 中的空白标识符下划线
2022/03/25 Golang
Python实现双向链表
2022/05/25 Python
MySQL解决Navicat设置默认字符串时的报错问题
2022/06/16 MySQL