JavaScript系列--BOM
原创
©著作权归作者所有：来自51CTO博客作者小蔡coding的原创作品，请联系作者获取转载授权，否则将追究法律责任
BOM
- 1.1DOM
- 1.2功能
- 1.3代码
- 1.4操作Element对象
- 1.5事件
- 1.5.1概念
- 1.5.2如何绑定事件
- 1.5.3综合实例
- （1）实例
- （2）轮播图实例和小bug
- 2.2.2Navigator 浏览器对象
- 2.2.3screen 显示器屏幕对象
- 2.2.4History 历史记录对象
- （1）创建(获取)
- （2）方法
- （3）属性
- （4）实例
- （1）创建
- （2）方法
- （3）自动跳转实例
一、概述
JS由一下几个部分组成，学习BOM要先了解一下事件DOM的基础知识
ECMAScript：脚本语言的基本语法和一些常用对象
BOM：
DOM：
1.事件
1.1DOM
文档对象模型
1.2功能
控制html文档内容
1.3代码
获取页面标签（元素）对象 Element
document.getElementById(“id值”)：通过元素的id
1.4操作Element对象
1.修改属性值
明确获取的对象是哪一个
查看API文档，找其中有哪些属型可以设置
2.修改标签体内容：
属型：innerHTML
<body>
<!-- <img id = "one" src="../image/2.jpeg">-->
<h1 title="title">妻不知刘强东</h1>
<script>
// var img1 = document.getElementById(one);
// alert("换图片了哦！");
// img1.src = "../image/3.jpeg";
var title = document.getElementById("title");
alert("换字了");
title.innerHTML = "哈哈哈";
</script>
</body>
1.5事件
1.5.1概念
某些组件被执行了某些操作后，触发某些代码的执行
造句：XXX被XXX，我就XXX
我方水晶被摧毁后，我就责备对象
1.5.2如何绑定事件
直接在html标签上
<img id = "img1" src="../img/1.jpg" onclick="fun();">
<img id = "img2" src="../img/2.jpg">
<script>
function fun(){
alert('w c');
alert('?');
}
function fun2(){
alert('what happen?');
alert('?');
}
var img1 = document.getElementById("img2");
img1.onclick = fun2;
</script>
1.5.3综合实例
实现图片点一次切换一次
<body>
<img id = 1 src="../img/1.jpg">
<script>
//1.获取图片对象
// flag = flase;这个地方错五，没有提示看不出来怎么办？浏览器打开之后按f12进入控制台会有提示
flag = true;
var str = document.getElementById(1);
str.onclick = function (){
if (flag){
str.src = "../img/2.jpg";
flag = false;
}else{
str.src = "../img/1.jpg";
flag = true;
}
}
</script>
</body>
二、BOM对象
2.1概念
Browser object Model 浏览器对象模型
将浏览器的各个组成部分封装成对象。
2.2组成
2.2.1window :窗口对象
（1）实例
<body>
<input id = 'open' type="button" value="打开新窗口">
<input id = 'close' type="button" value="关闭新窗口">
<script>
/*
windows对象
1.创建
2.方法
1.与弹出有关的方法
alert() 显示一段消息和一个确认
confirm() 显示带有确认和取消的对话框
点击确定返回true
点击取消返回false
prompt() 显示可以提示用户输入的对话框
返回值：获取用户输入值
2.与打开关闭有关的方法
open() 打开窗口
close() 关闭窗口，谁调用谁被关
3.与定时器有关的方式
setTimeout() 在指定的毫秒数后调用函数或计算表达式
参数 ：
1.js代码或者方法对象
2.毫秒值
返回值：
唯一标识，用于取消定时器
cleanTimeout() 取消由setTimeout()方法设置的timeout
setInterval() 按照指定的周期来调用
clearInterval() 取消setInterval设置的timeout
3.属型
获取其他的BOM对象和DOM对象
4.特点
windows对象不需要创建可以直接使用
windows引用可以省略
例如我们前面常用的alert，其实就是windows对象中的方法
*/
var flag = confirm("下面会出现两个按钮，确认和取消");
if (flag){
alert("你点了确定");
}else {
alert("你点了取消");
}
var str = prompt("请输出用户名");
alert(str);
获得标签对象
var ele = document.getElementById("open");
var newWindow;
//绑定事件
ele.onclick = function (){
newWindow = open("http://www.baidu.com");
}
var ele1 = document.getElementById("close");
ele1.onclick = function (){
newWindow.close();
}
var timeout = setTimeout(fun,2000);
clearTimeout(timeout);
function fun(){
alert("boom~~~");
}
var interval = setInterval(fun,2000);
clearInterval(interval);
function fun(){
alert("boom~~~");
}
window.document
</script>
</body>
（2）轮播图实例和小bug
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<img id = "img1" src="../img/g1.jpeg" width="100%">
<script>
/*轮播图思路
1.写更改图片的方法
2.调用更改图片的方法
3.每3秒
*/
var num = 1;
function fun(){
num ++;
if (num > 3){
num = 1;
}
var img = document.getElementById("img1");
//小bug
// Uncaught TypeError: Cannot set property 'src' of null
//原因是document.getElementById("img1")没有获取到元素对象
img.src = "../img/g"+num+".jpeg";
}
setInterval(fun,2000);
</script>
</body>
</html>
2.2.2Navigator 浏览器对象
不常用
2.2.3screen 显示器屏幕对象
不常用
2.2.4History 历史记录对象
（1）创建(获取)
window.history
history
（2）方法
back() 加载history列表中的前一个URL。
forward() 加载history 列表中的下一个URL。
go() 加载hisItory 列表中的某个具体页面。
参数：
正数：前进几个历史记录
负数：后退几个历史记录
相当于集成了back和forwork方法
（3）属性
length 返回当前窗口历史列表中的URL数量。
（4）实例
<body>
<!--<input id = "forword" type="button" value="前进">-->
<input id = "f" type="button" value="前进">
<a href="轮播图案列.html">后退实例</a>
<script>
// var f = document.getElementById("forword");
// f.onclick = function (){
// history.forward();
// }
var f1 = document.getElementById("f");
f1.onclick = function (){
history.go(1);
}
// var b = document.getElementById("back");
// f.onclick = function (){
// history.back();
// }
</script>
</body>
2.2.5Location 地址栏对象
（1）创建
（2）方法
reload() 重新加载当前文档。刷新
（3）自动跳转实例
<style>
/*
div这个标签是用来划分区域的，它是个块级元素block
span标签是个行内元素（行内元素就是在浏览器的一行上）比如span里面的元素不会换到下一行
*/
p{
text-align: center;
}
span{
color: #ff0000;
}
</style>
<body>
<p>
<span id = "time">5</span>秒之后，自动跳转到首页
</p>
<script>
/*
分析:
1.显示页面效果<p>
2.倒计时读秒效果实现
2.1定义一个方法,获取span标签，修改span标签体内容，时间--
2.2定义一个定时器,1秒执行一次该方法
3.在方法中判断时间如果<= 0，则跳转到首页
*/
var second = 5;
function fun(){
second --;
if (second <= 0){
location.href = "http://www.qq.com"
}
var time = document.getElementById("time");
time.innerHTML = second + "";
}
setInterval(fun,1000);
</script>
</body>
