网站开发进阶（五十四）jQuery获取父级元素、子级元素、兄弟元素方法汇总_$(obj

2401_84412357

于 2024-05-10 01:08:54 发布

阅读量381

点赞数 5

分类专栏：程序员文章标签：前端面试学习

本文链接：https://blog.csdn.net/2401_84412357/article/details/138638660

版权

程序员专栏收录该内容

203 篇文章 0 订阅

订阅专栏

最后

一个好的心态和一个坚持的心很重要，很多冲着高薪的人想学习前端，但是能学到最后的没有几个，遇到困难就放弃了，这种人到处都是，就是因为有的东西难，所以他的回报才很大，我们评判一个前端开发者是什么水平，就是他解决问题的能力有多强。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

分享一些前端面试题以及学习路线给大家

例如下面代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
 window.onload = function() {
 var nextType = document.getElementById('one').nextSibling;
 alert(nextType.nodeType);
 }
 </script>
</head>
<body>
    <div id="div">
        <p id = "one">我是p</p>
        <span id="two">我是span</span>
    </div>
</body>
</html>

在上面这段代码中，获取了id为"one"的元素并用nextSibling获取了他的下一个同胞元素。赋值给了变量nextType。

var nextType = document.getElementById('one').nextSibling;

并使用 alert(nextType.nodeType);弹出他的节点类型，如果按常理，元素p下一个相邻的同胞元素为是span,弹出的数字应该为“1”，但我在火狐，谷歌，IE浏览器（网上说只有火狐才会把换行，空格当做文本节点处理，但是我测试谷歌，IE浏览器效果都是一样的，这有点不解）打开后，弹出的数字是3，也就是文本节点。这是因为换行符被当做文本节点来处理，成为了p元素的下一个同胞元素。

如果我要获取span的文本值，需要这样写

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script>
 window.onload = function() {
 var nextType = document.getElementById('one').nextSibling;
 var span = nextType.nextSibling;
　　　　 alert(span.lastChild.nodeValue);
　　 }
 </script>
</head>
<body>
    <div id="div">
        <p id = "one">我是p</p>
        <span id="two">我是span</span>
    </div>
</body>
</html>

p和span标签中间隔着文本节点，需要连续使用2次nextSibling才能选中span标签取得文本值。

注意⚠️：firstChild,lastChild,nextSibling,previousSibling都会将空格或者换行当做节点处理，但是有代替属性。所以为了准确地找到相应的元素，会用firstElementChild,lastElementChild,nextElementSibling,previousElementSibling兼容的写法，这是JavaScript自带的属性。

但坏消息是IE6,7,8不兼容这些属性。IE9以上和火狐谷歌支持。可参考下面的方法过滤文本节点获取正确的下一个元素节点。

    function getNextElement(element){
            var e = element.nextSibling;
            if(e == null){//测试同胞节点是否存在，否则返回空
                return null;
            }
            if(e.nodeType==3){//如果同胞元素为文本节点
                var two = getNextElement(e);
                if(two.nodeType == 1)
                    return two;
            }else{
                if(e.nodeType == 1){//确认节点为元素节点才返回
                    return e;
                }else{
                    return false;
                }
            }
        }