DOM_Element对象和DOM_Node对象

2022-08-03 17:31:51 阅读：179 来源： 互联网

标签：Node div2 DOM Element btn var document 节点 div1

DOM_Element对象

removeAttribute()：删除指定的属性

setAttribute()：添加新属性

    <!--Element对象-->
    <a>点我试一下</a>
    <input type="button" value="给a标签设置属性" id="btn_set">
    <input type="button" value="给a标签删除属性" id="btn_remove">
    <script>
        //获取btn
        var btn_set = document.getElementById("btn_set");
        btn_set.onclick = function () {
            //1.获取a标签
            var element_a = document.getElementsByTagName("a")[0];
            //setAttribute()：添加新属性
            element_a.setAttribute("href","https://www.baidu.com")
        }

        //获取btn
        var btn_remove = document.getElementById("btn_remove");
        btn_remove.onclick = function () {
            //1.获取a标签
            var element_a = document.getElementsByTagName("a")[0];
            //removeAttribute()：删除指定的属性
            element_a.removeAttribute("href");
        }

DOM_Node对象

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

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

　　方法：

　　　　CRUD dom树：

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

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

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

　　属性：

　　　　parentNode：返回节点的父节点

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Node_7对象</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>
    <!--
        超连接功能
            1.可以被点击：样式
            2.点击后跳转到href指定的url

        需求：保留1功能，去掉2功能
        实现：href=“javascript:void(0);”
    -->
    <a href="javascript:void(0);" id="del">删除子节点</a>
    <a href="javascript:void(0);" id="add">添加子节点</a>
    <!--<input type="button" id="del" value="删除子节点">-->
<script>
    //获取超链接
    var element_a = document.getElementById("del");
    //绑定单击事件
    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);
    }

    //获取div2的父节点
    var div2 = document.getElementById("div2");
    var div1 = div2.parentNode;
    alert(div1);


</script>
</body>
</html>

属性：

搜索

复制

标签：Node,div2,DOM,Element,btn,var,document,节点,div1
来源： https://www.cnblogs.com/pengtianyang/p/16547954.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

DOM_Element对象和DOM_Node对象

DOM_Element对象

DOM_Node对象