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 $.ajax入门应用一
Nov 19 Javascript
一个很酷的拖动层的js类,兼容IE及Firefox
Jun 23 Javascript
javascript 学习笔记(一)DOM基本操作
Apr 08 Javascript
SOSO地图API使用(一)在地图上画圆实现思路与代码
Jan 15 Javascript
jquery的ajax简单结构示例代码
Feb 17 Javascript
jquery制作搜狐快站页面效果示例分享
Feb 21 Javascript
使用js检测浏览器是否支持html5中的video标签的方法
Mar 12 Javascript
Jquery 实现table样式的设定
Jan 28 Javascript
Angular Js文件上传之form-data
Aug 28 Javascript
Node.js的MongoDB驱动Mongoose基本使用教程
Mar 01 Javascript
EasyUI Tree树组件无限循环的解决方法
Sep 27 Javascript
对angularJs中controller控制器scope父子集作用域的实例讲解
Oct 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中的内容实例代码
2014/02/26 PHP
PHP实现chrome表单请求数据转换为接口使用的json数据
2021/03/04 PHP
JQuery获取元素文档大小、偏移和位置和滚动条位置的方法集合
2010/01/12 Javascript
非阻塞动态加载javascript广告实现代码
2010/11/17 Javascript
jquery remove方法应用详解
2012/11/22 Javascript
js事件冒泡实例分享(已测试)
2013/04/23 Javascript
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
Javascript基础知识(二)事件
2014/09/29 Javascript
JavaScript判断对象是否为数组
2015/12/22 Javascript
Jquery和JS获取ul中li标签的实现方法
2016/06/02 Javascript
基于JavaScript实现自动更新倒计时效果
2016/12/19 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
element-ui表格数据转换的示例代码
2018/08/24 Javascript
Vuejs开发环境搭建及热更新【推荐】
2018/09/07 Javascript
Vue+Element UI+Lumen实现通用表格分页功能
2019/02/02 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
Python MD5文件生成码
2009/01/12 Python
python基础教程之udp端口扫描
2014/02/10 Python
Python实现的多线程端口扫描工具分享
2015/01/21 Python
Python中使用tarfile压缩、解压tar归档文件示例
2015/04/05 Python
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
Python实现的读取/更改/写入xml文件操作示例
2018/08/30 Python
vue学习笔记之动态组件和v-once指令简单示例
2020/02/29 Python
HTML5边玩边学(2)基础绘图实现方法
2010/09/21 HTML / CSS
百度JavaScript笔试题
2015/01/15 面试题
创业计划书的内容步骤和要领
2014/01/04 职场文书
公益活动策划方案
2014/01/09 职场文书
大学生就业意向书范文
2014/04/01 职场文书
五月的鲜花活动方案
2014/08/21 职场文书
2014年个人售房协议书
2014/10/30 职场文书
单位租房协议书范本
2014/12/04 职场文书
工厂采购员岗位职责
2015/04/07 职场文书
如果用一句诗总结你的上半年,你会用哪句呢?
2019/07/16 职场文书
mybatis3中@SelectProvider传递参数方式
2021/08/04 Java/Android
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android