DOM_Element对象

Element：元素对象

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

　　方法：

　　　　removeAttribute()：删除属性

　　　　setAttribute()：添加新属性

<body>
    <a>点我试一试</a>
    <input id="btn_set" type="button" value="设置属性">
    <input id="btn_remove" type="button" value="删除属性">
<script>
        //设置a标签超链接跳转
        let btn_set = document.getElementById("btn_set");
        btn_set.onclick = function (){
            //1.获取a标签
            let element_a = document.getElementsByTagName("a")[0];
            //设置属性
            element_a.setAttribute("href","https://www.baidu.com");
        }

        //设置a标签删除超链接
        let btn_remove = document.getElementById("btn_remove");
        btn_remove.onclick = function (){
            //1.获取a标签
            let element_e = document.getElementsByTagName("a")[0];
            //设置属性
            element_e.removeAttribute("href");
        }
</script>
</body>

 

 

 

DOM_Node对象

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

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

　　方法：

　　　　CRUD dom树：

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

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

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

　　属性：

　　　　parenNode：返回节点的父节点

<head>
    <meta charset="UTF-8">
    <title>Node对象</title>
    <style>
        div{/*全局div*/

            border: 1px solid red;
        }
        #div1{/*id:div1*/
            width: 200px;
            height: 200px;
        }
        #div2{
            width: 100px;
            height: 100px;
        }
        #div3{
            border: 1px solid red;
            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>
<script>
    //获取超链接
    var element_a = document.getElementById("del");
    //绑定单击事件
    element_a.onclick = function (){
        //获取指定id属性
        var div1 = document.getElementById("div1");
        var div2 = document.getElementById("div2");
        div1.removeChild(div2);// 用新节点替换一个子节点
    }
    /*
        超链接功能：
            1.可以被点击：样式
            2.点击后跳转到href指定的url

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

    let element_d = document.getElementById("add");
    element_d.onclick = function (){
        //给div添加子节点
         //创建div节点
        var div3 = document.createElement("div");
        div3.setAttribute("id","div3");//设置属性
        div1.appendChild(div3);//添加节点
    }
    //返回节点的父节点
    let div2 = document.getElementById("div2");
    let div1 = div2.parentNode;
    alert(div1);

</script>
</body>

 

原文地址：http://www.cnblogs.com/qihaokuan/p/16906272.html

1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！ 2. 分享目的仅供大家学习和交流，请务用于商业用途! 3. 如果你也有好源码或者教程，可以到用户中心发布，分享有积分奖励和额外收入！ 4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！ 5. 如有链接无法下载、失效或广告，请联系管理员处理！ 6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！ 7. 如遇到加密压缩包，默认解压密码为"gltf",如遇到无法解压的请联系管理员！ 8. 因为资源和程序源码均为可复制品，所以不支持任何理由的退款兑现，请斟酌后支付下载 声明：如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性