BOM编程(内含复选框全选全不选举例)
1.BOM模型简介
1.1 Browser Object Model的缩写, 简称浏览器对象模型
1.2 BOM结构:
顶层对象:window(窗口)
一级子对象:history(历史记录) -->Ctrl+H、
document(文档)、
location(地址栏)
二级子对象:包含在document(文档)内部
……
2.history对象
2.1 back()-->返回前一个历史记录地址
2.2 forward()-->返回后一个历史记录的地址
2.3 go(n)-->返回前(后)一个历史记录地址
举例:go(-1)与back()等效
go(1)与forward()等效
3.location对象
href属性--> 设置或获取当前地址栏的信息
reload()--> 重新载入网页,相当于F5刷新
4.document对象
a)getElementById("id值")-->通过id属性的值获取该元素的对象
b)getElementsByName("name值")-->获取name属性值相同的元素数组
c)getElementsByTagName("标签名")-->获取指定标签名的元素数组
d)getElementsByClassName("class属性值")-->获取class属性值相同的元素数组
5.元素的显示和隐藏
5.1 display样式
语法:元素.style.display="值"
注意:值填写block时表示显示(前后带换行符);
值填写inline时表示显示(前后不带换行符)
值填写none时表示隐藏(不留空位)
5.2 visibility样式
语法:元素.style.visibility = "值"
注意:值填写visible时表示显示;
值填写hidden时表示隐藏(留存空位)
6.复选框全选/全不选特效
6.1 复选框的选中/不选中:
复选框.checked=true;//选中
复选框.checked=false;//不选中
6.2 多个复选框设计相同的name;
通过getElementsByName()方法获取复选框数组
7.下面是全选全不选的特效展示页面
下面是关键代码的实现:
接下来是网页的一些代码:
以上是小编今天的介绍,要是有什么疑问,或者小编有什么不足之处,都可以加小编微信,小编很乐意为你解答!