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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • C#实现远程关机与远程开机(唤醒)

    C#实现远程关机与远程开机(唤醒)//***********************************远程关机************************************///www.uzhanbao.com///1.关闭远程机防火墙///2.设置远程强制关机系统权限gpedit.msc///3.计算机属性远程设置…

    2022年5月8日
    365
  • go 截取字符串_c语言输入n个字符串

    go 截取字符串_c语言输入n个字符串Go语言没有像Java一样的substring()方法,但是可以通过如下方式实现字符串截取funcTest_GoSubString(t*testing.T){ str:=”sssssddddd” rs:=[]rune(str) //rs[开始索引:结束索引] fmt.Println(string(rs[3:6])) str=”你好,Go语言” rs=[]ru…

    2022年9月1日
    2
  • IDEA 2022 怎么激活mybatiscodehelperpro-激活码分享

    (IDEA 2022 怎么激活mybatiscodehelperpro)2021最新分享一个能用的的激活码出来,希望能帮到需要激活的朋友。目前这个是能用的,但是用的人多了之后也会失效,会不定时更新的,大家持续关注此网站~IntelliJ2021最新激活注册码,破解教程可免费永久激活,亲测有效,下面是详细链接哦~https://javaforall.net/100143.html…

    2022年3月31日
    846
  • 八、JDK1.8中HashMap扩容机制

    八、JDK1.8中HashMap扩容机制导读前面文章一、深入理解-Java集合初篇中我们对Java的集合体系进行一个简单的分析介绍,上两篇文章二、Jdk1.7和1.8中HashMap数据结构及源码分析、三、JDK1.7和1.8HashMap数据结构及源码分析-续中我们分别对JDK1.7和JDK1.8中HashMap的数据结构、主要声明变量、构造函数、HashMap的put操作方法做了深入的讲解和源码分析。四、深入理解Java中的HashMap「网易面试快答」文章中主要针对面试中常见的面试问题进行简单解答。五、深入理解JDK1.7中H

    2022年6月16日
    21
  • Docker(三):镜像导入与导出、保存与加载、在Docker容器中安装软件

    Docker(三):镜像导入与导出、保存与加载、在Docker容器中安装软件

    2021年9月26日
    312
  • ECLIPSE软件安装MyBatis插件 MyBatis Generator

    ECLIPSE软件安装MyBatis插件 MyBatis GeneratorECLIPSE软件安装MyBatis插件打开Eclipse->导航栏Help->EclipseMarketplace会出现如下页面:搜索mybatis->安装我红框框的东西安装就是同意安装,然后install之类的…安装好之后会提示重启Eclipse…

    2022年9月13日
    2

发表回复

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

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