10：JS的DOM增删改

一.  前言

DOM意为文档对象模型(Document Object Model)，我们可以将一个元素分为以下几个节点：

再来看一下document，每个载入浏览器的 HTML 文档都会成为 Document 对象，Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问，也就是说，Document 对象是 Window 对象的一部分，可通过 window.document 属性对其进行访问。

document.getElementsByTagName("p");
//获取当前页面所有的p标签

IdName.getElementsByTagName("p");
//获取IdName下的所有的p标签

二.  增

1. 创建元素节点：document.createElement(“标签名”);

2. 创建文本节点：document.createTextNode(“文本内容”);

3. 将文本节点添加到元素节点：元素节点.appendChild(文本节点);

4. 创建属性节点 ：document.createAttribute(“style”);

5. 设置属性节点的值：属性节点.value = (“属性名：属性值”);

6. 将属性节点添加到元素节点：元素节点.setAttributeNode(属性节点);

7. 将元素节点添加到div：divIdName.appendChild(元素节点);

<script type="text/javascript">
    window.onload = function () {
        var add = document.getElementById("add");
        var edit = document.getElementById("edit");
        var del = document.getElementById("del");
        var box = document.getElementById("box");
        
        add.onclick = function () {
            var h1 = document.createElement("h1");
            var h1text = document.createTextNode("zhangjia");
            h1.appendChild(h1text);
            var h1Style = document.createAttribute("style");
            h1Style.value = ("color:red");
            //上面两步可以直接用a.style.color = "red";代替
            h1.setAttributeNode(h1Style);
            box.appendChild(h1);
        }
    };
</script>

三.  修改

修改元素：元素节点.replaceChild(新元素节点,老元素节点);

该方法的作用是：修改指定元素的某个指定的子节点。

<script type="text/javascript">
    window.onload = function () {
        var add = document.getElementById("add");
        var edit = document.getElementById("edit");
        var del = document.getElementById("del");
        var box = document.getElementById("box");
        edit.onclick = function () {
            var p = document.createElement("p");
            var pText = document.createTextNode("zhang");
            p.appendChild(pText);
            var h1 = box.getElementsByTagName("h1")[0];
            box.replaceChild(p,h1);

        }
    };
</script>

四.  删除

修改元素：元素节点.removeChild(元素节点);

该方法的作用是：删除指定元素的某个指定的子节点。

<script type="text/javascript">
    window.onload = function () {
        var add = document.getElementById("add");
        var edit = document.getElementById("edit");
        var del = document.getElementById("del");
        var box = document.getElementById("box");
  
        del.onclick = function () {
            var h1 = box.getElementsByTagName("h1")[0];
            box.removeChild(h1);
        }
    };
</script>