DHTML
什么是DHTML
DHTML: Dynamic?HTML?動態(tài)的HTML, DHTML并不是一門新的技術(shù),?而是將我們之前所學的HTML、CSS、JavaScript整合在一起，利用JS操作頁面元素, 讓元素具有動態(tài)的變化,?使得頁面和用戶具有交互的行為.
DHTML的原理
在DHTML中,?將所有的HTML元素都使用一個一個的JS對象來進行表示,?使用對象來表示元素本身,?使用對象之間的包含關(guān)系來表示元素之間的層級關(guān)系.
使用一個文檔結(jié)構(gòu)樹來表示整個HTML文檔.
對象上可以設(shè)計屬性和方法,?通過操作對象上的屬性或方法,?可以間接的操作頁面中的元素.
利用這種方式將HTML、CSS、JavaScript整合在了一起，形成了現(xiàn)在的DHTML技術(shù).
DHTML可以分為兩部分內(nèi)容: BOM和DOM
BOM: Browser?Object?Model?瀏覽器對象模型
DOM: Document?Object?Model?文檔對象模型
window對象
1.屬性
closed屬性 – 表示當前窗口是否已經(jīng)關(guān)閉。true表示已經(jīng)關(guān)閉,?false表示還沒有關(guān)閉。
2.事件
onload事件 – 在瀏覽器將整個html頁面加載完成之后立即觸發(fā)執(zhí)行.
示例：
3.方法
（1）alert方法 – 定義一個消息對話框
（2）confirm方法 – 定義一個確認對話框
DOM
如何來獲取HTML元素
1.getElementById()
getElementById：根據(jù)元素的id值獲取指定的元素.返回的是一個對象,?表示所獲取的元素.
2.getElementsByName();
getElementsByName：根據(jù)元素的name屬性值獲取所有指定name的元素,返回的是一個集合數(shù)組(可以按照數(shù)組的方式來訪問)
3.getElementsByTagName();
getElementsByTagName：根據(jù)元素的名稱來獲取所有指定名稱的元素,?返回的值是一個集合數(shù)組(按照數(shù)組的方式進行訪問!)
4.value屬性
value：用來獲取或設(shè)置輸入框中的value值
5.innerHTML屬性、innerText屬性
innerHTML屬性用來獲取或設(shè)置元素的html內(nèi)容 innerText屬性用來獲取或設(shè)置元素的文本內(nèi)容(部分瀏覽器不兼容, 比如火狐)
增加、刪除、修改HTML元素
1、createElement()、appendChild()
（1）createElement – 創(chuàng)建一個指定名稱的新元素
（2）appendChild?– 為元素添加一個子元素.
2、removeChild()
removeChild方法?– 用來刪除子元素
document.body屬性?– 用來獲取頁面中的body元素
3、replaceChild()、parentNode
replaceChild(oNewNode, oChildNode)方法??– 通過父元素使用新元素替換已有的子元素
parentNode屬性?– 通過子元素來獲取父元素
4、cloneNode(), insertBefore()
cloneNode([boolean]) – 克隆元素,參數(shù)默認是false, 表示克隆元素本身但是不包含子孫元素,?設(shè)置為true, 即可克隆整個元素(包括元素內(nèi)的所有內(nèi)容).
insertBefore(oNewNode, oChildNode) – 通過父元素將新元素插入到已有子元素的前面
練習案例1
1.仿QQ分組列表
（1）version_1:?基本實現(xiàn): 點擊分組展開當前分組
（2）version_2:?只允許一個分組展開(在展開當前分組之前,?先將所有分組依次關(guān)閉,?在展開當前分組)
（3）version_3:如果當前分組是展開的,點擊之后應該關(guān)閉當前分組
如果當前分組是關(guān)閉的,點擊之后先關(guān)閉所有分組, 再展開當前分組
二級聯(lián)動下拉框
1.選擇國家
（1）onchange事件:?在下拉選項切換時觸發(fā)
2.根據(jù)選中的省份獲取對應的城市
