一、Dom的概念和節(jié)點層次
Dom：Document Object Model 文檔對象模型坪圾，可以將任何 html 文檔描繪成一個由多層次節(jié)點構成的結(jié)構致稀。換而言之，就是Dom會把文檔看成一棵樹稼稿，同時定義很多方法來操作這棵樹中的每一個元素（節(jié)點）。
文檔：html 頁面
文檔對象：頁面中的元素
文檔對象模型：為了能夠讓程序（js）去操作頁面中的元素
文檔節(jié)點：文檔節(jié)點是每個文檔的根節(jié)點讳窟，文檔節(jié)點只有一個子節(jié)點让歼，即<html>元素，我們稱為文檔元素丽啡，文檔元素是文檔的最外層元素谋右，文檔中其他所有元素都包含在文檔元素中，每個文檔都只能有一個文檔元素补箍，在 html 頁面中改执，文檔元素始終是<html>元素。
二馏予、Node類型
js中所有節(jié)點的類型都繼承自 Node 類型天梧。
共有12種類型，用12個數(shù)值來表示霞丧。
1.nodeType ：返回節(jié)點的節(jié)點類型
我們只需要注意前三種即可呢岗，其他了解就好
元素節(jié)點 : 1
屬性節(jié)點 : 2
文本節(jié)點 : 3
if(someNode.nodeType ==1){
alert(“Node is an element!”）
}
2.nodeName 和 nodeValue
nodeName ：元素的標簽名
nodeValue：始終為null
if(someNode.nodeType ==1){
value = someNode.nodeName //元素的標簽名
}
在這個例子中，首先檢查節(jié)點類型蛹尝，看它是不是一個元素后豫，如果是，則取得nodeName的值突那。
三挫酿、節(jié)點關系
1.childNodes 子節(jié)點列表集合，（只讀屬性）
每個節(jié)點都有一個 childNodes 屬性愕难，其中保存著一個NodeList對象（類數(shù)組對象）早龟，用來保存一組有序的節(jié)點，可以通過位置來訪問這些節(jié)點猫缭。
注意：
1.是對象下的一種屬性
2.使用時不加括號
3.只包含一級子節(jié)點葱弟，不包含后輩孫級以下的節(jié)點
4.標準下：包含了文本和元素類型的節(jié)點，也會包含非法嵌套的子節(jié)點
5.非標準下：只包含元素類型的節(jié)點猜丹，ie7以下不會包含非法嵌套子節(jié)點
var firstChild = someNode.childNodes[0];
var secondChild = someNode.childNodes[1];
//var secondChild = someNode.childNodes.item(1);
vat count = someNode.childNodes.length;
<script>
window.onload = function() {
var oUl = document.getElementById('ul1');
alert( oUl.childNodes.length );
//標準下為11芝加，ie7以下為4(因為包括了文本節(jié)點和非法節(jié)點，ie7以下不識別)
}
</script>
<ul id="ul1" style="border: 1px solid red;">
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
<p>pppppppp</p>
</ul>
2.parentNode : 當前節(jié)點的父級節(jié)點（只讀屬性）
<script>
window.onload = function() {
var aA = document.getElementsByTagName('a');
for (var i=0; i<aA.length; i++) {
aA[i].onclick = function() {
this.parentNode.style.display = 'none';
//當點擊標簽a時射窒，li隱藏
}
}
}
</script>
<body>
<ul id="ul1">
<li>11111 <a href="javascript:;">隱藏</a></li>
<li>22222 <a href="javascript:;">隱藏</a></li>
<li>33333 <a href="javascript:;">隱藏</a></li>
<li>44444 <a href="javascript:;">隱藏</a></li>
</ul>
</body>
3.previousSibling 和 nextSibling
注意：
1.可以訪問同一列表的其他節(jié)點
2.列表中的第一個節(jié)點 previousSibling 屬性值為null
3.列表中最后一個節(jié)點 nextSibling 屬性值為null
4.如果列表中只有一個節(jié)點藏杖，那么該節(jié)點的 previousSibling 和 nextSibling 都為null
4.firstChild : 第一個子節(jié)點 （只讀屬性）
lastChild：最后一個節(jié)點 （只讀屬性）
注意：
1.標準下：firstChild 和lastChild會包含文本類型的節(jié)點
2.非標準下：只包含元素節(jié)點
3.在只有一個節(jié)點的情況下将塑，firstChild 和lastChild 指向同一個節(jié)點
4.如果沒有子節(jié)點，firstChild 和lastChild 均為null
var oUl = document.getElementById('ul1');
alert( oUl.firstChild ); //[object Text] 文本節(jié)點
<ul id="ul1">
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
</ul>
<script>
window.onload = function() {
var oUl = document.getElementById('ul1');
var oFirst = oUl.firstChild;
oFirst.style.background = 'red';
var oLast = oUl.lastChild;
oLast.style.background = 'yellow';
var oNext = oFirst.nextSibling;
oNext.style.background = 'blue';
var oPrev = oLast.previousSibling;
oPrev.style.background = 'orange';
//結(jié)果打開頁面沒有變化蝌麸，因為他們的操作都會基于文本節(jié)點点寥，文本節(jié)點沒有style屬性，所以不會有變化
}
</script>
<body>
<ul id="ul1">
<li>11111</li>
<li>22222</li>
<li>33333</li>
<li>44444</li>
</ul>
</body>
解析：打開頁面沒有變化祥楣，因為他們的操作都會基于文本節(jié)點开财，文本節(jié)點沒有style屬性，所以不會有變化
5.hasChildNodes()
在節(jié)點包含一個或多個子節(jié)點的情況下返回true误褪，比查詢childNodes列表的length更簡便
6.ownerDocument 指向表示整個文檔的文檔節(jié)點
表示任何節(jié)點都屬于它所在的文檔，任何節(jié)點都不能同時存在于兩個或者更多個文檔中碾褂，這個屬性兽间，可以直接訪問文檔節(jié)點
四、基本節(jié)點操作方法
1.appendChild(要添加的元素) [方法] 追加子元素
用于在ChildNodes列表的末尾添加一個節(jié)點正塌，添加節(jié)點后嘀略，ChildNodes 的新增節(jié)點，父節(jié)點以及以前的最后一個節(jié)點的關系指針都會相應的得到更新乓诽。
var oUl = document.getElementById('ul1');
var oLi = document.createElement('li');
<body>
<input type="text" id="text1" /><input type="button" value="留言" id="btn" />
<ul id="ul1"></ul>
</body>
結(jié)果如下圖：
2.insertBefore(新的元素帜羊，被插入的元素) [方法]
將節(jié)點放在某個特定的位置
<script>
window.onload = function() {
var oUl = document.getElementById('ul1');
var oLi = document.createElement('li');
oUl.insertBefore( oLi, oUl.children[0] );
}
</script>
<body>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
結(jié)果如圖所示
3.replaceChild(要插入的節(jié)點，被替換節(jié)點) 替換子節(jié)點 [方法]
要替換的節(jié)點將這個方法返回并從文檔樹中刪除鸠天，同時由要插入的節(jié)點占據(jù)其位置
<script>
window.onload = function() {
var oDiv = document.getElementById('div1');
var oBtn = document.getElementById('btn');
var oP = document.getElementById('p1');
oBtn.onclick = function() {
document.body.replaceChild( oDiv, oP );
//當點擊按鈕后讼育，p標簽被div標簽替換
}
}
</script>
<body>
<div id="div1">div1</div>
<input type="button" value="按鈕" id="btn" />
<hr />
<p id="p1">ppppp</p>
</body>
removeChild(要刪除的元素); 刪除元素 [方法]
被移除的節(jié)點稱為該方法的返回值
<script>
window.onload = function() {
var oUl = document.getElementById('ul1');
var oLi = document.getElementsByTagName('li')[0];
var child = oUl.removeChild( oLi);
}
</script>
<body>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
結(jié)果如圖：
五、其他操作方法
1.cloneNode（）用于創(chuàng)建調(diào)用這個方法的節(jié)點的一個完全相同的副本 [方法]
該方法接收一個布爾值參數(shù)稠集，表示是否執(zhí)行深復制
參數(shù)為true奶段，執(zhí)行深復制，即復制節(jié)點及整個子節(jié)點樹
參數(shù)為false剥纷，執(zhí)行淺復制痹籍，即只復制該節(jié)點本身
<script>
window.onload = function() {
var oUl = document.getElementById('ul1');
var deepList = oUl.cloneNode(true);
alert(deepList.childNodes.length); //7
var shallowList = oUl.cloneNode(false);
alert(shallowList.childNodes.length); //0
}
</script>
<body>
<ul id="ul1">
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
</body>
2.normalize(),處理文檔樹中的文本節(jié)點
當由于解析器的實現(xiàn)或Dom操作等原因，可能會出現(xiàn)文本節(jié)點不包括文本晦鞋，或者接連出現(xiàn)兩個文本節(jié)點的情況蹲缠，當在某個節(jié)點上調(diào)用該方法時，就會在該節(jié)點的后代節(jié)點上查找上述兩種情況悠垛，如果找到了空文本節(jié)點线定，則刪除它；如果找到相鄰的文本節(jié)點鼎文，則將它們合并為一個文本節(jié)點渔肩。
