（完全详解）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())); //262、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，唯一性