Node对象

最新推荐文章于 2023-11-21 16:12:46 发布

诗里有清风

最新推荐文章于 2023-11-21 16:12:46 发布

阅读量616

点赞数

分类专栏：笔记文章标签： javascript

本文链接：https://blog.csdn.net/qq_42609916/article/details/105696025

版权

笔记专栏收录该内容

39 篇文章 0 订阅

订阅专栏

Node对象（核心DOM模型之一）

Node：节点对象，其他5个的父对象
特点：所有dom对象都可以被认为是一个节点
方法：
CRUD dom树：

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

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node对象</title>
</head>
<style>
    div{
        border: red solid 1px;
    }
    #div1{
        width: 200px;
        height: 200px;
    }
    #div2{
        width: 100px;
        height: 100px;
    }
    #div3{
        width: 100px;
        height: 100px;
        border: red solid 1px;
    }
</style>
<body>
        <div id="div1">
            div1
            <div id="div2">div2</div>
        </div>
        <!--<a href="" id="del">删除子节点</a>   超链接点击后刷新了，又跳转到此页面，所以没有删除子节点div2-->
        <!--<input type="button" id="del" value="删除子节点">-->
        <a href="javascript:void(0)" id="del">删除子节点</a><!--保留href的点击功能，删除跳转功能-->
        <input type="button" id="add" value="添加子节点">
</body>
<script>
    //1、获取超链接
    var element_del = document.getElementById("del");
    //2、绑定单击事件
    element_del.onclick=function () {
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        div1.removeChild(div2);
    }
    var element_add = document.getElementById("add");
    element_add.onclick=function () {
        var div1 = document.getElementById("div1");
        //创建子节点
        var div3 = document.createElement("div");
        div3.setAttribute("id","div3")
        div1.appendChild(div3);
    }
</script>
</html>