博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
js nextSibling属性和previousSibling属性概述及使用注意
阅读量:6087 次
发布时间:2019-06-20

本文共 1127 字,大约阅读时间需要 3 分钟。

nextSibling属性:该属性表示当前节点的下一个节点;如果其后没有与其同级的节点,则返回null;previousSibling属性:该属性与nextSibling属性的作用正好相反,接下来将详细介绍下,感兴趣的你不妨了解下哦,或许对你有所帮助
 
1:nextSibling属性
 
该属性表示当前节点的下一个节点(其后的节点与当前节点同属一个级别);如果其后没有与其同级的节点,则返回null。 
需要特别注意的是:该属性在不同的浏览器中的执行结果并不都相同,见下面例示: 
先来看一个例子: 
<body> 
<div> </div>
<input id="a4" type="button" οnclick="alert(this.nextSibling);" value="d" /> 
<input id="a5" type="button" οnclick="alert(this.nextSibling);" value="e" /> 
</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等其他常用标签元素属性来获取其属性。

转载地址:http://rfvwa.baihongyu.com/

你可能感兴趣的文章
Linux基础
查看>>
安卓手机屏幕怎么投射到电脑显示器
查看>>
JSP常用指令 include静态包含,copy到一个页面,只编译一个jsp文件
查看>>
Linux命令学习(1)-关机、重启、注销
查看>>
华三模拟器vlan配置实例
查看>>
获取访问者ip
查看>>
大数据教程(2.3):Linux系统安装Apache-Tomcat-7.0.68(防火墙配置)
查看>>
Spring中配置文件(properties)的读取与使用
查看>>
Exchange2013 -1- 部署前提、版本共存、硬件需求
查看>>
通过java连接mysql总结
查看>>
十余年BAT架构经验倾囊相授
查看>>
SharePoint Delegate Control
查看>>
写在最前面 - 每天5分钟玩转容器技术(1)
查看>>
两种进入容器的方法 - 每天5分钟玩转 Docker 容器技术(23)
查看>>
精心挑选的15款优秀 jQuery 文本特效插件和教程
查看>>
[WP8.1UI控件编程]Windows Phone理解和运用ItemTemplate、ContentTemplate和DataTemplate
查看>>
sublime text 搭建java运行运行环境
查看>>
发博客啦~~
查看>>
互联网的锤子(一)
查看>>
Linux系统的组成
查看>>