“M”
map or model。 DOM代表著加載到瀏覽器窗口的當前網頁。瀏覽器提供了網頁的地圖，通過js去讀取這張地圖。
“D”
節點樹；DOM把網頁文檔轉換為文檔對象
"O"
自足的數據集合；屬性和方法
- 用戶定義對象
- 內建對象 Array Date Math
- 宿主對象 window document
window對象對應著瀏覽器窗口本身-BOM（瀏覽器對象模型）WOM
- 節點
- 元素節點：DOM的原子
- 文本節點：內容
- 屬性節點：title css class
- CSS
繼承是CSS技術中的一項強大功能。
節點樹
class
.className{ font-style:italic; }//class屬性值相同的所有元素定義同一樣式 element.className{ text-transform:uppercase; }//為一種特定類型的元素定義特定樣式id :添加獨一無二的標識符 “掛鉤”
#idName{ border:1px solid white; background-color:#333; color:#ccc; padding:1em; }//獨享的樣式
：為包含在id里的其他元素指定樣式
- 獲取元素：3種DOM方法
- getElementById
返回的是一個對象，可用typeof操作符來驗證；
alert(typeof document.getElmentById("idName"));
- getElementsByClassName
H5新增的；返回對象數組；
查找帶有多個類名的元素
document.getElementsByClassName("important sale");//與順序無關，只要同時帶有
用已有的DOM方法實現自己的getElementsByClassName
function getElementsByClassName(node, classname){ if(node.getElementByClassName){ //使用現有方法 return node.getElementByClassName(classname); }else{ var results = new Array(); var elems = node.getElementByClassName("*"); for(var i=0; i<elems.length; i++){ if(elems[i].className.indexOf(classname)!=-1){ results[results.length]=elems[i]; } }return results; } }//node表示DOM樹中的搜索起點，此函數不適用于多個類名
- getElementsByTagName
返回一個對象數組，
alert(document.getElementsByTagName("tag").length);//獲取數組長度
簡化：把document.getElementsByTagName("tag")賦值給一個變量
var items = document.getElementsByTagName("tag");
允許把一個通配符作為它的參數
alert(document.getElementsByTagName("*").length);
結合使用
var shopping = document.getElementById("purchases"); var items = shopping.getElementsByTagName("*")
- 盤點
- 一份文檔就是一顆節點樹
- 節點分為不同的類型：元素節點（每個元素節點都是一個對象）、屬性節點、文本節點等
- getElementById 將返回一個對象，該對象對應著文檔里的一個特定的元素節點。
- getElementsByTagName 和 getElementsByClassName 將返回一個對象數組，分別對應文檔里的一組特定的元素節點。
- 每個節點都是一個對象，并天生帶方法，通過預定義方法還可改變元素的屬性
- 獲取和設置獲得元素的屬性
- getAttribute
不屬于document對象，不能通過document對象調用；只能通過元素節點對象調用。
object.getAttribute(attribute)
`//與getElementsByTagName合用
var paras = document.getElementsByTagName("p");
for(var i=0; i <paras.length;i++){
var title_text = paras[i].getAttribute("title");
if(title_text!=null){
alert(title_text);
}
}//獲取每個<p>元素的titile屬性`
- setAttribute
對節點屬性進行修改
object.setAttribute(attribute,value);
** setAttribute做出的修改不會反映在文檔本身的源代碼里，這種“表里不一”的現象源自DOM的工作模式：先加載文檔的靜態內容，在動態刷新，動態刷新不影響文檔的靜態內容。對頁面內容進行刷新卻不需要在瀏覽器里刷新頁面。**
nodeName
nodeValue
childNodes
nextSibling
parentNode
...
