JSDOM关系：兄弟关系和父子关系

最新推荐文章于 2023-09-05 15:52:34 发布

书院二层楼

最新推荐文章于 2023-09-05 15:52:34 发布

阅读量586

点赞数 1

分类专栏： JS 文章标签： childNodes nextSibling parentNode offsetParent previousSibling

本文链接：https://blog.csdn.net/caoxinjian423/article/details/113782167

版权

JS 专栏收录该内容

61 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            position: relative;
        }
        #box4 {
            position: fixed;
        }
        span {
            position: absolute;
            left: 0;
            top: 0;
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div id="div">
        <p>p1</p>
        <h3>h1</h3>
        <p>p2</p>
        <!-- 注释 -->
        <p>p3</p>
        <h3>h2</h3>
        <p>p4</p>
        <h3>h3</h3>
        <p>p5</p>
        <p>p6</p>
    </div>  

    <div id="box">
        <div id="box2">
            <span></span>
        </div>
    </div> 

    <div id="box3">
        <h1></h1>
    </div>

    <div id="box4">
        <span></span>
    </div>
    <script>

        /* 
        查找子级 
            childNodes 子节点 (包含所有节点: 文本节点、注释节点、元素节点……),类型为NodeList
            children 子元素 (只包含元素节点),类型为HTMLCollection
            firstChild 第0个子节点
            firstElementChild 第0个子元素
            lastChild 最后一个子节点
            lastElementChild 最后一个子元素
            nextSibling 下一个兄弟节点
            nextElementSibling 下一个兄弟元素
            previousSibling 上一个兄弟节点
            previousElementSibling 上一个兄弟元素 
        */
        {
            let div = document.querySelector("#div");
            let children = div.childNodes;
            children = [...children].filter(item=>item.nodeType == 1);
            console.log(children);    //打印：(9) [p, h3, p, p, h3, p, h3, p, p]
            console.log(div.childNodes);    //打印：NodeList(21) [text, p, text, h3, text, p, text, comment, text, p, text, h3, text, p, text, h3, text, p, text, p, text]
            console.log(div.children);    //打印：HTMLCollection(9) [p, h3, p, p, h3, p, h3, p, p]
        }

        {
            let div = document.querySelector("#div");
            console.log(div.firstChild);    //打印：#text
            console.log(div.firstElementChild);    //打印：<p>p1</p>
            console.log(div.lastChild);    //打印：#text
            console.log(div.lastElementChild);    //打印：<p>p6</p>
        }

        {
            let div = document.querySelector("#div");
            let p2 = div.children[2];
            console.log(p2.nextSibling);    //打印：#text
            console.log(p2.nextElementSibling);    //打印：<p>p3</p>
            console.log(p2.previousSibling);    //打印：#text
            console.log(p2.previousElementSibling);    //打印：<h3>h1</h3>
        }





        /*
        查找父级
            parentNode 父节点
            parentElement 父元素
            offsetParent 定位父级 (元素根据定位的这个父级),与当前元素最近的经过定位(position不等于static)的父级元素，主要分为下列几种情况
                【1】元素自身有fixed定位，offsetParent的结果为null
                【2】元素自身无fixed定位，且父级元素都未经过定位，offsetParent的结果为<body>
                【3】元素自身无fixed定位，且父级元素存在经过定位的元素，offsetParent的结果为离自身元素最近的经过定位的父级元素
                【4】<body>元素的parentNode是null

        */    
        {
            let box2 = document.querySelector("#box2");
            let span = document.querySelector("span");
            let h1 = document.querySelector("#box3 h1");
            let span4 = document.querySelector('#box4 span')
            let box4 = document.querySelector('#box4')
            console.log(span.parentNode);    //定位box2
            console.log(span.parentElement);    //定位box2
            console.log(span.offsetParent);    //定位box
            console.log(box2.offsetParent);    //定位box2
            console.log(h1.offsetParent);    //定位body
            console.log(span4.offsetParent);    //定位box4
            console.log(box4.offsetParent);    //定位null
            console.log(document.body.offsetParent);    //定位null
        }
    </script>
</body>
</html>

书院二层楼

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JSDOM关系：兄弟关系和父子关系

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box { .
复制链接

扫一扫