DOM初体验（节点元素操作）

Posted 2020-09-09

 

1.1、     创建元素

Document.write

使用这个方法可以向页面上动态地添加元素

 

缺点：

在页面加载完成之后再使用这个方法，会覆盖原来的内容

 1 <input type="button" value="点击向body里面添加元素" id="btn"/>
 2 <script>
 3 //        document.write()
 4         var div = "<div>内容</div>";
 5     document.getElementById("btn").onclick =function (){
 6         //通过一个标签格式的字符串，向body里面输出，被解析成为标签
 7         //注意点：
 8 //如果使用这个方式，发现，在后面添加的元素，会直接成为body的子元素，并且把原来body里面的内容覆盖了
 9         document.write(div);
10     }
11 </script>

 

InnerHTML

使用这个方法可以向任意元素中动态地添加子元素

 

缺点：

一般来说都要频繁的拼接字符串，而且会覆盖掉元素中原来的内容

<input type="button" value="点击使用innerhtml向元素中添加内容" id="btn2"/>
<script>
//element.innerHTML=标签格式的字符串
var btn2 = document.getElementById("btn2");
//往id为content的div里添加元素
//也会覆盖掉原本在标签里面的内容
btn2.onclick = function () {
    var html = "<div><a href=‘#‘>文字</a></div>";
    document.getElementById("content").innerHTML = html;
}
//如果使用innerHTML来完成一个大的结构，可能需要频繁的拼接字符串
</script>

 

Document.createElement

使用这个方法可以创建任意元素

<input type="button" value="点击创建p标签" id="btn2">

<script>

//语法：document.createElement(标签名称)
$id("btn2").onclick = function () {
    var p = document.createElement("p");
    setInnerText(p, "哈哈")
    $id("box").appendChild(p);
}

</script>

 

 

特点：

使用这个方法创建的元素，只是在内存中创建，不会自动添加到页面，也没有任何的内容，只有一个节点对象。如果要把创建的元素显示在页面上，需要追加元素或者插入元素

 

1.2、     追加元素

Parent.appendChild（node）

使用这个方法可以向某个父元素的末尾追加一个新的子元素

<ul id="ul1">
    <li>我是第一个ul的第1li</li>
    <li>我是第一个ul的第2li</li>
    <li>我是第一个ul的第3li</li>
    <li>我是第一个ul的第4li</li>
    <li>我是第一个ul的第5li</li>
    <li>我是第一个ul的第6li</li>
</ul>
<ul id="ul2">
    <li>我是第二个ul的第1li</li>
    <li>我是第二个ul的第2li</li>
    <li>我是第二个ul的第3li</li>
    <li>我是第二个ul的第4li</li>
    <li>我是第二个ul的第5li</li>
    <li>我是第二个ul的第6li</li>
</ul>
<script>
    var ul1 = document.getElementById("ul1");
    var ul2 = document.getElementById("ul2");
    var ul3 = ul1.children[2];
    //如果是a元素的子元素被追加到b元素中，a元素中的子元素会消失，跑到b元素的最后去
    ul2.appendChild(ul3);
    //凡是引用传参，修改的都是堆空间中的对象
</script>

 

1.3、     克隆元素

Node.cloneNode(deep)

使用这个方法可以克隆某个元素到内存中，只能得到一个节点对象，不会自动添加到页面中

 

这个方法接受一个boolean类型的参数，决定是否对这个元素进行深度克隆

True  深度克隆  克隆当前元素和所有的子元素

False  浅度克隆  只克隆当前元素（默认）

 

注意：这个方法会克隆元素的属性，如果这个元素中有id属性，id属性会重复，所以克隆元素的id属性需要重新赋值

 

1.4、     插入元素

Parent.insertBefore(newNode,oldNode)

这个访求可以向某个父元素指定的位置插入一个新的子元素

 

这个方法接收两个参数，要插入的新元素和指定位置的元素

注意：使用这个方法的时候，指定位置的元素一定要是调用这个方法的元素的子元素

