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


相关推荐

  • 服务器出现kernel: TCP: time wait bucket table overflow解决

    服务器出现kernel: TCP: time wait bucket table overflow解决http://blog.sina.com.cn/s/blog_69cdee7f0100yowt.html#一台Nginx+php-fcgi的服务器做了负载均衡,在主控端发现一直在报错:viewsourceprint?01#—————————-引用文字-开始———————-

    2022年5月15日
    32
  • 50道 CSS 经典面试题(包含答案)

    50道 CSS 经典面试题(包含答案)1介绍一下标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?标准盒子模型:宽度=内容的宽度(content)+border+padding+margin低版本IE盒子模型:宽度=内容宽度(content+border+padding)+margin2box-sizing属性?用来控制元素的盒子模型的解析模式,默认为content-boxcontext-box:W3C的标准…

    2022年5月30日
    26
  • 判断图同构大杀器—nauty算法

    判断两图是否同构是一个经典问题。nauty算法作为时下较为流行的主流算法,具有效率高,剪枝力度强等优势。当然,在某些特殊情况会失灵。虽然该算法的概念在上世纪80年代就提出来了,但发展至今,仍然是不可忽略的一种方法。本人翻遍了中文互联网,没找到详细相关介绍,在stackoverflow上边找到了一个问答,顺着帖子的回复找到了算法原作者自建的网站,如获至宝。再结合离散数学,看懂了这个算法的大致流程。总结如下:nauty算法:判断两个图是否同构。思路:①设置一套编号系统,给两个图进行编号,如果两个

    2022年4月8日
    35
  • php已安装的swoole怎么查看swoole版本[通俗易懂]

    php已安装的swoole怎么查看swoole版本

    2022年2月12日
    40
  • 【BootCDN】前端使用开源免费的 CDN 加速服务

    【BootCDN】前端使用开源免费的 CDN 加速服务BootCDN-官网链接CDN的全称是ContentDeliveryNetwork,即内容分发网络。CDN是构建在现有网络基础之上的智能虚拟网络,依靠部署在各地的边缘服务器,通过中心平台的负载均衡、内容分发、调度等功能模块,使用户就近获取所需内容,降低网络拥塞,提高用户访问响应速度和命中率。CDN的关键技术主要有内容存储和分发技术。引用方式示例<scriptsrc=”…

    2025年7月26日
    3

发表回复

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

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