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 相关文章推荐
javaScript使用EL表达式的几种方式
May 27 Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 Javascript
轻松实现javascript图片轮播特效
Jan 13 Javascript
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
Jun 14 Javascript
js接收并转化Java中的数组对象的方法
Aug 11 Javascript
JS中使用new Date(str)创建时间对象不兼容firefox和ie的解决方法(两种)
Dec 14 Javascript
AngularJS 霸道的过滤器小结
Apr 26 Javascript
JS实现匀加速与匀减速运动的方法示例
Sep 04 Javascript
使用webpack构建应用的方法步骤
Mar 04 Javascript
js如何实现元素曝光上报
Aug 07 Javascript
完美解决vue 中多个echarts图表自适应的问题
Jul 19 Javascript
浅谈Vue的computed计算属性
Mar 21 Vue.js
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
dedecms后台验证码总提示错误的解决方法
2007/03/21 PHP
fleaphp rolesNameField bug解决方法
2011/04/23 PHP
smarty模板引擎之内建函数用法
2015/03/30 PHP
PHP中让json_encode不自动转义斜杠“/”的方法
2017/02/28 PHP
PHP实现广度优先搜索算法(BFS,Broad First Search)详解
2017/09/16 PHP
解决thinkPHP 5 nginx 部署时,只跳转首页的问题
2019/10/16 PHP
PHP实现文件上传后台处理脚本
2020/03/04 PHP
jQuery 学习 几种常用方法
2009/06/11 Javascript
javascript中interval与setTimeOut的区别示例介绍
2014/03/14 Javascript
EasyUi datagrid 实现表格分页
2015/02/10 Javascript
js使用post 方式打开新窗口
2015/02/26 Javascript
jQuery实现延迟跳转的方法
2015/06/05 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
2016/05/10 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
js图片延迟加载(Lazyload)三种实现方式
2017/03/01 Javascript
jQuery实现动态添加节点与遍历节点功能示例
2017/11/09 jQuery
webpack中使用iconfont字体图标的方法
2018/02/22 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
2018/04/12 jQuery
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
vue-router之实现导航切换过渡动画效果
2019/10/31 Javascript
JS实现打字游戏
2019/12/17 Javascript
vue二选一tab栏切换新做法实现
2021/01/19 Vue.js
实例解析Python中的__new__特殊方法
2016/06/02 Python
Python3中编码与解码之Unicode与bytes的讲解
2019/02/28 Python
python开头的coding设置方法
2019/08/08 Python
django自带serializers序列化返回指定字段的方法
2019/08/21 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
巴西电子、家电、智能手机购物网站:Girafa
2019/06/04 全球购物
Clarks鞋澳大利亚官方网站:Clarks Australia
2019/12/25 全球购物
如何安装ruby on rails
2014/02/09 面试题
出国留学经济担保书
2014/04/01 职场文书
篝火晚会策划方案
2014/05/16 职场文书
咖啡店创业计划书范文
2014/09/15 职场文书
工程部主管岗位职责
2015/02/12 职场文书
正确使用MySQL update语句
2021/05/26 MySQL