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 相关文章推荐
HTML DOM的nodeType值介绍
Mar 31 Javascript
JavaScript中将一个值转换为字符串的方法分析[译]
Sep 21 Javascript
基于jquery实现的省市区级联无ajax
Sep 24 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
Apr 06 Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 Javascript
jQuery树控件zTree使用方法详解(一)
Feb 28 Javascript
JavaScript实现前端分页控件
Apr 19 Javascript
javascript按钮禁用和启用的效果实例代码
Oct 29 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
代码详解JS操作剪贴板
Feb 11 Javascript
javascript设计模式 ? 外观模式原理与用法实例分析
Apr 15 Javascript
微信小程序上传帖子的实例代码(含有文字图片的微信验证)
Jul 11 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实现的九九乘法口诀表简洁版
2014/07/28 PHP
php一个文件搞定微信jssdk配置
2016/12/12 PHP
php中Redis的应用--消息传递
2017/03/28 PHP
tp5框架的增删改查操作示例
2019/10/31 PHP
Ext第一周 史上最强学习笔记---GridPanel(基础篇)
2008/12/29 Javascript
js Select下拉列表框进行多选、移除、交换内容的具体实现方法
2013/08/13 Javascript
innerText 使用示例
2014/01/23 Javascript
使用jQuery管理选择结果
2015/01/20 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
BootStrap实现带关闭按钮功能
2017/02/15 Javascript
Angular.js项目中使用gulp实现自动化构建以及压缩打包详解
2017/07/19 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
2017/08/18 Javascript
深入理解Vue生命周期、手动挂载及挂载子组件
2017/09/27 Javascript
JavaScript实现的反序列化json字符串操作示例
2018/07/18 Javascript
React-router4路由监听的实现
2018/08/07 Javascript
[50:54]完美世界DOTA2联赛 GXR vs IO 第三场 11.07
2020/11/10 DOTA
python使用xlrd模块读写Excel文件的方法
2015/05/06 Python
python中os模块详解
2016/10/14 Python
python中文件变化监控示例(watchdog)
2017/10/16 Python
用python处理图片之打开\显示\保存图像的方法
2018/05/04 Python
python实现一组典型数据格式转换
2018/12/15 Python
python判断文件是否存在,不存在就创建一个的实例
2019/02/18 Python
python 绘制拟合曲线并加指定点标识的实现
2019/07/10 Python
简单介绍python封装的基本知识
2019/08/10 Python
nginx搭建基于python的web环境的实现步骤
2020/01/03 Python
使用卷积神经网络(CNN)做人脸识别的示例代码
2020/03/27 Python
django的403/404/500错误自定义页面的配置方式
2020/05/21 Python
详解CSS3伸缩布局盒模型Flex布局
2018/08/20 HTML / CSS
HTML5 body设置全屏背景图片的示例代码
2020/12/08 HTML / CSS
酒店门卫岗位职责
2013/12/29 职场文书
生产部岗位职责范文
2014/02/07 职场文书
出纳试用期自我鉴定
2014/04/07 职场文书
助人为乐模范事迹材料
2014/06/02 职场文书
团队会宣传标语
2014/10/09 职场文书
不知如何爱孩子,这些方法教会您
2019/08/06 职场文书
HTML5中 rem适配方案与 viewport 适配问题详解
2021/04/27 HTML / CSS