DHTML
什么是DHTML
DHTML: Dynamic HTML 动态的HTML, DHTML并不是一门新的技术, 而是将我们之前所学的HTML、CSS、JavaScript整合在一起，利用JS操作页面元素, 让元素具有动态的变化, 使得页面和用户具有交互的行为.
DHTML的原理
在DHTML中, 将所有的HTML元素都使用一个一个的JS对象来进行表示, 使用对象来表示元素本身, 使用对象之间的包含关系来表示元素之间的层级关系.
使用一个文档结构树来表示整个HTML文档.
对象上可以设计属性和方法, 通过操作对象上的属性或方法, 可以间接的操作页面中的元素.
利用这种方式将HTML、CSS、JavaScript整合在了一起，形成了现在的DHTML技术.
DHTML可以分为两部分内容: BOM和DOM
BOM: Browser Object Model 浏览器对象模型
DOM: Document Object Model 文档对象模型
window对象
1.属性
closed属性 – 表示当前窗口是否已经关闭。true表示已经关闭, false表示还没有关闭。
2.事件
onload事件 – 在浏览器将整个html页面加载完成之后立即触发执行.
示例：
3.方法
（1）alert方法 – 定义一个消息对话框
（2）confirm方法 – 定义一个确认对话框
DOM
如何来获取HTML元素
1.getElementById()
getElementById：根据元素的id值获取指定的元素.返回的是一个对象, 表示所获取的元素.
2.getElementsByName();
getElementsByName：根据元素的name属性值获取所有指定name的元素,返回的是一个集合数组(可以按照数组的方式来访问)
3.getElementsByTagName();
getElementsByTagName：根据元素的名称来获取所有指定名称的元素, 返回的值是一个集合数组(按照数组的方式进行访问!)
4.value属性
value：用来获取或设置输入框中的value值
5.innerHTML属性、innerText属性
innerHTML属性用来获取或设置元素的html内容 innerText属性用来获取或设置元素的文本内容(部分浏览器不兼容, 比如火狐)
增加、删除、修改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
1.仿QQ分组列表
（1）version_1: 基本实现: 点击分组展开当前分组
（2）version_2: 只允许一个分组展开(在展开当前分组之前, 先将所有分组依次关闭, 在展开当前分组)
（3）version_3:如果当前分组是展开的,点击之后应该关闭当前分组
如果当前分组是关闭的,点击之后先关闭所有分组, 再展开当前分组
二级联动下拉框
1.选择国家
（1）onchange事件: 在下拉选项切换时触发
2.根据选中的省份获取对应的城市