首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

nextElementSibling/nextSibling的可移植性

在浏览器中,nextElementSiblingnextSibling 是用于获取元素的下一个兄弟元素的属性。它们的可移植性是指在不同浏览器和浏览器版本中的兼容性。

nextElementSibling 是一个 DOM 元素,它返回元素的下一个兄弟元素,如果没有下一个兄弟元素,则返回 null。它只返回元素类型的兄弟元素,忽略文本节点和注释节点。

nextSibling 是一个通用的节点属性,它返回元素的下一个兄弟节点,包括文本节点、注释节点和元素节点。如果没有下一个兄弟节点,则返回 null

在现代浏览器中,nextElementSiblingnextSibling 都具有良好的兼容性,包括最新版本的 Chrome、Firefox、Safari、Edge 和 Internet Explorer 11。

然而,在一些较旧的浏览器版本中,nextElementSiblingnextSibling 的兼容性可能会有所不同。例如,在 Internet Explorer 8 和更早版本中,nextElementSibling 是不支持的,而 nextSibling 可以使用,但需要注意它可能返回文本节点或注释节点。

为了确保代码的可移植性,建议使用 nextElementSibling,并在必要时提供适当的回退方法,以处理不支持该属性的浏览器。例如:

代码语言:javascript
复制
var nextSibling = element.nextElementSibling || element.nextSibling;

这将首先尝试使用 nextElementSibling,如果不支持,则使用 nextSibling

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

nextSibling 和nextElementSibling

大家好,又见面了,我是你们的朋友全栈君。 在使用DOM过程中发现一个问题: 使用nextSibling 属性返回指定节点之后紧跟的节点,在相同的树层级中。被返回的节点以 Node 对象返回。...this.arrow = this.screen.nextSibling; this.left = this.arrow.children[0]; // undefined this.right = this.arrow.children...[1]; // undefined // 使用nextElementSibling this.arrow = this.screen.nextElementSibling; this.left = this.arrow.children...[0]; // 正常获取第一个子节点 this.right = this.arrow.children[1]; // 正常获取第2个子节点 nextSibling属性与nextElementSibling...属性的差别: nextSibling属性返回元素节点之后紧跟的兄弟节点(包括文本节点、注释节点即回车、换行、空格、文本等等); nextElementSibling属性只返回元素节点之后紧跟的兄弟元素节点

