DOM_Document对象_创建DOM对象和DOM_Node对象

DOM_Document对象_创建DOM对象：

1．创建其他DoM对象：

createAttribute(name)

createComment（）

createElement（）

createTextNode（）

代码实现：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>创建document对象</title>
</head>
<body>

<script>
    let table = document.createElement("table");
    alert(table);
</script>

</body>
</html>

DOM_Node对象：

Node：节点对象，其他5个的父对象

特点：所有dom对象都可以被认为是一个节点

方法∶

CRUD dom树：

appendchild（）：向节点的子节点列表的结尾添加新的子节点。

removechild（）：删除(并返回)当前节点的指定子节点。

replacechildo（）：用新节点替换一个子节点。

代码实现：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Node对象</title>
    <style type="text/css">
        div{
            border: 1px solid red;
        }
        #a1_01{
            width: 200px;
            height: 200px;
        }
        #a1_02{
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>

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

    <a href="javascript:void(0);" id="a1_03">删除子节点</a>
    <a href="javascript:void(0);" id="a1_04">添加子节点</a>

    <script>
        //1.获取超链接
        let element_a = document.getElementById("a1_03");
        //2.绑定单击事件
        element_a.onclick = function () {
            let a1_01 = document.getElementById("a1_01");
            let a1_02 = document.getElementById("a1_02");
            a1_01.removeChild(a1_02);
        }

        //1.获取超链接
        let element_add = document.getElementById("a1_04");
        //2.绑定单击事件
        element_add.onclick = function () {
            let a1_01 = document.getElementById("a1_01");
            //给a1_01添加子节点
            //创建div节点
            let a1_03 = document.createElement("div");
            a1_03.setAttribute("id","a1_03");

            a1_01.appendChild(a1_03);
        }
    </script>
</body>
</html>