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