JavaScript节点操作

来源：互联网发布：怎么查域名是否备案编辑：程序博客网时间：2024/05/29 03:39

javascript节点操作可分为5部分：
1.创建节点,createElement();createAttribute();ceateTextNode();
2.插入节点,appendChild();insertBefore();
3.替换节点,replaceChild();
4.删除节点,removeChild();
5.复制节点,cloneNode();
一、创建节点
createElement():

var div=document.createElement("div");//创建一个div            var sty=document.createElement("style");//创建style

createAttribute():

var attri=document.createAttribute("color");            attri="red";            console.log(attri);//red

createTextNode():

var div=document.createElement("div");            var t=document.createTextNode("helloworld");//创建文本节点            div.appendChild(t);            console.log(div.innerHTML);//helloworld

二、插入节点
appenChild():
从父节点的末尾添加新的节点。

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>    </head>    <body>        <div id="div">            <span>第一个子节点</span>        </div>    </body>    <script>        function addNode(){            var div=document.getElementById("div");            var span=document.createElement("span");            span.innerHTML="我是第二个节点"            div.appendChild(span);            console.log(div);        }        addNode();    </script></html>

运行结果:
这里写图片描述
insertBefore():
在指定的字节之前添加新节点

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>    </head>    <body>        <div id="div">            <span id="span1">第一个子节点</span>        </div>    </body>    <script>        function addNode(){            var div=document.getElementById("div");            var span1=document.getElementById("span1");            var span2=document.createElement("span");            span2.innerHTML="我是第二个节点"            div.insertBefore(span2,span1);            console.log(div.innerHTML);        }        addNode();    </script></html>

运行结果：
这里写图片描述
三、替换节点
replaceChild();

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>    </head>    <body>        <div id="div">            <span id="span1">第一个子节点</span>        </div>    </body>    <script>        function addNode(){            var div=document.getElementById("div");            var span1=document.getElementById("span1");            var span2=document.createElement("span");            span2.innerHTML="我是第二个节点"            div.replaceChild(span2,span1);            console.log(div);        }        addNode();    </script></html>

运行结果：
这里写图片描述
四、删除节点
removeChild();
删除指定的子节点。

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>    </head>    <body>        <div id="div">            <span id="span1">第一个子节点</span>            <span>第二个子节点</span>        </div>    </body>    <script>        function addNode(){            var div=document.getElementById("div");            var span1=document.getElementById("span1");            div.removeChild(span1);            console.log(div);        }        addNode();    </script></html>

运行结果：
这里写图片描述
五、复制几点
cloneNode();
cloneNode(boolean),这个方法填布尔值参数，不填默认为false;
true时复制该节点的子节点，false则不复制子节点。
当参数为false时：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>    </head>    <body>        <div id="div">            <span id="span1">第一个子节点</span>            <span>第二个子节点</span>        </div>    </body>    <script>        function addNode(){            var div=document.getElementById("div");            var div2=div.cloneNode(false);            div.appendChild(div2);            console.log(div.innerHTML);        }        addNode();    </script></html>

运行结果：
这里写图片描述
当参数为true时：

<!DOCTYPE html><html>    <head>        <meta charset="utf-8" />        <title></title>    </head>    <body>        <div id="div">            <span id="span1">第一个子节点</span>            <span>第二个子节点</span>        </div>    </body>    <script>        function addNode(){            var div=document.getElementById("div");            var div2=div.cloneNode(true);            div.appendChild(div2);            console.log(div);        }        addNode();    </script></html>

运行结果：
这里写图片描述

0 0