一、概述
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）创建
- window.location
- location
（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>
