第3章 DOM#
3.1 文檔：DOM的D##
當(dāng)創(chuàng)建了一個網(wǎng)頁并把它加載到web瀏覽器中時，DOM就在幕后自動生成，它把你編寫的網(wǎng)頁文檔轉(zhuǎn)換成一個文檔對象禁荸。
3.2 對象：DOM的O##
在JS中，Object分為三種：user-defined object, native object, host object.
在JS最初時，有些宿主對象就已經(jīng)可用了诉稍，最基礎(chǔ)的時window對象蝠嘉。
window對象對應(yīng)著瀏覽器窗口本身，這個對象的屬性和方法統(tǒng)稱為BOM(瀏覽器對象模型)杯巨，但是稱為Window Object Model也許更貼切蚤告。BOM 提供來window.open和window.blur等方法，這兩個方法時各種彈出窗口和下拉菜單的根源服爷。
對于Window對象杜恰，應(yīng)把注意力集中在瀏覽器窗口內(nèi)的網(wǎng)頁內(nèi)容上。document對象的主要功能就是處理網(wǎng)頁內(nèi)容仍源。
3.3 模型：DOM的M##
模型的含義是某種事物的表現(xiàn)形式心褐。就像一列火車模型代表一列真正的火車。一張地圖代表一個城市笼踩，DOM代表加載到瀏覽器窗口的當(dāng)前網(wǎng)頁逗爹。瀏覽器提供了網(wǎng)頁的地圖（或者說模型），而我們可以通過JS來讀取這張地圖嚎于。
DOM把一份文件表示為一棵樹（tree）掘而，有父，子于购，兄弟節(jié)點（parent,child,sibling）镣屹。一位特定的家族成員既是某些成員的父輩，優(yōu)勢另一位成員的子輩价涝，同時還是另一位成員的兄弟女蜈。
<!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>標簽表示整個文檔的開始，所有的其他元素都包含在內(nèi)色瘩，表示它至少是一個父節(jié)點（parent）伪窖。如果這是一顆樹，這個<html>標簽就是樹根（根元素）
接下來深入一層居兆，有兩個分枝head>和<body>覆山。他們位于統(tǒng)一層次，且互不包含泥栖，所以時兄弟關(guān)系簇宽。他們有著共同的父節(jié)點<html>，但又有各自的子元素吧享，所以他們本身又是其他一些元素的父元素魏割。
<head>元素有兩個子元素<meta>和<title>(兄弟關(guān)系)，<body>有三個子元素：<h1>,<p>,<ul>（兄弟關(guān)系）钢颂。
3.4 節(jié)點##
在DOM中钞它，文檔是由節(jié)點構(gòu)成的結(jié)合，這些節(jié)點是文檔樹上的樹枝和樹葉而已。
DOM里有許多不同類型的節(jié)點遭垛，有很多類型的DOM節(jié)點包含著其他類型的節(jié)點尼桶，其中有三種：元素節(jié)點，文本節(jié)點锯仪，屬性節(jié)點泵督。
3.4.1 元素節(jié)點###
DOM的原子是元素節(jié)點（element node）。他們是最低級別的節(jié)點庶喜，如<body>,<p>,<ul>之類的元素小腊。這些元素在文檔中的布局形成了文檔的結(jié)構(gòu)。
元素的名字就是節(jié)點的名字溃卡，文本段落是p,無序清單元素的名字是ul,列表項元素的名字是li溢豆。
3.4.2 文本節(jié)點###
在互聯(lián)網(wǎng)上蜒简，絕大多數(shù)內(nèi)容都是由文本提供的瘸羡。上例中<p>包含著文本‘dont forget to buy this stuff’。它是一個文本節(jié)點搓茬。在XHTML中犹赖，文本節(jié)點總是被包含在元素節(jié)點的內(nèi)部。但并非所有的元素節(jié)點都包含有文本節(jié)點卷仑。
3.4.3 屬性節(jié)點###
屬性節(jié)點用來對元素做出更具體的描述峻村，例如幾乎所有元素都有一個title屬性，可以利用這個屬性對包含在元素離的東西做出準確的描述锡凝。
<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腳本窜锯，對樣式的聲明既可以在<head>部分（<style>標簽之間）张肾，也可以放在另外的一個樣式表文件里。
CSS聲明元素樣式的語法與JS的函數(shù)定義語法類似：
selector{
property:value;
}
舉例锚扎；
p{
color:yellow;
font-family:"arial",sans-serif;
font-size:1.2em;
}