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 全角转半角部分
Oct 28 Javascript
使用BootStrapValidator完成前端输入验证
Sep 28 Javascript
JavaScript高仿支付宝倒计时页面及代码实现
Oct 21 Javascript
利用JQuery阻止事件冒泡
Dec 01 Javascript
vue.js 获取当前自定义属性值
Jun 01 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 Javascript
JS设计模式之命令模式概念与用法分析
Feb 06 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
Sep 04 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
May 20 Javascript
Vue+Element实现表格编辑、删除、以及新增行的最优方法
May 28 Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
Aug 09 Javascript
Vue文本模糊匹配功能如何实现
Jul 30 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学习笔记之三 数据库基本操作
2011/01/17 PHP
smarty模板局部缓存方法使用示例
2014/06/17 PHP
php多进程并发编程防止出现僵尸进程的方法分析
2020/02/28 PHP
Js获取下拉框选定项的值和文本的实现代码
2014/02/26 Javascript
JavaScript时间操作之年月日星期级联操作
2016/01/15 Javascript
原生JS轮播图插件
2017/02/09 Javascript
超全面的vue.js使用总结
2017/02/12 Javascript
js放到head中失效的原因与解决方法
2017/03/07 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
Vue响应式添加、修改数组和对象的值
2017/03/20 Javascript
js中字符型和数值型数字的互相转化方法(必看)
2017/04/25 Javascript
详解vue项目构建与实战
2017/06/27 Javascript
关于jquery form表单序列化的注意事项详解
2017/08/01 jQuery
在vue中,v-for的索引index在html中的使用方法
2018/03/06 Javascript
微信公众平台 发送模板消息(Java接口开发)
2019/04/17 Javascript
vue element中axios下载文件(后端Python)
2019/05/10 Javascript
JS实现骰子3D旋转效果
2019/10/24 Javascript
vue 在服务器端直接修改请求的接口地址
2020/12/19 Vue.js
Vue.extend 登录注册模态框的实现
2020/12/29 Vue.js
windows下添加Python环境变量的方法汇总
2018/05/14 Python
python 通过手机号识别出对应的微信性别(实例代码)
2019/12/22 Python
django API 中接口的互相调用实例
2020/04/01 Python
解决pyqt5异常退出无提示信息的问题
2020/04/08 Python
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
Happy Plugs官网:瑞典无线耳机品牌
2020/07/16 全球购物
求最大连续递增数字串(如"ads3sl456789DF3456ld345AA"中的"456789")
2015/09/11 面试题
关于圣诞节的广播稿
2014/01/26 职场文书
万年牢教学反思
2014/02/15 职场文书
2014年教师节寄语
2014/04/03 职场文书
《永远的白衣战士》教学反思
2014/04/25 职场文书
软件工程毕业生自荐信
2014/07/04 职场文书
淘宝文案策划岗位职责
2015/04/14 职场文书
公司新员工欢迎词
2015/09/30 职场文书
2019银行员工个人工作自我鉴定
2019/06/27 职场文书
Java 获取Word中所有的插入和删除修订的方法
2022/04/06 Java/Android
MySQL如何使备份得数据保持一致
2022/05/02 MySQL