DOM_Element对象以及Node对象

DOM_Element对象

Element：元素对象

　　1、获取/创建：通过document来获取和创建

　　2、方法：

　　　　1、removeAttribute()：删除属性

　　　　2、setAttribute()：设置属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a>点击</a>
    <input type="button" id="btn_set" value="设置属性">
    <input type="button" id="btn_rem" value="删除属性">


    <script>
        var btn_set = document.getElementById("btn_set");
        btn_set.onclick = function () {
            //获取a标签
            var element_a = document.getElementsByTagName("a")[0];
            element_a.setAttribute("href","http://www.baidu.com");
        }

        var btn_rem = document.getElementById("btn_rem");
        btn_rem.onclick = function () {
            //获取a标签
            var element_a = document.getElementsByTagName("a")[0];
            element_a.removeAttribute("href");
        }
    </script>
</body>
</html>

DOM_Node对象

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

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

　　方法：

　　　　CRUD DOM树：

　　　　　　appendChild()：向节点的子节点列表的结尾添加新的子节点。

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

　　　　　　replaceChild()：用新节点替换一个子节点。

　　属性：

　　　　parentNode：返回节点的父节点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</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="de1">删除子节点</a>
    <a href ="javascript:void(0)" id="add">添加子节点</a>
    <!--<input type="button" id="de1" value="删除子节点">-->
<script>
    //获取超链接
    var element_a = document.getElementById("de1");
    //绑定单击事件
    element_a.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");
        //div1添加子节点
        var div3 = document.createElement("div");
        div3.setAttribute("id","div3");
        div1.appendChild(div3);
    }
    /*
        超链接功能：
            1、可以被点击：样式
            2、点击后跳转到href指定的url

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


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