DOM

DOM把一份文檔表示為一棵樹（這是所說的“樹”是數(shù)學(xué)意義上的概念），這是我們理解和運(yùn)用這一模型的關(guān)鍵。更具體的說，DOM把文檔表示為一顆家譜樹。

"D"

document(文檔):當(dāng)創(chuàng)建了一個(gè)網(wǎng)頁并把它加載到Web瀏覽器中時(shí)，DOM就在幕后悄然而生，它吧你編寫的文檔轉(zhuǎn)換成一個(gè)文檔對(duì)象。

“O”

object:有用戶自定義對(duì)象，內(nèi)建對(duì)象和宿主對(duì)象。

“M”

叫model也好，map也好，就是某種事物的變現(xiàn)形式。

節(jié)點(diǎn)(node)

節(jié)點(diǎn)（node）這個(gè)詞是個(gè)網(wǎng)絡(luò)術(shù)語，它表示網(wǎng)絡(luò)中的一個(gè)連接點(diǎn)，一個(gè)網(wǎng)絡(luò)就是由一些節(jié)點(diǎn)構(gòu)成的集合，在DOM中的節(jié)點(diǎn)就是樹中的樹枝和樹葉

元素節(jié)點(diǎn)(element node)

DOM的原子就是元素節(jié)點(diǎn)：例如文本段落的元素的名字是“p”，無序清單元素的名字是“ul”，列表項(xiàng)元素的名字是“l(fā)i”。元素可以包含其他的元素。

文本節(jié)點(diǎn)(text node)

元素節(jié)點(diǎn)只是節(jié)點(diǎn)類型的一種。如果一份文檔完全由一些空白元素構(gòu)成，它將有一個(gè)結(jié)構(gòu)，但這份文檔本省將不包含什么內(nèi)容。在<p>I am wang</p>中“I am wang”就是文本節(jié)點(diǎn)（text node）

屬性節(jié)點(diǎn)(attribute node)

屬性節(jié)點(diǎn)用來對(duì)元素做出更具體的描述。例如，幾乎所有的元素都有一個(gè)title屬性，而我們可以利用這個(gè)屬性對(duì)包含在元素里的東西做出準(zhǔn)確的描述：<p title="a gentle reminder">I am wang</p>其中title就是屬性節(jié)點(diǎn)

css

DOM并不是與網(wǎng)頁結(jié)構(gòu)打交道的唯一技術(shù)。我們還可以通過CSS（層疊樣式表）告訴瀏覽器如何現(xiàn)實(shí)一份文檔的內(nèi)容。類似于DOM，CSS也將document的你內(nèi)容視為一顆節(jié)點(diǎn)數(shù)。節(jié)點(diǎn)樹上的各個(gè)元素將繼承其父元素的樣式屬性。

//作用在整個(gè)頁面
body{
color:white;
background-color:black;

}

class屬性

可以在所有元素上任意應(yīng)用class屬性：

<p class="special">this paragraph has the special class</p>
<h2 class="special">so doed this headline</h2>

//在style可以這么寫:
.special{
   border:1px solid white;
   background-color:#333;
   color:#ccc;
   padding:1em;
}

//而id在一個(gè)頁面中只能使用一次，多次使用也可以，但用javascript將會(huì)混亂
//在style可以這么寫樣式：
#special{
  font-weight:bold;
}

獲取元素：

getElementById(的方法

返回一個(gè)與那個(gè)有著給定id屬性值的元素節(jié)點(diǎn)對(duì)應(yīng)的對(duì)象。

getElementsByTagName()方法

返回一個(gè)對(duì)象數(shù)組，每個(gè)對(duì)象分別對(duì)應(yīng)著文檔里有著給定標(biāo)簽的一個(gè)元素。類似于getElementById，這個(gè)方法也是只有一個(gè)參數(shù)的函數(shù)，他的參數(shù)是標(biāo)簽的名字叫：document.getElementsByTagName(tag);

var shopping=document.getElementById("purchases");
var items=shopping.getElementsByTagName("*");

getElementsByClassName("sale")

返回一個(gè)包含類名“sale”所有元素，是一個(gè)數(shù)組。

//得到id為“purchases”的元素中有多少類名包含“sale”列表項(xiàng)
var shopping=document.getElementById("purchases");
var items=shopping.getElementsByClassName("sale");

getAttribute()和setAttribute()

getAttribute()

getAttribute方法不屬于document對(duì)象，所以不能通過document對(duì)象調(diào)用。它只能通過元素節(jié)點(diǎn)對(duì)性愛那個(gè)調(diào)用。

var file=document.getElementById("btn");
alert(file.getAttribute("type"));

setAttribute()

設(shè)置元素節(jié)點(diǎn)中的屬性節(jié)點(diǎn)的屬性值

var file=document.getElementById("btn");
file.setAttribute("type","option");
alert(file.getAttribute("type"));