文章目录

在 【Web APIs】JavaScript 节点操作 ① ( DOM 方式获取标签元素的弊端 | 节点简介 | DOM 节点概述 | 节点基本属性 - 节点类型、节点名称、节点值 ) 博客 中 , 介绍了 传统 DOM 方式获取节点的方式 及其 弊端 ( 调用繁琐、逻辑性差 ) , 并对 节点的基本属性 ( 节点类型、节点名称、节点值 ) 进行了简要介绍 ;

在 【Web APIs】JavaScript 节点操作 ② ( DOM 节点层级 | 利用节点间的层次关系获取元素 | 遍历节点层级 | 获取 父节点 / 子节点 代码示例 ) 博客 中 , 介绍了 利用 节点间的层次关系获取元素 , 通过 parentNode 获取父元素 , 通过 childNodes 获取所有类型节点 ( 包括文本节点 ) , 通过 children 获取子元素节点 , 并给出了示例代码 ;

在 【Web APIs】JavaScript 节点操作 ③ ( 子节点操作 | firstChild 属性 | firstElementChild 属性 | children[0] 属性 ) 博客 中 介绍 了 第一个子节点 和 最后一个子节点 的获取方式 ;

在 【Web APIs】JavaScript 节点操作 ④ ( 节点操作案例 - 下拉菜单案例 ) 博客中 , 开发了一个 节点操作的案例 , 控制下拉菜单 显示 / 隐藏 ;





一、JavaScript 兄弟节点操作



1、获取兄弟节点属性 - previousSibling、nextSibling、previousElementSibling、nextElementSibling 属性


在 JavaScript 的 DOM 节点操作中 , 兄弟节点 指的是拥有 相同父节点 的节点 ;

通过 元素 的 下面几个属性 , 可获取兄弟节点 :

  • previousSibling : 返回 当前节点的 前一个兄弟节点 , 注意 : 返回的节点 包括 文本节点 和 注释节点 ; ( 不推荐使用 )
  • nextSibling : 返回 当前节点的 后一个兄弟节点 , 注意 : 返回的节点 包括 文本节点 和 注释节点 ; ( 不推荐使用 )
  • previousElementSibling : 返回 当前节点的 前一个 元素类型 兄弟节点 ; ( 不推荐使用 , IE9 以上的浏览器才支持 )
  • nextElementSibling : 返回 当前节点的 后一个 元素类型 兄弟节点 ; ( 不推荐使用 , IE9 以上的浏览器才支持 )

2、获取兄弟节点属性 - 自定义兼容函数


previousSibling 和 nextSibling 不存在兼容性问题 , 所有版本的浏览器都可以使用 , 但是 获取的兄弟节点 包括 文本节点 和 注释节点 ;

previousElementSibling 和 nextElementSibling 可以获取 元素类型 的兄弟节点 , 可以过滤 文本类型节点 和 注释类型节点 , 但是 存在浏览器兼容性问题 , 只有 IE9 以上的浏览器才可以使用 ;


这里为了 保证 浏览器兼容性 , 推荐自己封装一个函数 , 将 previousSibling 和 nextSibling 属性封装到一个函数中 , 由开发者自己手动过滤 文本类型节点 和 注释类型节点 ;

// 获取前一个兄弟元素节点
function getPreviousElementSibling(element) {
    var previous = element.previousSibling;
    while (previous) {
        if (previous.nodeType === 1) {  // Node.ELEMENT_NODE
            return previous;
        }
        previous = previous.previousSibling;
    }
    return null;
}

// 获取后一个兄弟元素节点
function getNextElementSibling(element) {
    var next = element.nextSibling;
    while (next) {
        if (next.nodeType === 1) {  // Node.ELEMENT_NODE
            return next;
        }
        next = next.nextSibling;
    }
    return null;
}




二、兄弟节点操作 - 代码示例



1、完整代码示例


代码示例 :

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>兄弟节点操作</title>
</head>

