nextSibling
某个元素之后紧跟的元素
nextSibling 属性可返回某个元素之后紧跟的元素(处于同一树层级中)。如果无此节点,则属性返回 null。
定义和用法
与其相反的是previousSibling
语法:
nodeObject.nextSibling
提示和注释
注释:Internet Explorer 会忽略节点间生成的空白文本节点(例如,换行符号),而 Mozilla 不会这样做。因此,在下面的例子中,我们会使用一个函数来检查首个子节点的节点类型。
元素节点的节点类型是 1,因此如果首个子节点不是一个元素节点,它就会移至下一个节点,然后继续检查此节点是否为元素节点。整个过程会一直持续到首个元素子节点被找到为止。通过这个方法,我们就可以在 Internet Explorer 和 Mozilla 得到正确的方法。
实例
假设要取到所有页面中所有H1标题后面的下一个元素为其添加CSS属性.
在所有的例子中,我们将使用 XML 文件 books.xml,以及 JavaScript 函数 loadXMLDoc()。
下面的代码片段可取得 XML 文档中首个 元素的下一个同级子节点:</div><div class="text">//check if the next sibling node is an element node</div><div class="text">function get_nextsibling(n)</div><div class="text">{ var x=n.nextSibling; while (x.nodeType!=1) { x=x.nextSibling; } return x; }</div><div class="text"></div><div class="text"></div><div class="text"></div><div class="text">document.write(x.childNodes[0].nodeValue);</div><div class="text">var y=get_nextsibling(x);</div><div class="text"></div><div class="text">document.write(y.nodeName);</div><div class="text"></div><div class="text">document.write(y.childNodes[0].nodeValue);</div><div class="text">输出:</div><div class="text">title = Everyday Italian Next sibling: author = Giada De Laurentiis</div> <div class="divide"> </div> <div id="参考资料"> <div class="level2"> 参考资料 </div> </div> <div class="tipview"><div class="divide"></div><div class="tipview__text">最新修订时间:2023-10-27 14:13</div></div> </div> </div> </div> <div class="style__Container-sc-8530xr-0 kWPvBT"> <div class="style__Container-sc-1ftytuq-0 hZpMaC"> <div class="title"> 条目作者 </div> <a target="_blank" href="" class="style__Cintainer-sc-1a7at0y-0 kJOHQl"> <div class="box"> <div class="box-avatar"> <div class="box-avatar-inner" style="background:transparent"> </div> </div> <div class="box-info"> <div class="box-info-name"> <div class="box-info-name-main"> 小编 </div> </div> <div class="box-info-logo"> <div class="box-info-logo-inner box-info-logo-inner-left"> <div class="box-info-logo-inner-img" style="background:transparent"> </div> <span class="box-info-logo-inner-text"> 资深百科编辑 </span> </div> </div> </div> </div> </a> </div> <div style="height:8px"> </div> <div class="style__Container-sc-jobp81-0 dqhJtp"> <div class="title"> 目录 </div> <div class="box"> <div class="box-item box-item-active"> 概述 </div> <div class="box-item ">定义和用法</div><div class="box-item ">提示和注释</div> <div class="box-item "> 参考资料 </div> </div> </div> </div> </div> </div> <div class="style__styles-sc-1i14ge4-0 kWnngx"> <p class="footer-text"> Copyright©2024 <a class="backup-number" rel="nofollow noopener noreferrer" target="_blank" href="https://beian.miit.gov.cn/#/Integrated/index"><span>闽ICP备2024072939号-1</span></a> </p> </div> </div> </body> </html>