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 相关文章推荐
jQuery中与toggleClass等价的程序段 以及未来学习的方向
Mar 18 Javascript
用jquery实现下拉菜单效果的代码
Jul 25 Javascript
js二级地域选择的实现方法
Jun 17 Javascript
jquery实现input输入框实时输入触发事件代码
Jan 28 Javascript
JQuery插入DOM节点的方法
Jun 11 Javascript
jQuery实现字符串全部替换的方法【推荐】
Mar 09 Javascript
vue组件传递对象中实现单向绑定的示例
Feb 28 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
Jun 19 Javascript
layui 上传文件_批量导入数据UI的方法
Sep 23 Javascript
layui table 表格上添加日期控件的两种方法
Sep 28 Javascript
基于javascript canvas实现五子棋游戏
Jul 08 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生成excel列序号代码实例
2013/12/24 PHP
PHP文件缓存类示例分享
2015/01/30 PHP
基于PHP+jQuery+MySql实现红蓝(顶踩)投票代码
2015/08/25 PHP
PHP实现搜索相似图片
2015/09/22 PHP
orm获取关联表里的属性值
2016/04/17 PHP
PHP获取文件扩展名的方法实例总结
2017/06/10 PHP
基于php双引号中访问数组元素报错的解决方法
2018/02/01 PHP
JS完成代码前最好对其做5件事
2013/04/07 Javascript
JQuery的$命名冲突详细解析
2013/12/28 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
JavaScript的内存释放问题详解
2015/01/21 Javascript
JS Attribute属性操作详解
2016/05/19 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
正则表达式替换html元素属性的方法
2016/11/26 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
vue表单绑定实现多选框和下拉列表的实例
2017/08/12 Javascript
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
Vue slot用法(小结)
2018/10/22 Javascript
JavaScript高阶教程之“==”隐藏下的类型转换
2019/04/11 Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
2019/04/28 Javascript
详解基于Vue的支持数据双向绑定的select组件
2019/09/02 Javascript
python逐行读取文件内容的三种方法
2014/01/20 Python
Python 12306抢火车票脚本
2018/02/07 Python
python实现数据库跨服务器迁移
2018/04/12 Python
python读取.mat文件的数据及实例代码
2019/07/12 Python
使用 Python 处理 JSON 格式的数据
2019/07/22 Python
10分钟教你用python动画演示深度优先算法搜寻逃出迷宫的路径
2019/08/12 Python
python 使用pdfminer3k 读取PDF文档的例子
2019/08/27 Python
python 解决tqdm模块不能单行显示的问题
2020/02/19 Python
基本款天堂:Everlane
2017/05/13 全球购物
世界上最大的曲棍球商店:Pro Hockey Life
2017/10/30 全球购物
教师岗位职责范本
2013/12/29 职场文书
工作室成员个人发展规划范文
2014/01/24 职场文书
机械制造专业大学生自我鉴定
2014/09/19 职场文书
乡镇干部个人对照检查材料思想汇报
2014/10/04 职场文书
迎新晚会主持词开场白
2015/05/28 职场文书