DOM
DOM（Document Object Model）文檔對(duì)象模型，針對(duì)HTML XML提供的api鬼癣，用以變成的方式操作（增刪改查）html內(nèi)容陶贼。
訪問DOM
通過js調(diào)用document和window元素的api來操作文檔或獲取文檔信息。
Node
Node是一個(gè)接口待秃，通過這個(gè)接口集成方法和屬性：
Document, Element, CharacterData (which Text, Comment, and CDATASection inherit), ProcessingInstruction, DocumentFragment, DocumentType, Notation, Entity, EntityReference拜秧。
node中有一個(gè)nodeType的屬性，是一個(gè)整數(shù)不同的值代表不同節(jié)點(diǎn)類型:
Element
Element提供了對(duì)元素標(biāo)簽名章郁，子節(jié)點(diǎn)和特性的訪問枉氮，我們常用HTML元素比如div，span驱犹，a等標(biāo)簽就是element中的一種嘲恍。Element有下面幾條特性：
（1）nodeType為1
（2）nodeName為元素標(biāo)簽名，tagName也是返回標(biāo)簽名
（3）nodeValue為null
（4）parentNode可能是Document或Element
（5）子節(jié)點(diǎn)可能是Element雄驹，Text，Comment淹辞，Processing_Instruction医舆，CDATASection或EntityReference
Text
Text表示文本節(jié)點(diǎn)，它包含的是純文本內(nèi)容象缀，不能包含html代碼蔬将，但可以包含轉(zhuǎn)義后的html代碼。Text有下面的特性：
（1）nodeType為3
（2）nodeName為#text
（3）nodeValue為文本內(nèi)容
（4）parentNode是一個(gè)Element
（5）沒有子節(jié)點(diǎn)
Comment
Comment表示HTML文檔中的注釋央星，它有下面的幾種特征：
（1）nodeType為8
（2）nodeName為#comment
（3）nodeValue為注釋的內(nèi)容
（4）parentNode可能是Document或Element
（5）沒有子節(jié)點(diǎn)
Document
Document表示文檔霞怀，在瀏覽器中，document對(duì)象是HTMLDocument的一個(gè)實(shí)例莉给，表示整個(gè)頁(yè)面毙石，它同時(shí)也是window對(duì)象的一個(gè)屬性。Document有下面的特性：
（1）nodeType為9
（2）nodeName為#document
（3）nodeValue為null
（4）parentNode為null
（5）子節(jié)點(diǎn)可能是一個(gè)DocumentType或Element
DocumentFragment
DocumentFragment是所有節(jié)點(diǎn)中唯一一個(gè)沒有對(duì)應(yīng)標(biāo)記的類型颓遏，它表示一種輕量級(jí)的文檔徐矩，可能當(dāng)作一個(gè)臨時(shí)的倉(cāng)庫(kù)用來保存可能會(huì)添加到文檔中的節(jié)點(diǎn)。DocumentFragment有下面的特性：
（1）nodeType為11
（2）nodeName為#document-fragment
（3）nodeValue為null
（4）parentNode為null
節(jié)點(diǎn)創(chuàng)建型API
用如其名叁幢，這類API是用來創(chuàng)建節(jié)點(diǎn)的
要注意：創(chuàng)建的元素并不屬于HTML文檔滤灯，它只是創(chuàng)建出來，并未添加到HTML文檔中，要調(diào)用appendChild或insertBefore等方法將其添加到HTML文檔樹中鳞骤。
######## createElement
createElement通過傳入指定的一個(gè)標(biāo)簽名來創(chuàng)建一個(gè)元素窒百，如果傳入的標(biāo)簽名是一個(gè)未知的，則會(huì)創(chuàng)建一個(gè)自定義的標(biāo)簽豫尽，注意：IE8以下瀏覽器不支持自定義標(biāo)簽篙梢。
'let element = document.createElement(tagName)'
elem.id = 'test';
elem.style = 'color: red';
elem.innerHTML = '我是新創(chuàng)建的節(jié)點(diǎn)';
document.body.appendChild(elem);
createTextNode
createTextNode用來創(chuàng)建一個(gè)文本節(jié)點(diǎn)
var node = document.createTextNode("我是文本節(jié)點(diǎn)");
document.body.appendChild(node);
cloneNode
cloneNode返回調(diào)用該方法的節(jié)點(diǎn)的一個(gè)副本
<body>
<div id="parent">
我是父元素的文本
<br/>
<span>
我是子元素
</span>
</div>
<button id="btnCopy">復(fù)制</button>
</body>
<script>
var parent = document.getElementById("parent");
document.getElementById("btnCopy").onclick = function(){
var parent2 = parent.cloneNode(true);
parent2.id = "parent2";
document.body.appendChild(parent2);
}
</script>
createDocumentFragment
DocumentFragments 是DOM節(jié)點(diǎn)。它們不是主DOM樹的一部分拂募。通常的用例是創(chuàng)建文檔片段庭猩，將元素附加到文檔片段，然后將文檔片段附加到DOM樹陈症。在DOM樹中蔼水，文檔片段被其所有的子元素所代替。
因?yàn)槲臋n片段存在于內(nèi)存中录肯，并不在DOM樹中趴腋，所以將子元素插入到文檔片段時(shí)不會(huì)引起頁(yè)面回流(reflow)(對(duì)元素位置和幾何上的計(jì)算)。因此论咏，使用文檔片段document fragments 通常會(huì)起到優(yōu)化性能的作用优炬。
<body>
<ul id="ul"></ul>
</body>
<script>
(function()
{
var start = Date.now();
var str = '', li;
var ul = document.getElementById('ul');
var fragment = document.createDocumentFragment();
for(var i=0; i<1000; i++)
{
li = document.createElement('li');
li.textContent = '第'+(i+1)+'個(gè)子節(jié)點(diǎn)';
fragment.appendChild(li);
}
ul.appendChild(fragment);
})();
</script>
頁(yè)面修改api
appendChild這個(gè)方法很簡(jiǎn)單，但是還有有一點(diǎn)需要注意：如果被添加的節(jié)點(diǎn)是一個(gè)頁(yè)面中存在的節(jié)點(diǎn)厅贪，則執(zhí)行后這個(gè)節(jié)點(diǎn)將會(huì)添加到指定位置蠢护，其原本所在的位置將移除該節(jié)點(diǎn)，也就是說不會(huì)同時(shí)存在兩個(gè)該節(jié)點(diǎn)在頁(yè)面上养涮，相當(dāng)于把這個(gè)節(jié)點(diǎn)移動(dòng)到另一個(gè)地方葵硕。
如果child綁定了事件，被移動(dòng)時(shí)贯吓，它依然綁定著該事件懈凹。
<body>
<div id="child">
要被添加的節(jié)點(diǎn)
</div>
<br/>
<br/>
<br/>
<div id="parent">
要移動(dòng)的位置
</div>
<input id="btnMove" type="button" value="移動(dòng)節(jié)點(diǎn)" />
</body>
<script>
document.getElementById("btnMove").onclick = function(){
var child = document.getElementById("child");
document.getElementById("parent").appendChild(child);
}
</script>
nsertBefore
用來添加一個(gè)節(jié)點(diǎn)到一個(gè)參照節(jié)點(diǎn)之前
parentNode表示新節(jié)點(diǎn)被添加后的父節(jié)點(diǎn) newNode表示要添加的節(jié)點(diǎn) refNode表示參照節(jié)點(diǎn)，新節(jié)點(diǎn)會(huì)添加到這個(gè)節(jié)點(diǎn)之前
<body>
<div id="parent">
父節(jié)點(diǎn)
<div id="child">
子元素
</div>
</div>
<input type="button" id="insertNode" value="插入節(jié)點(diǎn)" />
</body>
<script>
var parent = document.getElementById("parent");
var child = document.getElementById("child");
document.getElementById("insertNode").onclick = function(){
var newNode = document.createElement("div");
newNode.textContent = "新節(jié)點(diǎn)"
parent.insertBefore(newNode,child);
}
</script>
注意：
（1）refNode是必傳的悄谐，如果不傳該參數(shù)會(huì)報(bào)錯(cuò)
（2）如果refNode是undefined或null介评，則insertBefore會(huì)將節(jié)點(diǎn)添加到子元素的末尾
removeChild
刪除指定的子節(jié)點(diǎn)并返回
deletedChild指向被刪除節(jié)點(diǎn)的引用，它等于node爬舰，被刪除的節(jié)點(diǎn)仍然存在于內(nèi)存中们陆，可以對(duì)其進(jìn)行下一步操作。
注意：如果被刪除的節(jié)點(diǎn)不是其子節(jié)點(diǎn)洼专，則程序?qū)?huì)報(bào)錯(cuò)棒掠。
tiankeng
replaceChild
用于使用一個(gè)節(jié)點(diǎn)替換另一個(gè)節(jié)點(diǎn)
newChild是替換的節(jié)點(diǎn)，可以是新的節(jié)點(diǎn)屁商，也可以是頁(yè)面上的節(jié)點(diǎn)烟很，如果是頁(yè)面上的節(jié)點(diǎn)颈墅，則其將被轉(zhuǎn)移到新的位置 oldChild是被替換的節(jié)點(diǎn)
<body>
<div id="parent">
父節(jié)點(diǎn)
<div id="child">
子元素
</div>
</div>
<input type="button" id="insertNode" value="替換節(jié)點(diǎn)" />
</body>
<script>
var parent = document.getElementById("parent");
var child = document.getElementById("child");
document.getElementById("insertNode").onclick = function(){
var newNode = document.createElement("div");
newNode.textContent = "新節(jié)點(diǎn)"
parent.replaceChild(newNode,child)
}
