DOM_Elemen对象 and DOM_Node对象639

Element：元素对象

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

　　　　2. 方法：

　　　　　　1. removeAttribute()：删除属性

　　　　　　2. setAttribute()：设置属性

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

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

　　　　方法：

　　　　　　CRUD dom树：

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

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

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

　　属性：

　　　　　　parentNode 返回节点的父节点。　　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--超链接不跳转标签-->
    <a>点一下</a>
    <!--生成按钮-->
    <input type="button" id="btn" value="设置属性">

    <input type="button" id="rom" value="设置属性">


    <script>
        //获取btn对象
        var btn_set = document.getElementById("btn");
        //绑定时间
        btn_set.onclick = function () {
            //获取a标签值
            var elem = document.getElementsByName("a")[0];
            elem.setAttribute("href","https://www.baidu.com");
        }

        //获取btn对象
        var rom_a = document.getElementById("rom");
        //绑定时间
        rom_a.onclick = function () {
            //获取a标签值
            var elem = document.getElementsByName("a")[0];
            elem.removeAttribute("rom");
        }
    </script>
</body>
</html>

　　Node：节点对象，其他5个的父对象
　　　　特点：所有dom对象都可以被认为是一个节点
　　　　　　方法：
　　　　　　　 CRUD dom树：
　　　　　　appendChild()：向节点的子节点列表的结尾添加新的子节点。
　　　　　　removeChild() ：删除（并返回）当前节点的指定子节点。
　　　　　　replaceChild()：用新节点替换一个子节点。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Node对象</title>
      <style>

          div{
              /*颜色 实现为1px*/
              border: 1px solid red;

          }
          #div1{
              /*设置高宽*/
              width: 200px;
              height: 200px;
          }

          #div2{
              /*设置高宽*/
              width: 100px;
              height: 100px;
          }


          #div3{
              /*设置高宽*/
          width: 100px;
          height: 100px;
          }

        </style>

</head>
<body>
            <!--id位置及上面调用-->
            <div id="div1">
                <!--id位置及上面调用-->
                  <div id="div2">div2</div>
                  div1
            </div>
                    <!-- a超链接标签 -->
                <a href="javascript:void(0);" id="del">删除子节点</a>
                    <!-- a超链接标签 -->
                <a href="javascript:void(0);" id="add">添加子节点</a>


            <!--<input type="button" id="del" value="删除子节点">-->
            <script>
                  //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");
                    //给div1添加子节点
                    //创建div节点
                    var div3 = document.createElement("div");
                    //页面展示
                    div3.setAttribute("id","div3");
                    //页面展示
                    div1.appendChild(div3);
                  }


                  /*
                      超链接功能：
                          1.可以被点击：样式
                          2.点击后跳转到href指定的url

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

                  var div2 = document.getElementById("div2");
                  var div1 = div2.parentNode;
                  alert(div1);
            </script>
</body>
</html>