JavaScript DOM：Node对象、添加子节点、删除子节点

最新推荐文章于 2022-04-21 00:21:35 发布

_七七

最新推荐文章于 2022-04-21 00:21:35 发布

阅读量1.5k

点赞数

文章标签： js javascript dom

本文链接：https://blog.csdn.net/qq_43472877/article/details/105581075

版权

Node :节点对象

特点:
所有dom对象都可以被认为是一个节点
方法:
CRUD dom树:

appendChild() :向节点的子节点列表的结尾添加新的子节点。
removeChild() : 删除(并返回)当前节点的指定子节点。
replaceChild() :用新节点替换一个子节点。

属性
parentNode返回节点的父节点。

举例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            border: red 1px solid;
        }
        #div1{
            width: 200px;
            height: 200px;
        }
        #div2{
            width: 100px;
            height: 100px;
        }
        #div3{
            width: 100px;
            height: 100px;
            border: blue solid 1px;
        }

    </style>

</head>
<body>
    <div id="div1">

        <div id="div2">
            div2
        </div>
        div1

    </div>

<!--    <input type="button" value="删除子节点" id="del">-->
    <a href="javascript:void(0);" id="del">删除子节点</a>
    <a href="javascript:void(0);" id="add">添加子节点</a>


<script>

    //子节点的删除
    var element_del = document.getElementById("del");
    element_del.onclick = function () {
        var element_div1 = document.getElementById("div1");
        var element_div2 = document.getElementById("div2");
        element_div1.removeChild(element_div2);
    }

    //子节点的添加
    var element_add = document.getElementById("add");
    element_add.onclick = function () {
        var element_div1 = document.getElementById("div1");
        //给div1添加子节点
        //创建div节点
        var div3 = document.createElement("div");
        div3.setAttribute("id","div3");

        element_div1.appendChild(div3);
    }

    //返回父节点
    var element_div2 = document.getElementById("div2");
    var parentNode = element_div2.parentNode;
    alert(parentNode);
    
</script>
</body>
</html>

在这里插入图片描述

超链接功能:
1.可以被点击:样式
2.点击后跳转到href指定的url
需求:保留1功能，去掉2功能
实现: href=“javascript:void(0);”
在这里插入图片描述

_七七

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript DOM：Node对象、添加子节点、删除子节点

Node :节点对象特点:所有dom对象都可以被认为是一个节点方法:CRUD dom树:appendChild() :向节点的子节点列表的结尾添加新的子节点。removeChild() : 删除(并返回)当前节点的指定子节点。replaceChild() :用新节点替换一个子节点。属性parentNode返回节点的父节点。举例：<!DOCTYPE html...
复制链接

扫一扫