（完全详解）JavaScript 添加、复制、移除、移动、创建和查找节点

（完全详解）JavaScript 添加、复制、移除、移动、创建和查找节点

一、创建新节点

1、document.createDocumentFragment() //创建一个 DOM 片段

createdocumentfragment()方法创建了一虚拟的节点对象，节点对象包含所有属性和方法。

当你想提取文档的一部分，改变，增加，或删除某些内容及插入到文档末尾可以使用createDocumentFragment() 方法。

你也可以使用文档的文档对象来执行这些变化，但要防止文件结构被破坏，createDocumentFragment()方法可以更安全改变文档的结构及节点。

语法

document.createDocumentFragment()

DOM中，添加DOM节点时，多次调用document.body.append(),每次都要刷新页面一次。效率也就大打折扣了，而使用document_createDocumentFragment()创建一个文档碎片，把所有的新结点附加在其上，然后把文档碎片的内容一次性添加到document中，这也就只需要一次页面刷新就可。document_createDocumentFragment()可以起到节约使用DOM的作用。每次JavaScript对DOM的操作都会改变页面的变现，并重新刷新整个页面，从而消耗了大量的时间。为解决这个问题，可以创建一个文档碎片，把所有的新节点附加其上，然后把文档碎片的内容一次性添加到document中。

var d1 = new Date();
//创建1000个段落,常规的方式
for(var i = 0 ; i < 1000; i ++) {
    var p = document.createElement("p");
    var oTxt = document.createTextNode("段落" + i);
    p.appendChild(oTxt);
    document.body.appendChild(p);
}
var d2 = new Date();
document.write("第一次创建需要的时间:"+(d2.getTime()-d1.getTime())); //51


//使用了createDocumentFragment()的程序
var d3 = new Date();
var pFragment = document.createDocumentFragment();
for(var i = 0 ; i < 1000; i ++) {
    var p = document.createElement("p");
    var oTxt = document.createTextNode("段落" + i);
    p.appendChild(oTxt);
    pFragment.appendChild(p);
}
document.body.appendChild(pFragment);
var d4 = new Date();
document.write("第2次创建需要的时间:"+(d4.getTime()-d3.getTime())); //26

2、document.createElement() //创建一个具体的元素

定义和用法

createElement() 方法通过指定名称创建一个元素

//创建一个按钮
var btn = document.createElement("button");
//HTML元素经常包含文本。创建指定文本的按钮你需要在按钮元素后添加文本节点:
//创建指定文本的按钮：
var btn2 = document.createElement("button");
var txt = document.createTextNode("click me");
btn2.appendChild(txt);
document.body.appendChild(btn2);

3、createTextNode() //创建一个文本节点

创建一个文本节点:

var btn=document.createTextNode("Hello World");

输出结果：
Hello World

HTML元素通常是由元素节点和文本节点组成。
创建一个标题 (H1), 你必须创建 “H1” 元素和文本节点:

创建一个标题:

var h=document.createElement("h1")
var t=document.createTextNode("Hello World");
h.appendChild(t); 
document.body.apppendChild(h);   //Hello World

二、）添加、移除、替换、插入

1、appendChild() //添加

appendChild(Node)这个方法一般是在指定元素节点的最后一个子节点之后添加节点，但如果Node是页面中的DOM对象，那么就不是添加节点了，就是直接Move节点。

向节点添加最后一个子节点

<div class="wrap">
    <ul id="list">
        <li>Apple</li>
        <li>Banana</li>
        <li>Pear</li>
    </ul>
    <input type="text" id="input1" placeholder="请输入你喜欢的水果"/>
    <input type="button" id="btn1" value="点击添加水果" onclick="addList()"/>
</div>
<script type="text/javascript">
    function addList() {
        var lastLi = document.createElement('li'); //创建一个li节点
        var name = document.getElementById('input1').value; //获取输入框的值
        var textNode = document.createTextNode(name); //创建文本节点
        lastLi.appendChild(textNode); //把值添加进创建的li节点
        document.getElementById('list').appendChild(lastLi);
    }
</script>

从一个元素向另一个元素移动

<div class="ul2">
<p>列表1</p>
<ul id="list1">
    <li>德芙巧克力</li>
    <li>香草味八喜</li>
    <li>可可布朗尼</li>
</ul>
<p>列表2</p>
<ul id="list2">
    <li>榴莲菠萝蜜</li>
    <li>芝士玉米粒</li>
    <li>鸡汁土豆泥</li>
    <li>黑椒牛里脊</li>
