js nextSibling属性和previousSibling属性

js nextSibling属性和previousSibling属性   1:nextSibling属性       该属性表示当前节点的下一个节点(其后的节点与当前节点同属一个级别);如果其后没有与其同级的节点,则返回null。      需要特别注意的是:该属性在不同的浏览器中的执行结果并不都相同,见下面例示:     先来看一个例子: [javascript] viewplain copy<body>  <div>  <…

大家好,又见面了,我是你们的朋友全栈君。

   1:nextSibling属性

        该属性表示当前节点的下一个节点(其后的节点与当前节点同属一个级别);如果其后没有与其同级的节点,则返回null。

       需要特别注意的是:该属性在不同的浏览器中的执行结果并不都相同,见下面例示:

      先来看一个例子:

 

[javascript] 
view plain
 copy

  1. <body>  
  2. <div>  
  3. <input id=“a4” type=“button” οnclick=“alert(this.nextSibling);” value=“d” />  
  4. <input id=“a5” type=“button” οnclick=“alert(this.nextSibling);” value=“e” />  
  5. </div>  
  6. </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等其他常用标签元素属性来获取其属性。

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/159807.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • java简易爬虫Crawler

    java简易爬虫Crawler小型简易爬虫源码(java版)一,介绍:   >这是我的第一个爬虫,比较简单,没有队列,广度优先算法等,用list集合代替了队列。     >而且只爬取一个网址上面的图片,并不是将网址中的链接加入队列,然后下载一个网址一个网址下载其中的图片。     >不过,这是前期的,处于摸索阶段,后期学完队列和广算后,在涉及一点多线程,肯定会比想象中的更实用。

    2022年6月11日
    20
  • c中给字符数组,字符串指针赋值的方法总结[通俗易懂]

    在写程序的时候,总是搞混,现在总结一下以免以后再犯chara[10];怎么给这个数组赋值呢?谭浩强的书上明确指出,字符数组可以在定义时整体赋值,不能再赋值语句中整体赋值。1、定义的时候直接用字符串赋值chara[10]=”hello”;注意:不能先定义再给它赋值,如chara[10];a[10]=”hello”;这样是错误的!2、对数组中字符逐个赋值chara

    2022年4月15日
    49
  • P3381 【模板】最小费用最大流

    P3381 【模板】最小费用最大流

    2021年5月28日
    101
  • 软件著作权申请流程_如何申请软件著作权

    软件著作权申请流程_如何申请软件著作权现在越来越多的安卓市场需要软著才能注册或者是才能上线,申请软著势在必行。最简单的方式,简单的准备资料,找第三方代理,不过这样可能花费数百毛爷爷,如果是急需加急,可能是几千。现在简单说一下自己申请的流程:首先贴出中国版权保护中心网站中国版权保护中心:http://apply.ccopyright.com.cn/cpcc/column_list_bqdj.jsp请使用IE浏览器打开一.注册

    2022年9月23日
    0
  • DOCTYPE声明的作用及用法详解 – DOCTYPE HTML PUBLIC官方的定义「建议收藏」

    DOCTYPE声明的作用及用法详解 – DOCTYPE HTML PUBLIC官方的定义「建议收藏」四、DOCTYPEHTMLPUBLIC的官方定义  !DOCTYPE指定了HTML文档遵循的文档类型定义(DTD)。MicrosoftInternetExplorer6的新增内容。你可使用

    2022年7月4日
    30
  • 用户使用报告_分享最新2020年抖音用户画像报告

    用户使用报告_分享最新2020年抖音用户画像报告今天给大家分享2020年抖音用户画像报告-巨量算数。时间周期:本报告数据均采集于2020年1月(除特别说明外)数据来源:第三方数据取自“QuestMoblie”,内部数据取自“抖音官方”、“巨量算数”。人群说明:•报告中所提及的所有人群,在统计期内均为使用抖音行为的人群•垂直行业人群的指标说明详见附录•报告中所分析人群均为18岁以上成年人名词解释:•TGI:是指人群较总人群的偏好度,数值越…

    2022年4月30日
    56

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号