<body>
    <div>div 节点</div>
    <span>span 节点</span>
    <script>
        var div = document.querySelector('div');
        var span = document.querySelector('span');

        console.log('1. nextSibling 和 previousSibling 属性 (获取所有类型节点) ');

        // nextSibling 属性 返回 当前节点的 前一个兄弟节点 , 
        // 注意 : 返回的节点 包括 文本节点 和 注释节点 ; ( 不推荐使用 )
        console.log(div.nextSibling);

        // previousSibling : 返回 当前节点的 后一个兄弟节点 , 
        // 注意 : 返回的节点 包括 文本节点 和 注释节点 ; ( 不推荐使用 )
        console.log(span.previousSibling);

        console.log('2. nextElementSibling 和 previousElementSibling 属性 (IE9以上支持) ');

        // previousElementSibling 属性 返回 当前节点的 前一个 元素类型 兄弟节点 ; 
        // ( 不推荐使用 , IE9 以上的浏览器才支持 )
        console.log(div.nextElementSibling);

        // nextElementSibling 属性 返回 当前节点的 后一个 元素类型 兄弟节点 ; 
        // ( 不推荐使用 , IE9 以上的浏览器才支持 )
        console.log(span.previousElementSibling);

        console.log('3. 自定义兼容函数');

        // 自定义兼容函数 获取后一个 元素类型兄弟节点
        console.log(getNextElementSibling(div));

        // 自定义兼容函数 获取前一个 元素类型兄弟节点
        console.log(getPreviousElementSibling(span));


        // 获取前一个兄弟元素节点
        function getPreviousElementSibling(element) {
            var previous = element.previousSibling;
            while (previous) {
                if (previous.nodeType === 1) { // Node.ELEMENT_NODE
                    return previous;
                }
                previous = previous.previousSibling;
            }
            return null;
        }

        // 获取后一个兄弟元素节点
        function getNextElementSibling(element) {
            var next = element.nextSibling;
            while (next) {
                if (next.nodeType === 1) { // Node.ELEMENT_NODE
                    return next;
                }
                next = next.nextSibling;
            }
            return null;
        }
    </script>
</body>

</html>

2、执行结果


执行结果 :

在这里插入图片描述

# 前端 # javascript # java # 浏览器
Logo
AI Agent技术社区

Agent 垂直技术社区，欢迎活跃、内容共建。

更多推荐

SeedVR2终极指南：如何用单步扩散模型实现专业级视频修复

还在为老旧视频的模糊画质而烦恼吗？面对抖动严重的监控录像或褪色的家庭影像，你是否曾希望有一种简单高效的修复方案？SeedVR2正是为解决这些痛点而生的一站式视频修复工具。作为字节跳动推出的先进视频修复模型，它能够在单步推理中实现专业级的视频质量提升，彻底改变了传统视频修复的工作流程。## 核心价值：为什么选择SeedVR2进行视频修复？**传统视频修复的三大瓶颈**：1. **计算成本高

avatar AI Agent技术社区

深度解析Amlogic S9xxx电视盒子Armbian系统：从闲置设备到Linux服务器的终极实战指南

你是否拥有一台闲置的Amlogic S9xxx系列电视盒子？想让它摆脱单一的视频播放功能，变身为功能强大的Linux服务器、开发平台或家庭媒体中心？本指南将为你详细解析如何通过Armbian系统实现这一转变，让你的电视盒子重获新生，成为高性能的Linux设备。Armbian系统基于Debian/Ubuntu构建，专为ARM芯片优化，提供了完整的Linux生态支持。## 🎯 核心价值与独特优势

avatar AI Agent技术社区

CANN/runtime Event管理API

本章节描述 CANN Runtime 的 Event 管理接口，用于事件的创建、记录、同步、计时及 IPC 跨进程共享。- [`aclError aclrtCreateEvent(aclrtEvent *event)`](#aclrtCreateEvent)：创建Event，创建出来的Event可用于统计两个Event之间的耗时、多Stream之间的任务同步等场景。- [`aclError

avatar AI Agent技术社区