1 DHTML

1.1 什么是DHTML

　　DHTML: Dynamic HTML 动态的HTML, 这门技术并不是一门新的技术, 而是将我们之前所学的HTML、CSS、JavaScript整合在一起，利用JS操作页面元素, 让元素具有动态的变化, 使得页面和用户具有交互的行为.
　　示例：点击div改变div的宽高及背景颜色.
　　 1.1什么是DHTML

1.2DHTML的原理

1.2.1DHTML的原理
　　在DHTML中, 将所有的HTML元素都使用一个一个的JS对象来进行表示, 使用对象来表示元素本身, 使用对象之间的包含关系来表示元素之间的层级关系.
　　使用一个文档结构树来表示整个HTML文档.
　　对象上可以设计属性和方法, 通过操作对象上的属性或方法, 可以间接的操作页面中的元素.
　　利用这种方式将HTML、CSS、JavaScript整合在了一起，形成了现在的DHTML技术.
　　 1.1什么是DHTML
　

DHTML可以分为两部分内容: BOM和DOM 　　BOM: Browser Object Model 浏览器对象模型　　DOM:
Document Object Model 文档对象模型

1.3BOM

1.3.1window对象
1.属性
　　 closed属性 – 表示当天窗口是否已经关闭 true表示已经关闭, false表示还没有关闭

2.事件
　　 onload事件 – 在浏览器将整个html页面加载完成之后立即触发执行.
示例：
1.1什么是DHTML
3.方法
（1）alert方法 – 定义一个消息对话框
（2）confirm方法 – 定义一个确认对话框

1.4DOM

1.4.1如何来获取HTML元素

　　1.getElementById()
　　getElementById：根据元素的id值获取指定的元素.返回的是一个对象, 表示所获取的元素.
　　 1.1什么是DHTML
　　2.getElementsByName();
　　getElementsByName：根据元素的name属性值获取所有指定name的元素,返回的是一个集合数组(可以按照数组的方式来访问)
　　
　　3.getElementsByTagName();
　　getElementsByTagName：根据元素的名称来获取所有指定名称的元素, 返回的值是一个集合数组(按照数组的方式进行访问!)
　　 1.1什么是DHTML
　　4.value属性
　　value：用来获取或设置输入框中的value值
　　
　　5.innerHTML属性、innerText属性
　　innerHTML属性用来获取或设置元素的html内容
　　 innerText属性用来获取或设置元素的文本内容(部分浏览器不兼容, 比如火狐)
　　 1.1什么是DHTML
　

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

1、createElement()、appendChild()
（1）createElement – 创建一个指定名称的新元素
（2）appendChild – 为元素添加一个子元素.
1.1什么是DHTML
2、removeChild()
removeChild方法 – 用来删除子元素
document.body属性 – 用来获取页面中的body元素

3、replaceChild()、parentNode
replaceChild(oNewNode, oChildNode)方法 – 通过父元素使用新元素替换已有的子元素
parentNode属性 – 通过子元素来获取父元素
1.1什么是DHTML
4、cloneNode(), insertBefore()
cloneNode([boolean]) – 克隆元素, 参数默认是false, 表示克隆元素本身但是不包含子孙元素, 设置为true, 即可克隆整个元素(包括元素内的所有内容).
insertBefore(oNewNode, oChildNode) – 通过父元素将新元素插入到已有子元素的前面
1.1什么是DHTML

1.4.3练习案例1

1.仿QQ分组列表

（1）version_1: 基本实现: 点击分组展开当前分组
1.1什么是DHTML
（2）version_2: 只允许一个分组展开(在展开当前分组之前, 先将所有分组依次关闭, 在展开当前分组)

（3）version_3: 如果当前分组是展开的, 点击之后应该关闭当前分组
　　如果当前分组是关闭的, 点击之后先关闭所有分组, 再展开当前分组
1.1什么是DHTML