DOM 文檔對象模型
- DOM即文檔對象模型（Document Object Model）
- DOM原理：
HTML加載完畢以後，渲染引擎會在內存中把HTML文檔生成一個DOM樹，getElementById是獲取內存中DOM上元素的節點，然後操作時修改的是該元素的屬性，
3.文檔對象模型：
- docment是文檔對象模型的一部分，
- DOM是一個混合的數據類型
4.DOM樹：
5.DOM的作用：
- 找對象（元素）；
- 設置元素的屬性；
- 設置元素的樣式；
- 動態創建和刪除元素；
- 事件的觸發響應；
6.DOM訪問關系：
- 節點的獲取：
節點的訪問關系是以屬性的方式存在的，DOM節點並不是孤立存在的，因此通過DOM節點之間的相對關系對它們進行訪問，
1).父節點（parentNode）：（一個節點只有一個父節點）
獲取父節點： 父節點=節點.parentNode；
<body>
<div id="box">
<button id="btn">點擊</button>
<div id="link">
<p>上一個兄弟節點</p>
<a href="#">百度搜索</a>
<span>下一個兄弟節點</span>
</div>
<p>我是最後一個子節點</p>
</div>
<script>
var
2).兄弟節點：
sibling→兄弟，next→下一個，previous→上一個
兄弟節點的獲取存在兼容性問題，IE 6/7/8,用nextSibling(previousSibling)；谷歌火狐，IE9+用nextElementSibling(previousElementSibling);
獲取兄弟節點的兼容性寫法： 下一個兄弟節點＝節點.nextElementSibling || 節點.nextSibling；
上一個兄弟節點＝節點.previousElementSibling || 節點.previousSibling；
3).單個節點：
同樣存在兼容性，與兄弟節點相似，
獲取單個節點的兼容性寫法： 第一個子節點＝父節點.firstElementChild || 父節點.firstChild;
最後一個子節點＝父節點.lastElementChild || 父節點.lastChild;
所有子節點：有兩種方法，第一種是有W3C屬性childNodes獲取所有子節點，返回的是指定元素的子元素集合，包括HTML節點，所有屬性，文本節點（火狐，谷歌等高版本會把換行也看做一個子節點），通過判斷node.nodeType的值可以過濾掉文本，屬性等節點，然後返回元素（元素即標簽），其中： nodeType==1,表示元素節點
nodeType==2,表示屬性節點
nodeType==3,表示文本節點
獲取所有子節點： 子節點數組＝父節點.childNodes;
第二種方法是使用非標準屬性children,只返回HTML節點，不返回文本節點，雖然不是標準的DOM屬性，但它和innerHTML方法一樣，得到了幾乎所有瀏覽器都支持，應用更為廣泛。
（註意：children在 IE6/7/8中包含註釋節點，在IE 6/7/8註釋不要寫在裏面）
獲取所有子節點： 子節點數組＝父節點.children;
<body>
<div id="box">
<button id="btn">點擊</button>
<div id="link">
<p>上一個兄弟節點</p>
<a href="#">百度搜索</a>
<span>下一個兄弟節點</span>
</div>
<p>我是最後一個子節點</p>
</div>
<script>
//單個節點
var father=document.getElementById("box");
//獲取第一個子節點
var firstNode=father.firstElementChild || father.firstChild;
console.log(firstNode);
//獲取最後一個子節點
var lastNode=father.lastElementChild || father.lastChild;
console.log(lastNode);
/*
//用w3c標準屬性childNodes獲取所有節點
var allNodes=father.childNodes;
console.log(allNodes); //此時，文本節點也被返回
//過濾屬性節點與文本節點，只返回元素節點（元素就是標簽）,並放入新的數組中
var newList=[];
//1.遍歷所返回的子元素的集合
for(var i=0;i<allNodes.length;i++){
var node=allNodes[i];
if(node.nodeType==1){
newList[i]=allNodes[i];
}
}
console.log(newList);
*/
//用非標準屬性children獲取所有節點
var allNodes=father.children;
console.log(allNodes);zzzzz
</script>
</body>
DOM 文檔對象模型