Javascript连载28-节点之间的关系演示

当前位置:

首页 > temp > JavaScript教程 >

Javascript连载28-节点之间的关系演示

一、节点之间的关系

（1）获取父节点
（2）上一个兄弟节点
（3）下一个兄弟节点
（4）获取标签中的第一个子节点
（5）获取标签中的最后一个子节点
（6）获取元素的节点
（7）获取任意兄弟的节点
节点包括：标签、属性、文本、注释等
直接上代码

    <style>
        #box{
            width:200px;
            height:200px;
            background-color: red;
        }
    </style>
</head>
<body>
<div id="box">
    <button class="btn">按钮</button>
    <span id="span">
        <a href="#">一个链接</a>
    </span>
    <p class="lk">我是段落标签</p>
    <div>哈哈哈</div>
</div>
<script>
    window.onload = function (ev) {
        var a = document.getElementsByTagName('a')[0];
        console.log(a.parentNode);//获取父节点
        console.log(a.parentElement);//也是用来获取父节点，但还有点区别，后面再说
        //获取兄弟节点
        var span = document.getElementById("span");
        //下一个节点
        var nextEle = span.nextSibling;//在JS中也会把空格和换行当成一个标签
        var nextEle2 = span.nextElementSibling || span.nextSibling;//这样做一个判断，拿来的元素的节点而不是换行或者空格
        var preEle = span.previousElementSibling || span.previousSibling;
        console.log(nextEle);
        console.log(nextEle2);
        console.log(preEle);

        console.log("-------------------");

        var box = document.getElementById("box");
        //获取第一个子节点
        console.log(box.firstElementChild || box.firstChild);
        //获取最后一个节点
        console.log(box.lastElementChild || box.lastChild);
        //获取所有的节点
        console.log(box.childNodes);
        //获取所有的元素节点（也就是非换行空格的节点）
        console.log(box.children);
    }
</script>
</body>

28.1
28.2

二、源码：

D28_1_GetAPI.html
地址:https://github.com/ruigege66/JavaScript/blob/master/DD28_1_GetAPI.html
博客园：https://www.cnblogs.com/ruigege0000/
CSDN：https://blog.csdn.net/weixin_44630050?t=1

出处：https://www.cnblogs.com/ruigege0000/p/13467250.html

栏目列表