</ul>
<input type="button" value="点击试试会发生什么" onclick="shift()"/>
</div>
<script type="text/javascript">
    function shift() {
        var newLi = document.getElementById('list2').lastChild;
        document.getElementById('list1').appendChild(newLi);
    }
</script>

2、removeChild() //移除

从子节点列表中删除某个节点:

var list=document.getElementById("myList");
list.removeChild(list.childNodes[0]);

定义和用法

removeChild() 方法可从子节点列表中删除某个节点。

如删除成功，此方法可返回被删除的节点，如失败，则返回 NULL。

<div class="ul3">
    <ul id="list3">
        <li>德芙巧克力</li>
        <li>香草味八喜</li>
        <li>可可布朗尼</li>
        <li>榴莲菠萝蜜</li>
        <li>芝士玉米粒</li>
        <li>鸡汁土豆泥</li>
        <li>黑椒牛里脊</li>
    </ul>
    <input type="button" value="点我删除列表第一项" id="btn3" onclick="del()"  />
</div>
<script type="text/javascript>
    function del() {
        var list3 = document.getElementById("list3");
        list3.removeChild(list3.childNodes[0]);
    }
</script>

3、replaceChild() //替换

replaceChild() 方法可将某个子节点替换为另一个。
新节点可以是文本中已存在的，或者是你新创建的。

所有主要浏览器都支持 replaceChild 方法

语法

node.replaceChild(newnode,oldnode)

参数
参数 类型 描述

newnode Node 对象 必须。你要插入的节点对象。
oldnode Node object 必须。你要移除的节点对象。

<div class="ul4">
    <ul id="list4">
        <li>德芙巧克力</li>
        <li>香草味八喜</li>
        <li>可可布朗尼</li>
        <li>榴莲菠萝蜜</li>
        <li>芝士玉米粒</li>
        <li>鸡汁土豆泥</li>
        <li>黑椒牛里脊</li>
    </ul>
    <input type="button" value="点我" id="btn4" onclick="replace()"  />
</div>
<script type="text/javascript">
        function replace() {
            var textnode = document.createTextNode("红烧排骨酱醋鱼");
            var creLi = document.createElement("li");
            creLi.appendChild(textnode);
            var item = document.getElementById("list4").childNodes[0];
            item.parentNode.replaceChild(creLi, item); //此处parentNode很重要
            }
</script>

4、insertBefore() //插入

定义和用法

insertBefore() 方法可在已有的子节点前插入一个新的子节点。

提示： 如果你想创建一个新的文本列表项，在 LI 元素后你应该添加元素的文本节点，然后在列表中添加 LI元素。

你也可以使用 insertBefore 方法来 插入/移除 已存在的元素。

移动某个列表项到另一个列表项：

var node=document.getElementById("myList2").lastChild;
var list=document.getElementById("myList1");
list.insertBefore(node,list.childNodes[0]);

插入

<div class="ul5">
    <ul id="list5">
        <li>榴莲菠萝蜜</li>
        <li>芝士玉米粒</li>
        <li>鸡汁土豆泥</li>
        <li>黑椒牛里脊</li>
    </ul>
    <input type="button" value="点我" id="btn5" onclick="insert()"  />
</div>
<script type="text/javascript">
    function insert() {
        var textNode = document.createTextNode("德芙巧克力");
        var newLi = document.createElement("li");
        newLi.appendChild(textNode);
        var list5 = document.getElementById("list5");
        list5.insertBefore(newLi, list5.childNodes[0]);
    }
</script>

替换

<div class="ul6">
    <p>列表1</p>
    <ul id="list6">
        <li>德芙巧克力</li>
        <li>香草味八喜</li>
        <li>可可布朗尼</li>
    </ul>
    <p>列表2</p>
    <ul id="list7">
        <li>榴莲菠萝蜜</li>
        <li>芝士玉米粒</li>
        <li>鸡汁土豆泥</li>
        <li>黑椒牛里脊</li>
    </ul>
    <input type="button" value="点击试试会发生什么" onclick="shift2()"/>
</div>
<script type="text/javascript">
    function shift2() {
        var list6 = document.getElementById("list6");
        var list7 = document.getElementById("list7");
        list6.insertBefore(list7.lastChild, list6.childNodes[0]);
        }
</script>

三）查找

getElementsByTagName() //通过标签名称

getElementsByClassName() //通过元素的class属性名称

getElementById() //通过元素 Id，唯一性