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)
上一篇 2022年7月15日 上午8:36
下一篇 2022年7月15日 上午8:36


相关推荐

  • wrk 压测工具

    wrk 压测工具wrk 压测工具安装 gitclonehttp github com wg wrk gitcdwrkmake 常用参数类型 Usage wrk options url Options c connections N Connectionst d duration T Durationofte e g 2s 2m 2h T N url options

    2025年11月5日
    5
  • fastclick

    fastclickfastclick–处理移动端click事件300毫秒延迟安装:npminstallfastclick–save   之后,在main.js中引入    importFastClickfrom’fastclick’    并绑定到bodyFastClick.attach(document.body);1、兼容性iOS3及更高版本的移动SafariiOS5及更高版本的C…

    2022年6月19日
    56
  • Qwen3.5-27B服务管理教程:supervisor启停/日志排查/端口检测全流程

    Qwen3.5-27B服务管理教程:supervisor启停/日志排查/端口检测全流程

    2026年3月14日
    2
  • dos下拷贝服务器文件命令行,win7在DOS环境下怎么使用copy命令?使用copy命令复制文件的方法…[通俗易懂]

    dos下拷贝服务器文件命令行,win7在DOS环境下怎么使用copy命令?使用copy命令复制文件的方法…[通俗易懂]win7系统在DOS环境下,如果想复制文件,该怎么操作呢?正常复制粘贴用不了,我们可以使用copy这条命令。copy命令复制文件占用系统资源会更少,复制速度也会略快。那么DOS环境下怎么使用copy命令?我们一起阅读下文教程吧。1、在DOS环境下,如果想复制一个文件副本,并且不对文件名进行更改,则可输入如下命令:copy源文件新文件位置比如说,我想将当前目录下的1.txt文件复制到…

    2022年7月18日
    22
  • Scripting.FileSystemObject对象不能创建的原因「建议收藏」

    Scripting.FileSystemObject对象不能创建的原因「建议收藏」www.u8686.com-信息发布平台Scripting.FileSystemObject对象不能创建的原因        可能是是由于FSO没有注册,或是注册后由于使用专杀工具等提供的解除注册功能。    解决方法:Windows 2000、XP可使用regsvr32 scrrun.dll命令注册。Windows 98使用c:/windows/system/re

    2022年7月14日
    21
  • Python的pywifi模块

    Python的pywifi模块想蹭❤️小姐姐的热点❤️被拒后,我用❤️Python来暴力激活成功教程了WiFi的密码❤️文章目录想蹭❤️小姐姐的热点❤️被拒后,我用❤️Python来暴力激活成功教程了WiFi的密码❤️一、起因背景二、需求分析三、代码实现1、生成密码本2、利用密码本进行自动化的测试3、结果展示四、后续总结一、起因背景这天博主和曾经的一个小姐姐同学凑巧同时坐在了同一辆长途客车上,恰谈之后才了解到原来这位小姐姐家里挺富裕的,居然,开通了无限的流量使用权限,博主心想,既然是老同学了,借用一下这个无限的流量应该是没什么问题吧,反正是

    2022年7月27日
    8

发表回复

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

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