Fore_End/JavaScript/DOM/07_Node对象.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Node对象</title>
        <style>
            div{
                border: 1px solid red;
            }

            #div1{
                width: 200px;
                height: 200px;
            }

            #div2{
                width: 100px;
                height: 100px;
            }

            #div3{
                width: 100px;
                height: 100px;
            }


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

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

        <script>
            /*
            * Node：节点对象，其他5个的父对象
                * 特点：所有dom对象都可以被认为是一个节点
                * 方法：
                    * CRUD dom树：
                    * appendChild()：向节点的子节点列表的结尾添加新的子节点。
                    * removeChild()	：删除（并返回）当前节点的指定子节点。
                    * replaceChild()：用新节点替换一个子节点。
                * 属性：
                    * parentNode 返回节点的父节点。
            */
            /*
                超链接功能：
                    1、可以被点击：样式
                    2、点击后跳转到href指定的URL

                需求：保留1功能，去掉2功能
                实现：href="javascript:void(0);"
            */

            //1、获取超链接
            var element_a = document.getElementById("del");
            //2、绑定单机事件
            element_a.onclick = function() {
                var div1 = document.getElementById("div1");
                var div2 = document.getElementById("div2");

                div1.removeChild(div2);
            }

            //1、获取超链接
            var element_add = document.getElementById("add");
            //2、绑定单击事件
            element_add.onclick = function() {
                var div1 = document.getElementById("div1");

                //创建div节点
                var div3 = document.createElement("div");

                //给div1添加子节点
                div3.setAttribute("id", "div3");
                div3.innerHTML = "div3";
                div1.appendChild(div3);
            }

            var div2 = document.getElementById("div2");
            var div1 = div2.parentNode;
            alert(div1);

        </script>

    </body>
</html>