DOM节点操作

1.CRUD(增，删，改，查)：

增，即创建节点：createElement(tagName),

tagName是需要创建的标签名

    <body>
        <div id="box">
                <p id="text">it's a nice day!</p>
               <button id="btn">我是一个按钮</button>
                <p>我会不会被删掉？</p>
         </div>
        <script type="text/html">
            var box=document.getElementById("box");
            //增，即创建节点(添加一个img标签)
            var img=document.createElement("img");
            //给img标签添加属性
            img.src="./images/pic1.jpg";
            img.width=200;
            img.height=200;
            /*在box最后添加img图片；
            box.appendChild(img);
            */
           /*
           //可以在box任意位置添加img标签
           //在button前添加img标签；
           var btn=document.getElementById("btn");
           box.insertBefore(img,btn);
           */
          //在p标签前添加img标签；
          var text=document.getElementById("text");
          box.insertBefore(img,text);
        </script>
　　　</body>

样式：

<style>
           #box{
               width: 400px;
               height: 400px;
               background-color: pink;
           }
</style>

删，即删除节点；有两种方法

<script>
            //删，即删除节点
            var text=document.getElementById("text");
            //方法一，先获取父节点，然后调用removeChild(需要删除的标签名)；
            var fatherNode=text.parentNode;
            fatherNode.removeChild(text);

            //方法二，直接调用remove()方法
            var btn=document.getElementById("btn");
            btn.remove();
            console.log(fatherNode.children);
</script>

复制节点，oldeNode.cloneNode(true);

想要复制的节点调用函数cloneNode(参数),得到一个新节点，参数是布尔类型，true表示深复制，false表示浅复制

代码块：

<script>
            //复制节点, 新节点＝要复制的节点.cloneNode(boolean类型的参数)；
            var box=document.getElementById("box");
　　　　　　var newBox=box.cloneNode(false);   //浅复制，只复制一层；
　　　　　　console.log(newBox);
            var newBox2=box.cloneNode(true);    //深复制，复制全部；
            console.log(newBox2);
</script>

运行结果：

插入节点：

1).父节点.appendChild(新节点)，在父节点最后插入一个节点；

2).父节点.insertBefore(新节点，参考节点)；在参考节点前插入，如果参考节点为Null，则在节点最后插入一个节点

猜你喜欢