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

骑猪看日落 2022-05-14 12:25 567阅读 0赞

## （完全详解）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，唯一性