js兄弟节点

最新推荐文章于 2023-12-14 11:20:07 发布

香格里拉&

最新推荐文章于 2023-12-14 11:20:07 发布

阅读量3.0k

点赞数 1

分类专栏： JavaScript 文章标签： html5 javascript

本文链接：https://blog.csdn.net/Amor__xiaowang/article/details/103971130

版权

JavaScript 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

用到的方法:

- nextSibling: 下一个兄弟节点

- previousSibling: 上一个兄弟节点

- previousElementSibling: 上一个兄弟元素节点

- nextElementSibling: 下一个兄弟元素节点

<body>
<div id="box">
    <div>这是一个区域1</div>
    <div>这是一个区域2</div>
    <div id="c3">这是一个区域3</div>
    <div>这是一个区域4</div>
    <div>这是一个区域5</div>
</div>
</body>
<script src="../commons.js"></script>
<script>
    var c3 = document.getElementById('c3');
    //下一个兄弟节点
    var nextSibling = c3.nextSibling;
    //上一个兄弟节点
    var previousSibling = c3.previousSibling;

    console.log(nextSibling); //text,文本节点
    console.log(previousSibling); //text,文本节点

    //上一个兄弟元素, 兼容问题
    //var previousElementSibling = c3.previousElementSibling;
    var nextElementSibling = getNextElementSibling(c3);
    //下一个兄弟元素, 兼容问题
    //var nextElementSibling = c3.nextElementSibling;
    var previousElementSibling = getPreviousElementSibling(c3);

    console.log(nextElementSibling);  //div 4, 元素节点
    console.log(previousElementSibling); //div 2, 元素节点
    //document.write(previousElementSibling.nodeName);
</script>

commons.js

/*获取上一个兄弟元素节点*/
function getPreviousElementSibling(element) {
    var el = element;
    while (el = el.previousSibling) {
        if (el.nodeType === 1) {
            return el;
        }
    }
    return null;  //没有上一个兄弟节点返回null
}


/*获取下一个兄弟元素节点*/
function getNextElementSibling(element) {
    var el = element;
    while (el = el.nextSibling) {
        if (el.nodeType === 1) {
            return el;
        }
    }
    return null;  //没有下一个兄弟节点返回null
}

运行结果如下图

在这里插入图片描述

香格里拉&

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
js兄弟节点

用到的方法:- nextSibling: 下一个兄弟节点- previousSibling: 上一个兄弟节点- previousElementSibling: 上一个兄弟元素节点- nextElementSibling: 下一个兄弟元素节点<body><div id="box"> <div>这是一个区域1</div> &l...
复制链接

扫一扫