第3章 DOM#
3.1 文檔：DOM的D##
當(dāng)創(chuàng)建了一個(gè)網(wǎng)頁并把它加載到web瀏覽器中時(shí)，DOM就在幕后自動(dòng)生成，它把你編寫的網(wǎng)頁文檔轉(zhuǎn)換成一個(gè)文檔對(duì)象。
3.2 對(duì)象：DOM的O##
在JS中，Object分為三種：user-defined object, native object, host object.
在JS最初時(shí)，有些宿主對(duì)象就已經(jīng)可用了，最基礎(chǔ)的時(shí)window對(duì)象。
window對(duì)象對(duì)應(yīng)著瀏覽器窗口本身，這個(gè)對(duì)象的屬性和方法統(tǒng)稱為BOM(瀏覽器對(duì)象模型)，但是稱為Window Object Model也許更貼切。BOM 提供來window.open和window.blur等方法，這兩個(gè)方法時(shí)各種彈出窗口和下拉菜單的根源。
對(duì)于Window對(duì)象，應(yīng)把注意力集中在瀏覽器窗口內(nèi)的網(wǎng)頁內(nèi)容上。document對(duì)象的主要功能就是處理網(wǎng)頁內(nèi)容。
3.3 模型：DOM的M##
模型的含義是某種事物的表現(xiàn)形式。就像一列火車模型代表一列真正的火車。一張地圖代表一個(gè)城市，DOM代表加載到瀏覽器窗口的當(dāng)前網(wǎng)頁。瀏覽器提供了網(wǎng)頁的地圖（或者說模型），而我們可以通過JS來讀取這張地圖。
DOM把一份文件表示為一棵樹（tree），有父，子，兄弟節(jié)點(diǎn)（parent,child,sibling）。一位特定的家族成員既是某些成員的父輩，優(yōu)勢(shì)另一位成員的子輩，同時(shí)還是另一位成員的兄弟。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charaset="utf-8"/>
<title>Shopping</title>
</head>
<body>
<h1>what to buy</h1>
<p title="a gentle reminder">dont forget to but this stuff.</p>
<ul id="purchases">
<li>a tin of beans</li>
<li clase="sale">cheese</li>
<li class="sale important">milk</li>
</ul>
</body>
</html>
分析下剛才的HTML文件：
<html>標(biāo)簽表示整個(gè)文檔的開始，所有的其他元素都包含在內(nèi)，表示它至少是一個(gè)父節(jié)點(diǎn)（parent）。如果這是一顆樹，這個(gè)<html>標(biāo)簽就是樹根（根元素）
接下來深入一層，有兩個(gè)分枝head>和<body>。他們位于統(tǒng)一層次，且互不包含，所以時(shí)兄弟關(guān)系。他們有著共同的父節(jié)點(diǎn)<html>，但又有各自的子元素，所以他們本身又是其他一些元素的父元素。
<head>元素有兩個(gè)子元素<meta>和<title>(兄弟關(guān)系)，<body>有三個(gè)子元素：<h1>,<p>,<ul>（兄弟關(guān)系）。
3.4 節(jié)點(diǎn)##
在DOM中，文檔是由節(jié)點(diǎn)構(gòu)成的結(jié)合，這些節(jié)點(diǎn)是文檔樹上的樹枝和樹葉而已。
DOM里有許多不同類型的節(jié)點(diǎn)，有很多類型的DOM節(jié)點(diǎn)包含著其他類型的節(jié)點(diǎn)，其中有三種：元素節(jié)點(diǎn)，文本節(jié)點(diǎn)，屬性節(jié)點(diǎn)。
3.4.1 元素節(jié)點(diǎn)###
DOM的原子是元素節(jié)點(diǎn)（element node）。他們是最低級(jí)別的節(jié)點(diǎn)，如<body>,<p>,<ul>之類的元素。這些元素在文檔中的布局形成了文檔的結(jié)構(gòu)。
元素的名字就是節(jié)點(diǎn)的名字，文本段落是p,無序清單元素的名字是ul,列表項(xiàng)元素的名字是li。
3.4.2 文本節(jié)點(diǎn)###
在互聯(lián)網(wǎng)上，絕大多數(shù)內(nèi)容都是由文本提供的。上例中<p>包含著文本‘dont forget to buy this stuff’。它是一個(gè)文本節(jié)點(diǎn)。在XHTML中，文本節(jié)點(diǎn)總是被包含在元素節(jié)點(diǎn)的內(nèi)部。但并非所有的元素節(jié)點(diǎn)都包含有文本節(jié)點(diǎn)。
3.4.3 屬性節(jié)點(diǎn)###
屬性節(jié)點(diǎn)用來對(duì)元素做出更具體的描述，例如幾乎所有元素都有一個(gè)title屬性，可以利用這個(gè)屬性對(duì)包含在元素離的東西做出準(zhǔn)確的描述。
<p title="a gentle reminder">dont forget to but this stuff</p>
3.4.4 CSS###
DOM并不是與網(wǎng)頁結(jié)構(gòu)打交道的唯一技術(shù)，CSS（層疊樣式表）告訴瀏覽器應(yīng)該如何顯示一份文檔的內(nèi)容。
類似JS腳本，對(duì)樣式的聲明既可以在<head>部分（<style>標(biāo)簽之間），也可以放在另外的一個(gè)樣式表文件里。
CSS聲明元素樣式的語法與JS的函數(shù)定義語法類似：
selector{
property:value;
}
舉例；
p{
color:yellow;
font-family:"arial",sans-serif;
font-size:1.2em;
}