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 解决表单仍然提交即使监听处理函数返回false
Mar 14 Javascript
php对mongodb的扩展(小试牛刀)
Nov 11 Javascript
js中escape对应的C#解码函数 UrlDecode
Dec 16 Javascript
file模式访问网页时iframe高度自适应解决方案
Jan 16 Javascript
IE8下String的Trim()方法失效的解决方法
Nov 08 Javascript
用js传递value默认值的示例代码
Sep 11 Javascript
jQuery实现点击该行即可删除HTML表格行
Oct 17 Javascript
Bootstrap每天必学之日期控制
Mar 07 Javascript
深入浅析JS的数组遍历方法(推荐)
Jun 15 Javascript
AngularJs+Bootstrap实现漂亮的计算器
Aug 10 Javascript
详解JSON.stringify()的5个秘密特性
May 26 Javascript
详解TypeScript中的类型保护
Apr 29 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
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
关于在php.ini中添加extension=php_mysqli.dll指令的说明
2007/06/14 PHP
深入php 正则表达式的学习探讨
2013/06/06 PHP
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
PHP连接MySQL的2种方法小结以及防止乱码
2014/03/11 PHP
jQuery Mobile + PHP实现文件上传
2014/12/12 PHP
PHP根据session与cookie用户登录状态操作类的代码
2016/05/13 PHP
分享php多功能图片处理类
2016/05/15 PHP
php while循环控制的简单实例
2016/05/30 PHP
Thinkphp批量更新数据的方法汇总
2016/06/29 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
网页常用特效代码整理
2006/06/23 Javascript
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
javascript计时器详解
2015/02/28 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
Vue 引入AMap高德地图的实现代码
2019/04/29 Javascript
解决vue组件props传值对象获取不到的问题
2019/06/06 Javascript
关于layui导航栏不展示下拉列表的解决方法
2019/09/25 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
vue 插槽简介及使用示例
2020/11/19 Vue.js
[10:05]DOTA2-DPC中国联赛 正赛 iG vs PSG.LGD 选手采访
2021/03/11 DOTA
Python中subprocess模块用法实例详解
2015/05/20 Python
Python 包含汉字的文件读写之每行末尾加上特定字符
2016/12/12 Python
浅谈python日志的配置文件路径问题
2018/04/28 Python
python中强大的format函数实例详解
2018/12/05 Python
很酷的python表白工具 你喜欢我吗
2019/04/11 Python
Django集成搜索引擎Elasticserach的方法示例
2019/06/04 Python
python使用socket实现的传输demo示例【基于TCP协议】
2019/09/24 Python
python图形开发GUI库pyqt5的详细使用方法及各控件的属性与方法
2020/02/14 Python
Django单元测试中Fixtures用法详解
2020/02/25 Python
eBay法国购物网站:eBay.fr
2017/10/21 全球购物
给校长的建议书100字
2014/05/16 职场文书
机关作风建设剖析材料
2014/10/11 职场文书
保护环境的宣传语
2015/07/13 职场文书
关于感恩的素材句子(38句)
2019/11/11 职场文书
详解nginx.conf 中 root 目录设置问题
2021/04/01 Servers