30340
  • jquery nextsibling_javascript中预编译

    JavaScript中的nextSibling和previousSibling和作用类似于jquery的next()和prev(),都是获取下一个/上一个同胞元素,如果下一个同级节点不存在,则此属性返回值是...但是具体的使用中还是有差异的,如果注意。就会引起错误 html结构中的各种空格,换行符都可能会把文本节点当做同胞元素处理。这就会导致错误。 例如下面代码 nextSibling获取了他的下一个同胞元素。...才能选中span标签取得文本值 firstChild,lastChild,nextSibling,previousSibling都会将空格或者换行当做节点处理,但是有代替属性 所以为了准确地找到相应的元素...,会用 firstElementChild, lastElementChild, nextElementSibling, previousElementSibling 兼容的写法,这是JavaScript

    59120

    DOM 元素的循环遍历

    nextSibling:ele 的下一个同辈节点 previousSibling:ele 的上一个同辈节点 因为 childNodes 包含看不见的空格文本,还有注释等内容,所以使用起来不是太方便 因此...firstElementChild:第一个直接子元素 lastElementChild:最后一个直接子元素 previousElementSibling:ele 的前一个兄弟元素 nextElementSibling...lastChild 进行元素遍历 let list = document.getElementById('list') let child = list.firstChild console.log(list.nextSibling...= list.lastChild) { if(child.nodeType === 1) { console.log( child ) } child = child.nextSibling...while(child) { console.log( child ) child = child.nextElementSibling } 深度优先遍历 遍历所有节点 深度优先遍历:当同时有兄弟节点和子节点的时候

    6.5K60

    第30天:DOM对象操作

    () documment.getElementsByClassName() //主流浏览器支持,IE6、7、8不兼容 三、节点访问关系 1、父节点:parentNode 2、兄弟节点: 下一个兄弟: nextSibling...  //IE6、7、8认识 nextElementSibling  //其他浏览器认识 同理: 上一个兄弟 previousSibling  //IE6、7、8认识 previousElementSibling...  //其他浏览器认识 兼容写法 var one=document.getElementById("one"); var div=one.nextElementSibling||one.nextSibling...标签 2、插入节点 (1)appendChild();添加孩子到某个盒子的最后面 (2)insertBefore(插入的节点,参照节点);两个参数必写 demo.insertBefore(test,childrens...[0]);//放到第一个孩子的前面 如果第二个参数为null,则默认新生成的盒子放到最后面 demo.insertBefore(test,null); 3、移除节点 removeChild() ; //

    38010

    实现云原生应用程序可移植性的梦想

    组织希望从云原生应用程序的可移植性中获得什么?为什么它如此困难?最重要的是,如何正确实现它?...组织希望从云原生应用程序的可移植性中获得什么?为什么它如此困难?最重要的是,如何正确实现它? 我们为什么需要云原生应用程序的可移植性? 有几个原因要迁移云原生应用程序: 热备份。...强调大规模的数据可移植性。 对于应用程序一致的云原生可移植性,必不可少的是恢复、克隆和升级数据以及将数据从一个位置迁移到另一个位置。 此外,重要的是大规模处理这些复杂问题。...这种情况下的应用程序可移植性就像在通电时重新布线房屋 - 一个错误的举动你就死定了。...换句话说,云原生应用程序的可移植性可以在没有触电风险的情况下成为 Day 2(全面生产) 的努力。

    12510

    BPF的可移植性和CO-RE (Compile Once – Run Everywhere)

    这些问题大大影响了BPF程序的可移植性。 本文将介绍BPF可移植性存在的问题,以及如何使用BPF CO-RE(Compile Once – Run Everywhere)解决这些问题。...伴随着BPF可编程性的稳步发展,BPF程序的开发也越来越简单。 尽管BPF提升了使用上的便利性,但却忽略了BPF程序开发中的一个方面:可移植性。"BPF可移植性"意味着什么?...我们将BPF可移植性定义为成功编写并通过内核验证的一个BPF程序,且跨内核版本可用,无需针对特定的内核重新编译。...我们正在使用BPF CO-RE来增强BPF的可移植性,并相信这是未来BPF程序开发的趋势,尤其是对于复杂的实际应用的BPF程序。...回顾 BPF CO-RE的目标是帮助BPF开发者使用一个简单的方式解决简单的可移植性问题(如读取结构体字段),并使用它来定位复杂的可移植性问题(如不兼容的数据结构,复杂的用户空间控制条件等)。

    1.4K20

    使用WebAssembly提高模型部署的速度和可移植性

    我们为医疗行业的模型部署做出了贡献,在过去的几个月中,我们已经帮助多家公司将经过训练的模型转移到不同类型的IoT设备上。...为了使事情变得切实,我们将研究简单的逻辑回归模型的训练和部署。但是,我们在这里讨论的大多数内容都直接转移到更复杂的模型上。 模型训练 为了说明模型训练与部署之间的区别,让我们首先模拟一些数据。...幸运的是,当训练模型时,所需的相当复杂的逻辑已被我们使用的各种ML库抽象化了。...显然,第一个部署过程接近数据科学家的“我们所知道的”。直接使用我们惯用的工具是非常方便的,并且在许多方面它都有效:我们可以使用对REST端点的调用来生成预测。...但是,一个小的内存占用和快速的执行也是很吸引人的,因为这正是我们在将模型投入生产的边缘所需要的:好运部署你的Docker容器(例如,)在ESP32 MCU板上。

    80130

    自己快速搭建可移植性强的web服务器

    之前写了一个版本的,有童鞋提出了一些好的建议,在此版本上做了一些优化和改进。...概述 阿里云的国内源加速 安装了一些工具 cron、curl、inetutils-ping、telnet、git、zlib1g-dev、nginx、supervisor、libzip-dev、unzip...、procps、sudo、vim 安装了一些常用的PHP扩展 composer、gd、xdebug、zip、pdo_mysql、opcache、mysqli、bcmath、redis、mongodb、swoole...-reload # 移除8081端口等 firewall-cmd --zone=public --remove-port=8081/tcp --permanent 配置SSL申请参数 (我这里使用的是阿里云...) 如果不是阿里云的请参考官方文档调整对应的参数 acme.sh官方文档 docker-composer.yml -> Ali_Key 以及 Ali_Secret 构建镜像 && 运行容器 docker-compose

    23620

    32 位单片机的应用可移植性——现实还是神话?

    与任何 SoC一样,该芯片的功能是通过与 CPU 内核集成在一起的 硬件外设进行定义的。当然,CPU 内核的性能和架构决定了可在芯片上执行的代码种类,但芯片与系统其他部分的交互要通过外设来进行。...这是制造商提供的固件库能帮助解决的问题,也是代码兼容性问题的核心所在。向这些库添加抽象层有助于提高可移植性,但无法解决两个MCU之间的所有功能差异。...此外,库函数的命名也不相同, 这意味着用户必须重写代码中的所有库函数调用,并且要弄清将哪些变量和值提交给函数。这完全不是所谓的可移植性。...但是,这些优势没有一项与 CMSIS 或可移植性有关。对两个厂商的MCU 所进行的比较不应基于抽象层,而应该着重于使用某个 MCU 实现其预期最终用途的顺利程度。...尽管 CMSIS 这样的 API对于隐藏硬件复杂性(例如针对 RTOS)很有用,并在二者之间形成无缝接口,但无法保证软件在各个制造商间的可移植性。 要考虑的最后一点是单片机的基本宗旨。

    50220

    DOM、BOM一些兼容性问题

    选取字类和兄弟元素 这里主要是四个属性,分别是: firstElementChild 获取元素的第一个子元素; lastElementChild 获取元素的最后一个子元素; nextElementSibling..._nextElementSibling() 返回元素的下一个兄弟元素,如果没有则返回 null : Element.prototype....运算符在 IE8 及其以上版本是支持的,可以使用, node.nextSibling 和 node.nodeType 属性在 IE8 上也是支持的,前者表示获取一个结点(是结点,而非元素结点)的下一个兄弟节点...需要注意的是,在支持的浏览器中, nextElementSibling 是只读的,因此可以使用 Object.defineProperty 方法改造一下,这个方法 IE8 也是支持的。 if(!...("nextElementSibling" in Element.prototype)){ Object.defineProperty(Element.prototype, "nextElementSibling

    1.6K20
    领券