当前位置: 首页 > article >正文

js nextSibling属性和previousSibling属性概述及使用注意

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://www.lryc.cn/news/2417294.html

相关文章:

  • 0成本搭建个人博客网站之制作静态网页
  • P2v, V2v 实践
  • 联通项目中的常见术语(BTS、BSC、MSC、VLR、HLR)
  • Pascal基础
  • 【web前端期末大作业】:HTML做一个公司官网首页页面(纯html代码)
  • Android 绘图(一)——绘制直线的drawnline方法
  • Android入门教程,持续更新中
  • 常量指针,指针常量,常量指针的指针常量
  • LabVIEW入门(基础篇)
  • 打开计算机用户策略,打开组策略,详细教您电脑组策略怎么打开
  • 斯坦福密码学-3-分组密码block_cipher
  • 正点原子[第二期]Linux之ARM(MX6U)裸机篇学习笔记-5 I.MX6U SoC介绍
  • 更新r语言_R语言可视化大观园(持续更新)
  • fiddler抓包及Proxifier配置代理
  • LaTeX 常用语法格式总结 列表计数、图、公式、表格、参考文献环境
  • STM32驱动 HTU21D温湿度传感器
  • 章文嵩将离职,曾是阿里开源“赶集人”,投身开源 20 年
  • Android开发之内容解析者ContentResolver
  • Windows电脑软件程序多开软件的简单介绍:
  • 狂学数据库之关系模式分解算法
  • JDBC方法参数详解 DriverManager,Statement,Connection,ResultSet,使用PreparedStatement对象来解决sql注入
  • mysql 多字段排序
  • C语言学习,fclose()函数分析
  • C++ 使用 tinyxml2 解析创建 xml
  • PowerManager详解
  • PCB Layout 拉线技巧
  • 批处理常用命令详解
  • 24小时计时器设计logisim_c++日期、时间和计时器
  • 我的javaweb学习笔记
  • 我的第一个网站“爱汉服”