Java实现所有子节点添加到父节点中通过子节点获取父节点

转载

网络安全守护先锋 2023-10-19 12:07:09

文章标签 Java实现所有子节点添加到父节点中 javascript 父节点子节点数据结构 文章分类 Java 后端开发

引言

通过前面笔记DOM的介绍，DOM的数据结构是一种树形数据结构，因此可以使用DOM获取对象（元素），然后对该对象的属性以及样式进行设置以及更改，甚至可以动态创建以及删除对象。总结来说就是：通过DOM获得父节点，兄弟节点进行操作

Java实现所有子节点添加到父节点中通过子节点获取父节点_子节点

节点的获取

所有节点都是文档对象的属性
DOM的节点都不是孤立的，因此可以通过DOM之间的相对关系进行访问

获取父节点（parentNode)

方法：使用节点对象，通过节点对象.parentNode获取父节点
例：

<body>
<!--a标签的父节点的父节点-->
    <div id ="box">
        <button id ="btn" class ="btn-class">第一个按钮</button>
        <button class ="btn-class"> 第二个按钮</button>
        <button>第三个按钮</button>
<!--        a标签父节点-->
        <span id ="span">
<!--            a标签-->
            <a herf="#">点击打开快乐</a>
        </span>
    </div>
<script>
    window.onload = function () {
        //获取a节点
        var a = document.getElementsByTagName("a")[0];
        console.log(a);
        //获取a的父节点
        var parentNode = a.parentNode;
        console.log(parentNode);
        //获取a的父节点的父节点
        var parentNode_paretNode = a.parentNode.parentNode;
        console.log(parentNode_paretNode);
    }
</script>
</body>

Java实现所有子节点添加到父节点中通过子节点获取父节点_父节点_02

通过子节点设置父节点属性

例：通过子节点设置父节点的背景颜色

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        /*设置父节点的长宽*/
        #box{
            width: 200px;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id ="box">
        <button id ="btn" class ="btn-class">第一个按钮</button>
        <button class ="btn-class"> 第二个按钮</button>
        <button>第三个按钮</button>
        <span id ="span">
            <a herf="#">点击打开快乐</a>
        </span>
    </div>
<script>
    window.onload = function () {
        //获取a节点
        var a = document.getElementById("span");
        //获取a节点的父节点
        var box =a.parentNode;
        //设置父节点的背景颜色
        box.style.backgroundColor="red";
    };
</script>
</body>

获取兄弟节点

由上面的DOM数据结构图，可以看到根元素html是没有兄弟节点，其他元素都有自己的兄弟节点，因此我们可以使用类似获取父节点的方式，来获取兄弟节点。
使用方法：

获取上一个兄弟节点：节点.previousSibling
获取下一个兄弟节点：节点.nextSibling在火狐谷歌IE9+以后，用nextElementSilbing获取下一个兄弟节点

例子：

<body>
    <div id ="box">
        <button id ="btn" class ="btn-class">第一个按钮</button>
        <button class ="btn-class"> 第二个按钮</button>
        <button>第三个按钮</button>
        <p>今天不快乐</p>
        <span id ="span">
            <a herf="#">点击打开快乐</a>
        </span>
        <p>今天很快乐</p>
    </div>
<script>
    window.onload = function () {
        //获取a节点
        var span = document.getElementById("span");
        //获取a节点的上一个兄弟节点
        var bro1 =span.previousElementSibling || span.previousSibling;
        console.log(bro1);
        //获取a节点的下一个兄弟节点
        var bro2 =span.nextElementSibling || span.nextSibling;
        console.log(bro2);
    };
</script>
</body>

Java实现所有子节点添加到父节点中通过子节点获取父节点_javascript_03

获取子节点

获取单个节点

获取第一个子节点：节点.firstChild || 节点.firstElementChild
获取最后一个子节点：节点.lastChild || 节点.lastElementChild

例：

<body>
    <div id ="box">
        <button id ="btn" class ="btn-class">第一个按钮</button>
        <button class ="btn-class"> 第二个按钮</button>
        <button>第三个按钮</button>
        <p>今天不快乐</p>
        <span id ="span">
            <a herf="#">点击打开快乐</a>
        </span>
        <p>今天很快乐</p>
    </div>
<script>
    window.onload = function () {
        //获取box节点
        var box = window.document.getElementById("box");
        console.log(box);
        //获取box节点的第一个子节点
        var firstChild = box.firstElementChild || box.firstChild;
        console.log(firstChild);
        //获取box节点的最后一个子节点
        var lastChild = box.lastElementChild || box.lastChild;
        console.log(lastChild);
    };
</script>
</body>

Java实现所有子节点添加到父节点中通过子节点获取父节点_父节点_04

获取多个节点

获取所有的子节点：父节点.childNodes返回制定元素的子元素集合，包括HTML节点，所有属性，文本节点

注意：

nodeType ==1 ：表示元素节点
nodeType ==2 ：表示属性节点
nodeType ==3 ：表示文本节点
高版本浏览器使用父节点.children获取所有子节点，只返回HTML节点，不返回文本节点

<body>
    <div id ="box">
        <button id ="btn" class ="btn-class">第一个按钮</button>
        <button class ="btn-class"> 第二个按钮</button>
        <button>第三个按钮</button>
        <p>今天不快乐</p>
        <span id ="span">
            <a herf="#">点击打开快乐</a>
        </span>
        <p>今天很快乐</p>
    </div>
<script>
    window.onload = function () {
        //获取box节点
        var box = window.document.getElementById("box");
        //获取box节点的所有子节点
        var allChild =box.childNodes;
        console.log(allChild);

        //获取子节点中的元素节点：
        var eleChild =[];
        for (var i =0; i<allChild.length;i++){
            var node =allChild[i];
            if (node.nodeType==1){
                eleChild.push(node);
            }
        }
        console.log(eleChild);

        //使用children获取所有子节点
        var NewAllChild =box.children;
        console.log(NewAllChild);
    };

</script>
</body>

Java实现所有子节点添加到父节点中通过子节点获取父节点_数据结构_05