用JS操作页面元素？一文搞懂DHTML技术原理

1 .1 什么是DHTML

DHTML: HTML 动态的HTML, 这门技术并不是一门新的技术, 而是将我们之前所学的HTML、CSS、整合在一起，利用JS操作页面元素, 让元素具有动态的变化, 使得页面和用户具有交互的行为.

示例：点击div改变div的宽高及背景颜色.

1.的原理

1.2.的原理

在DHTML中, 将所有的HTML元素都使用一个一个的JS对象来进行表示, 使用对象来表示元素本身, 使用对象之间的包含关系来表示元素之间的层级关系.

使用一个文档结构树来表示整个HTML文档.

对象上可以设计属性和方法, 通过操作对象上的属性或方法, 可以间接的操作页面中的元素.

利用这种方式将HTML、CSS、整合在了一起，形成了现在的DHTML技术.

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

Model 文档对象模型

1.3BOM

1.3.对象

1.属性

属性 – 表示当天窗口是否已经关闭 true表示已经关闭, false表示还没有关闭

2.事件

事件 – 在浏览器将整个html页面加载完成之后立即触发执行.

示例：

3.方法

（1）alert方法 – 定义一个消息对话框

（2）方法 – 定义一个确认对话框

1.4DOM1.4.1如何来获取HTML元素

1.()

：根据元素的id值获取指定的元素.返回的是一个对象, 表示所获取的元素.

2.();

：根据元素的name属性值获取所有指定name的元素,返回的是一个集合数组(可以按照数组的方式来访问)

3.();

：根据元素的名称来获取所有指定名称的元素, 返回的值是一个集合数组(按照数组的方式进行访问!)

4.value属性

value：用来获取或设置输入框中的value值

5.属性、属性

属性用来获取或设置元素的html内容

属性用来获取或设置元素的文本内容(部分浏览器不兼容, 比如火狐)

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

1、()、()

（1） – 创建一个指定名称的新元素

（2） – 为元素添加一个子元素.

2、()

方法 – 用来删除子元素

.body属性 – 用来获取页面中的body元素

3、()、

(, )方法 – 通过父元素使用新元素替换已有的子元素

属性 – 通过子元素来获取父元素

4、(), ()

() – 克隆元素, 参数默认是false, 表示克隆元素本身但是不包含子孙元素, 设置为true, 即可克隆整个元素(包括元素内的所有内容).

(, ) – 通过父元素将新元素插入到已有子元素的前面

1.4.3练习案例11.仿QQ分组列表

（1）: 基本实现: 点击分组展开当前分组

（2）: 只允许一个分组展开(在展开当前分组之前, 先将所有分组依次关闭, 在展开当前分组)

（3）: 如果当前分组是展开的, 点击之后应该关闭当前分组

如果当前分组是关闭的, 点击之后先关闭所有分组, 再展开当前分组

1.4.4二级联动下拉框

1.选择国家

（1）事件: 在下拉选项切换时触发

2.根据选中的省份获取对应的城市

元素 属性 分组 获取 一个 表示