[TOC]
1.定義：
DOM全稱為“Document Object Model” 文檔對象模型。其實說白了就是針對HTML文檔的一個API(應用程序接口)
DOM 把HTML文檔描繪成一個層次化的節點數(樹形結構) ，以便開發人員增刪改查 進行各種操作
DOM Tree
如上圖所述 DOM 樹形結構 而元素 標簽(<a>) 就是節點 也是DOM最小組成單位。
2.節點（Node）
DOM1定義了一個node接口，以實現所有node節點類型
其中nodetype屬性，可以知道屬于哪種節點類型
3.查找元素的常用三個方法
getElementById // 通過id查找
getElementsByTagName //通過標簽名查找
getElementsByClassName // 通過類名查找
4.獲取元素的常用屬性
- parentNode //父節點
- childNodes //字節點[]
- offsetParent //獲取當前元素定位的父級元素節點
- firstChild //獲取父元素下的第一個子節點
- lastChild //獲取父元素下的最個一個子節點
- nextSibling //獲取緊跟在當前節點后面的第一個同級節點，沒有為null
- previousSibling //獲取當前節點前面的、距離最近的一個同級節點 沒有則為null
5.操作節點常用方法
- appendChind() //填加子節點為最后
- insertBefore() //插入節點為指定的位置（接受兩個參數：插入的節點，作為參照的節點）
- replaceChind() //替換節點
- removeChind() //移除節點
- cloneNode() //復制節點 參數是布爾值 就是false 和true(深復制)
- hasChildNodes() //是否有子節點
6.做個DOM操作的小例子
比如像發微博一樣 需要一個文本框 一個按鈕 然后 輸入內容 點一下按鈕就會出現 下面就會出現寫的內容
<textarea id="text"> </textarea>
<input id = "button" type="button" value="發布">
<ul id ="ul">
<li>今天真開心</li>
</ul>
window.onload=function ()
{
var Btn=document.getElementById('button');
var Txt=document.getElementById('text');
var Ul=document.getElementById('ul');
Btn.onclick=function ()
{
var Li=document.createElement('li');//創建元素標簽
Li.innerHTML=Txt.value;
Ul.appendChild(Li);//添加到最后一個子標簽
}
}
