“M”
map or model芍秆。 DOM代表著加載到瀏覽器窗口的當(dāng)前網(wǎng)頁(yè)蚂蕴。瀏覽器提供了網(wǎng)頁(yè)的地圖鼎天，通過(guò)js去讀取這張地圖晶通。
“D”
節(jié)點(diǎn)樹塘慕；DOM把網(wǎng)頁(yè)文檔轉(zhuǎn)換為文檔對(duì)象
"O"
自足的數(shù)據(jù)集合赎婚；屬性和方法
- 用戶定義對(duì)象
- 內(nèi)建對(duì)象 Array Date Math
- 宿主對(duì)象 window document
window對(duì)象對(duì)應(yīng)著瀏覽器窗口本身-BOM（瀏覽器對(duì)象模型）WOM
- 節(jié)點(diǎn)
- 元素節(jié)點(diǎn)：DOM的原子
- 文本節(jié)點(diǎn)：內(nèi)容
- 屬性節(jié)點(diǎn)：title css class
- CSS
繼承是CSS技術(shù)中的一項(xiàng)強(qiáng)大功能逊彭。
節(jié)點(diǎn)樹
class
.className{ font-style:italic; }//class屬性值相同的所有元素定義同一樣式 element.className{ text-transform:uppercase; }//為一種特定類型的元素定義特定樣式id :添加獨(dú)一無(wú)二的標(biāo)識(shí)符 “掛鉤”
#idName{ border:1px solid white; background-color:#333; color:#ccc; padding:1em; }//獨(dú)享的樣式
：為包含在id里的其他元素指定樣式
- 獲取元素：3種DOM方法
- getElementById
返回的是一個(gè)對(duì)象瓦戚，可用typeof操作符來(lái)驗(yàn)證；
alert(typeof document.getElmentById("idName"));
- getElementsByClassName
H5新增的摸吠；返回對(duì)象數(shù)組空凸；
查找?guī)в卸鄠€(gè)類名的元素
document.getElementsByClassName("important sale");//與順序無(wú)關(guān)，只要同時(shí)帶有
用已有的DOM方法實(shí)現(xiàn)自己的getElementsByClassName
function getElementsByClassName(node, classname){ if(node.getElementByClassName){ //使用現(xiàn)有方法 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樹中的搜索起點(diǎn)寸痢，此函數(shù)不適用于多個(gè)類名
- getElementsByTagName
返回一個(gè)對(duì)象數(shù)組呀洲，
alert(document.getElementsByTagName("tag").length);//獲取數(shù)組長(zhǎng)度
簡(jiǎn)化：把document.getElementsByTagName("tag")賦值給一個(gè)變量
var items = document.getElementsByTagName("tag");
允許把一個(gè)通配符作為它的參數(shù)
alert(document.getElementsByTagName("*").length);
結(jié)合使用
var shopping = document.getElementById("purchases"); var items = shopping.getElementsByTagName("*")
- 盤點(diǎn)
- 一份文檔就是一顆節(jié)點(diǎn)樹
- 節(jié)點(diǎn)分為不同的類型：元素節(jié)點(diǎn)（每個(gè)元素節(jié)點(diǎn)都是一個(gè)對(duì)象）、屬性節(jié)點(diǎn)啼止、文本節(jié)點(diǎn)等
- getElementById 將返回一個(gè)對(duì)象道逗，該對(duì)象對(duì)應(yīng)著文檔里的一個(gè)特定的元素節(jié)點(diǎn)。
- getElementsByTagName 和 getElementsByClassName 將返回一個(gè)對(duì)象數(shù)組献烦，分別對(duì)應(yīng)文檔里的一組特定的元素節(jié)點(diǎn)滓窍。
- 每個(gè)節(jié)點(diǎn)都是一個(gè)對(duì)象，并天生帶方法巩那，通過(guò)預(yù)定義方法還可改變?cè)氐膶傩?/li>
- 獲取和設(shè)置獲得元素的屬性
- getAttribute
不屬于document對(duì)象吏夯，不能通過(guò)document對(duì)象調(diào)用；只能通過(guò)元素節(jié)點(diǎn)對(duì)象調(diào)用即横。
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);
}
}//獲取每個(gè)<p>元素的titile屬性`
- setAttribute
對(duì)節(jié)點(diǎn)屬性進(jìn)行修改
object.setAttribute(attribute,value);
** setAttribute做出的修改不會(huì)反映在文檔本身的源代碼里锦亦，這種“表里不一”的現(xiàn)象源自DOM的工作模式：先加載文檔的靜態(tài)內(nèi)容，在動(dòng)態(tài)刷新令境，動(dòng)態(tài)刷新不影響文檔的靜態(tài)內(nèi)容。對(duì)頁(yè)面內(nèi)容進(jìn)行刷新卻不需要在瀏覽器里刷新頁(yè)面顾瞪。**
nodeName
nodeValue
childNodes
nextSibling
parentNode
...
