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图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
JS模拟并美化的表单控件完整实例
Aug 19 Javascript
详解使用路由延迟加载 Angular 模块
Oct 12 Javascript
微信小程序实现星级评分和展示
Jul 05 Javascript
vue2中引用及使用 better-scroll的方法详解
Nov 15 Javascript
Vue中使用canvas方法总结
Feb 12 Javascript
Vue3.0中的monorepo管理模式的实现
Oct 14 Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 Javascript
Vue2.4+新增属性.sync、$attrs、$listeners的具体使用
Mar 08 Javascript
JavaScript React如何修改默认端口号方法详解
Jul 28 Javascript
如何用JavaScript学习算法复杂度
Apr 30 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中使用Curl、socket、file_get_contents三种方法POST提交数据
2011/08/12 PHP
基于PHP文件操作的详细诠释
2013/06/21 PHP
thinkPHP实现瀑布流的方法
2014/11/29 PHP
thinkPHP统计排行与分页显示功能示例
2016/12/02 PHP
Thinkphp通过一个入口文件如何区分移动端和PC端
2017/04/18 PHP
PHP中命名空间的使用例子
2019/03/22 PHP
获取3个数组不重复的值的具体实现
2013/12/30 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
2015/12/04 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
Vue.js每天必学之内部响应式原理探究
2016/09/07 Javascript
详解javascript中对数据格式化的思考
2017/01/23 Javascript
JS实现复制内容到剪贴板功能
2017/02/05 Javascript
AngularJS $http模块POST请求实现
2017/04/08 Javascript
js截取字符串功能的实现方法
2017/09/27 Javascript
分析javascript原型及原型链
2018/03/18 Javascript
Webpack中雪碧图插件使用详解
2018/05/25 Javascript
node.js爬取中关村的在线电瓶车信息
2018/11/13 Javascript
简单实现vue中的依赖收集与响应的方法
2019/02/18 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
wxpython 学习笔记 第一天
2009/03/16 Python
详谈Numpy中数组重塑、合并与拆分方法
2018/04/17 Python
DataFrame:通过SparkSql将scala类转为DataFrame的方法
2019/01/29 Python
Python求均值,方差,标准差的实例
2019/06/29 Python
解决Python3用PIL的ImageFont输出中文乱码的问题
2019/08/22 Python
Python模块相关知识点小结
2020/03/09 Python
Python Tkinter图形工具使用方法及实例解析
2020/06/15 Python
法国在线药房:Shop Pharmacie
2019/11/26 全球购物
linux面试题参考答案(10)
2016/10/26 面试题
物业保安员岗位职责制度
2014/01/30 职场文书
护理专业自荐信范文
2014/02/26 职场文书
《故乡》教学反思
2014/04/10 职场文书
2015年学生会工作总结范文
2015/03/31 职场文书
企业年会祝酒词
2015/08/11 职场文书
导游词之镇江-金山寺
2019/10/14 职场文书
Python基础教程,Python入门教程(超详细)
2021/06/24 Python