1 DHTML

1.1 什麼是DHTML

　　DHTML: Dynamic HTML 動態的HTML, 這門技術並不是一門新的技術, 而是將我們之前所學的HTML、CSS、JavaScript整合在一起，利用JS操作頁面元素, 讓元素具有動態的變化, 使得頁面和使用者具有互動的行為.
　　示例：點選div改變div的寬高及背景顏色.
　　

1.2DHTML的原理

1.2.1DHTML的原理
　　在DHTML中, 將所有的HTML元素都使用一個一個的JS物件來進行表示, 使用物件來表示元素本身, 使用物件之間的包含關係來表示元素之間的層級關係.
　　使用一個文件結構樹來表示整個HTML文件.
　　物件上可以設計屬性和方法, 通過操作物件上的屬性或方法, 可以間接的操作頁面中的元素.
　　利用這種方式將HTML、CSS、JavaScript整合在了一起，形成了現在的DHTML技術.
　　
　

DHTML可以分為兩部分內容: BOM和DOM 　　BOM: Browser Object Model 瀏覽器物件模型 　　DOM:
Document Object Model 文件物件模型

1.3BOM

1.3.1window物件
1.屬性
　　 closed屬性 – 表示當天視窗是否已經關閉 true表示已經關閉, false表示還沒有關閉

2.事件
　　 onload事件 – 在瀏覽器將整個html頁面載入完成之後立即觸發執行.
示例：

3.方法
（1）alert方法 – 定義一個訊息對話方塊
（2）confirm方法 – 定義一個確認對話方塊

1.4DOM

1.4.1如何來獲取HTML元素

　　1.getElementById()
　　getElementById：根據元素的id值獲取指定的元素.返回的是一個物件, 表示所獲取的元素.
　　
　　2.getElementsByName();
　　getElementsByName：根據元素的name屬性值獲取所有指定name的元素,返回的是一個集合陣列(可以按照陣列的方式來訪問)
　　
　　3.getElementsByTagName();
　　getElementsByTagName：根據元素的名稱來獲取所有指定名稱的元素, 返回的值是一個集合陣列(按照陣列的方式進行訪問!)
　　
　　4.value屬性
　　value：用來獲取或設定輸入框中的value值
　　
　　5.innerHTML屬性、innerText屬性
　　innerHTML屬性用來獲取或設定元素的html內容
　　 innerText屬性用來獲取或設定元素的文字內容(部分瀏覽器不相容, 比如火狐)
　　
　

1.4.2增加、刪除、修改HTML元素

1、createElement()、appendChild()
（1）createElement – 建立一個指定名稱的新元素
（2）appendChild – 為元素新增一個子元素.

2、removeChild()
removeChild方法 – 用來刪除子元素
document.body屬性 – 用來獲取頁面中的body元素

3、replaceChild()、parentNode
replaceChild(oNewNode, oChildNode)方法 – 通過父元素使用新元素替換已有的子元素
parentNode屬性 – 通過子元素來獲取父元素

4、cloneNode(), insertBefore()
cloneNode([boolean]) – 克隆元素, 引數預設是false, 表示克隆元素本身但是不包含子孫元素, 設定為true, 即可克隆整個元素(包括元素內的所有內容).
insertBefore(oNewNode, oChildNode) – 通過父元素將新元素插入到已有子元素的前面

1.4.3練習案例1

1.仿QQ分組列表

（1）version_1: 基本實現: 點選分組展開當前分組

（2）version_2: 只允許一個分組展開(在展開當前分組之前, 先將所有分組依次關閉, 在展開當前分組)

（3）version_3: 如果當前分組是展開的, 點選之後應該關閉當前分組
　　 如果當前分組是關閉的, 點選之後先關閉所有分組, 再展開當前分組

1.4.4二級聯動下拉框

1.選擇國家
（1）onchange事件: 在下拉選項切換時觸發

2.根據選中的省份獲取對應的城市