<ul id="ul1">
    <li>我是第一个ul的第1li</li>
    <li>我是第一个ul的第2li</li>
    <li>我是第一个ul的第3li</li>
    <li>我是第一个ul的第4li</li>
    <li>我是第一个ul的第5li</li>
    <li>我是第一个ul的第6li</li>
</ul>
<ul id="ul2">
    <li>我是第二个ul的第1li</li>
    <li>我是第二个ul的第2li</li>
    <li>我是第二个ul的第3li</li>
    <li>我是第二个ul的第4li</li>
    <li>我是第二个ul的第5li</li>
    <li>我是第二个ul的第6li</li>
</ul>
<input type="button" value="点击" id="btn">
<script>
//插入元素
    //语法：parentNode.insertBefore(newNode,oldNode)
    var ul1=document.getElementById("ul1");
    var li=document.createElement("li");
    li.innerHTML="我是新建的li元素";
    var oldChild=ul.children[3];
    //第一种用法：将一个新建的或者复制的元素，插入到原来的元素之前
    ul1.insertBefore(li,oldChild);

    document.getElementById("btn").onclick=function () {
        //第二种用法：将已经存在结构中的元素，插入到另一个元素之前
        var ulli5=ul1.children[4];
        var ulli6=ul1.children[5];
        ul1.insertBefore(ulli6,ulli5);
    }
    //第三种用法：在不同的父元素之间，也是可以将子元素插入另一个父元素的
    var ul2=document.getElementById("ul2");
    var ulli6=ul1.children[5];
    ul2.insertBefore(ulli6,ul2.children[0]);
</script>

 

1.5、     删除元素

Parent.removeChild(node)

这个方法可以删除某个指定的子元素

<input type="button" value="点击删除元素" id="btn">
<ul>
    <li>我是第1个li</li>
    <li>我是第2个li</li>
    <li>我是第3个li</li>
    <li>我是第4个li</li>
    <li>我是第5个li</li>
    <li>我是第6个li</li>
</ul>
<script>
    //删除元素语法：
    //parentNode.removeChild(childNode);
    var ul=document.body.children[1];
    document.getElementById("btn").onclick=function () {
        var li1=ul.children[0];
        ul.removeChild(li1);
    }
    //注意：此语法不能自杀，只能通过父元素把它干掉
</script>

 

1.6、     替换元素

Parent.replaceChild(newNode,oldNode)

这个方法可以将某个父元素的任意一个子元素替换为另外一个元素

 

这个方法接受两个参数，分别是新的元素和被替换的元素

<ul id="ul1">
    <li>我是第一个ul的第1li</li>
    <li>我是第一个ul的第2li</li>
    <li>我是第一个ul的第3li</li>
    <li>我是第一个ul的第4li</li>
    <li>我是第一个ul的第5li</li>
    <li>我是第一个ul的第6li</li>
</ul>
<ul id="ul2">
    <li>我是第二个ul的第1li</li>
    <li>我是第二个ul的第2li</li>
    <li>我是第二个ul的第3li</li>
    <li>我是第二个ul的第4li</li>
    <li>我是第二个ul的第5li</li>
    <li>我是第二个ul的第6li</li>
</ul>
<input type="button" value="点击替换" id="btn">
<input type="button" value="点击替换2" id="btn2">
<script>
    //替换元素
    //语法：parentNode.replaceChild(newNode,oldNode)
    //用newchild将oldchild替换掉，作为parentNode的第一个子元素
    //一般用法：都是用一个新建或者复制的节点，替换一个原来的节点
    var li=document.createElement("li");
    li.innerHTML="测试替换元素";
    var ul1=document.getElementById("ul1");
    var ulli1=ul1.children[0];
    document.getElementById("btn").onclick=function () {
        ul1.replaceChild(li,ulli1);
    }
    //尝试将已有的元素替换已有的元素
    document.getElementById("btn2").onclick=function () {
        var u2l2=document.getElementById("ul2").children[0];
        ul1.replaceChild(u2l2,ulli1);
    }
</script>