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 相关文章推荐
js中各浏览器中鼠标按键值的差异
Apr 07 Javascript
eclipse如何忽略js文件报错(附图)
Oct 30 Javascript
老生常谈javascript变量的命名规范和注释
Sep 29 Javascript
jquery判断类型是不是number类型的实例代码
Oct 07 Javascript
浅谈js中的变量名和函数名重名
Feb 13 Javascript
jQuery 判断元素整理汇总
Feb 28 Javascript
jQuery轻松实现无缝轮播效果
Mar 22 jQuery
微信小程序“摇一摇”的实例代码
Jul 20 Javascript
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
Vue 中的受控与非受控组件的实现
Dec 17 Javascript
JS 数组基本用法入门示例解析
Jan 16 Javascript
jQuery实现电梯导航模块
Dec 22 jQuery
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 array_push 数组函数
2009/12/26 PHP
PHPExcel读取Excel文件的实现代码
2011/12/06 PHP
fgetcvs在linux的问题
2012/01/15 PHP
PHP中使用TCPDF生成PDF文档实例
2014/07/01 PHP
PHP5.3与5.5废弃与过期函数整理汇总
2014/07/10 PHP
利用Dojo和JSON建立无限级AJAX动态加载的功能模块树
2007/03/24 Javascript
不同浏览器对回车提交表单的处理办法
2010/02/13 Javascript
JQuery入门—JQuery程序的代码风格详细介绍
2013/01/03 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
2013/02/22 Javascript
js实现简单的碰壁反弹效果
2016/08/30 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
微信小程序开发之实现自定义Toast弹框
2017/06/08 Javascript
JavaScript中最常用的10种代码简写技巧总结
2017/06/28 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
jQuery中元素选择器(element)简单用法示例
2018/05/14 jQuery
vue.js添加一些触摸事件以及安装fastclick的实例
2018/08/28 Javascript
详解angularjs4部署文件过大解决过程
2018/12/05 Javascript
JavaScript基于数组实现的栈与队列操作示例
2018/12/22 Javascript
Vue 处理表单input单行文本框的实例代码
2019/05/09 Javascript
深入学习TypeScript 、React、 Redux和Ant-Design的最佳实践
2019/06/17 Javascript
微信小程序地图实现展示线路
2020/07/29 Javascript
python三元运算符实现方法
2013/12/17 Python
Python字符串替换实例分析
2015/05/11 Python
Python学生成绩管理系统简洁版
2020/04/05 Python
django celery redis使用具体实践
2019/04/08 Python
numpy ndarray 按条件筛选数组,关联筛选的例子
2019/11/26 Python
python3 实现函数写文件路径的正确方法
2019/11/27 Python
IE8下CSS3选择器nth-child() 不兼容问题的解决方法
2016/11/16 HTML / CSS
html5 CSS过度-webkit-transition使用介绍
2013/07/02 HTML / CSS
美体小铺瑞典官方网站:The Body Shop瑞典
2018/01/27 全球购物
SOA面试题:如何在SOA中实现松耦合
2013/07/21 面试题
代理协议书范本
2014/04/22 职场文书
欧也妮葛朗台读书笔记
2015/06/30 职场文书
2016年“6.26”禁毒宣传月系列活动总结
2016/04/05 职场文书
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server
vue-treeselect的基本用法以及解决点击无法出现拉下菜单
2022/04/30 Vue.js