lovecoding
/
W250913


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div class="box1">
        <div class="box2">hello</div>
        <div class="box3">world</div>
    </div>
    <script>
        // 获取子节点
        var oBox1 = document.getElementsByClassName("box1")[0];
        // childNodes 获取到的节点列表（类数组）包括文本节点 还有 元素节点
        var childNode =  oBox1.childNodes;
        // children 获取到的是一个html的集合（类数组）仅包含元素节点
        var chilren = oBox1.children;
        // console.log(chilren);

        var oBox2 = document.getElementsByClassName("box2")[0];
        // parentElement 获取到的是父元素节点 单个元素
        var parent = oBox2.parentElement;
        // console.log(parent)

        // nextSibling 获取后边的兄弟节点 包含文本节点 单个节点不是集合
        var nextSibling = oBox2.nextSibling;
        // nextElementSibling 获取后边的兄弟节点 仅是元素节点 单个节点不是集合
        var nextElement = oBox2.nextElementSibling;
        // console.log(nextSibling,nextElement);

        var oBox3 = document.getElementsByClassName("box3")[0];
        // previousSibling 获取到前一个兄弟节点 包括文本节点 单个节点不是集合
        var prevSibling = oBox3.previousSibling;
        // previousElementSibling 获取前一个兄弟节点 不包括文本节点  单个节点不是集合
        var PrevElement = oBox3.previousElementSibling;
        console.log(PrevElement);
        

    </script>
</body>
</html>