1.BOM的定义
BOM： 浏览器对象模型（Browser Object Model）
BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。
2.BOM的组成部分
3.window对象常用方法
3.1 winow.confirm()
显示一个带有提示信息、确定和取消按钮的对话框
var flag = confirm("确认要删除此信息吗？");
if(flag){
alert("删除成功");
}else{
alert("你取消了删除");
}
3.2 winow.open()
除本身，再新建一个index 01.html 里面内容 我很快乐
<script type="text/javascript">
function one(){
window.open("index 01.html","_self");
}
</script>
================================
<input type="button" value="确认" onclick="one()" />
3.3 winow.prompt()
显示可提示用户输入的对话框
<script type="text/javascript">
function one(){
var flag = window.prompt("你快乐吗？");
if(flag){
alert("快乐啊");
}else{
alert("不快乐");
}
}
</script>
========================
<input type="button" value="确认" onclick="one()" />
确认就是快乐啊 取消就是不快乐
3.4 winow.alert()
显示带有一个提示信息和一个确定按钮的警示框
4.history对象
| back() |
加载history对象列表中的前一个URL,等价于history.go(-1) =>"浏览器后退"
| forward() |
加载 history对象列表中的下一个URL,等价于history.go(1)=>"浏览器前进"
| go() |
加载 history 对象列表中的某个具体URL
案例：
必须要写window.history.back 不能写window.back
demo01.html
<body>
<a href="index 02.html">快来点我</a>
<a href="javascript:window.history.forward()">前进</a>
<a href="javascript:window.history.go(1)">前进</a>
</body>
后两者等价 有时候浏览器有缓存就显示不管用，清除缓存
index01.html
<body>
<a href="demo01.html">好人</a>
<a href="javascript:window.history.back()">好人</a>
<a href="javascript:window.history.go(-1)">好人</a>
</body>
三者等价 但后面二个更好 第一个是html实现的 后面都是js实现的。
点过去就返回
区别就是当index点的时候，后面两个没效果，第一个有。
5.location对象
设置或返回完整的URL
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<a href="index 01.html">跳转</a>
<a href="javascript:window.location.href='index 01.html'">跳转</a> </body>
</html>
上面两者等价 第一是html写的 ，第二是 js 写的
index 01.html 内容 快乐
6.document对象（重点）
6.1 常用属性referrer (返回载入当前文档的URL)
referrer不管用
—2019 版VsCode 打开方式需注意
（建议使用Hbuilber打开）VsCode须安装 live Server
然后打开是 open with live Server
判断页面是否是链接进入
demo 01.html
<body>
<a href="index 03.html">跳转到index 03.html</a>
</body>
index 01.html
<script type="text/javascript">
var a = document.referrer;
alert("a:" + a);
if(a == ""){
alert("不是跳转进来的")
}else{
alert("跳转进来的");
}
</script>
<body>
index 03.html
</body>
如果用demo 01.html 打开 就有a 的地址 并且跳转进来的
如果用 index 03.html 打开 就没有然后 不是跳转进来的
6.2常用方法（以下三个方法背会）
|getElementById()| 返回对拥有指定id的第一个对象的引用|
|getElementsByName()| 返回带有指定名称的对象的集合|
|getElementsByTagName()| 返回带有指定标签名的对象的集合|
id是单独的 name是多个的
案例：
<body>
<p id = "a" name="a">单击按钮来改变这一段中的文本。</p>
<p name="b">单击按钮来改变这一段中的文本。</p>
<p>单击按钮来改变这一段中的文本。</p>
<button onclick="myFunction()">点我</button>
<script>
function myFunction(){
//alert(document.getElementsByTagName("p").length);
document.getElementById("a").innerHTML="快乐！！！！";
};
</script>
</body>
innerHTML == >替换文本
渲染由上到下 由左向右 script写在body下面更好
<p id = "a" name="a">单击按钮来改变这一段中的文本。</p>
<p name="b">单击按钮来改变这一段中的文本。</p>
<p>单击按钮来改变这一段中的文本。</p>
<script>
document.getElementById("a").innerHTML="快乐！！！！";
</script>
在body上面写 script
<script>
// html渲染是上到下渲染的，
//所以获取不到id为a的p标签，如果希望能渲染得到，
// 需要加window.onload = function()
//{ document.getElementById("a").innerHTML="快乐！！！！";},即可。
//window.onload 方法 用于网页加载完毕后 立刻执行的操作
document.getElementById("a").innerHTML="快乐！！！！";
</script>
</head>
<body>
<p id = "a" name="a">单击按钮来改变这一段中的文本。</p>
<p name="b">单击按钮来改变这一段中的文本。</p>
<p>单击按钮来改变这一段中的文本。</p>
</body>
<body>
<p id = "a" name="b">单击按钮来改变这一段中的文本。</p>
<p name="b">单击按钮来改变这一段中的文本。</p>
<p >单击按钮来改变这一段中的文本。</p>
<button onclick="myFunction()">点我</button>
<button onclick="myFunction2()">点我</button>
<script>
function myFunction(){
alert(document.getElementsByName("b").length);
};
function myFunction2(){
alert(document.getElementsByTagName("p").length);
};
</script>
</body>
结果 第一个 2 第二个 3
6.3全选功能(极其重要！)
利用checked 默认的 机制。
案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
function checkFather(){
// alert(2); 调式能用
var father = document.getElementById("father");
//获取son列表变量
var sons = document.getElementsByName("son");
for(var i=0;i<sons.length;i++){
sons[i].checked = father.checked;
}
}
function checkSon(){
var father = document.getElementById("father");
var sons = document.getElementsByName("son");
//1.定义一个变量，设置为状态标记
var flag = true;
//2.循环遍历儿子的DOM列表元素
for (var i = 0; i < sons.length; i++) {
//3.判断但凡在儿子的DOM列表元素中有一个未打钩，
if (sons[i].checked == false) {
flag = false;
//flag设置为false，代表的含义就是此时此刻将父级元素设置为未打勾的状态
break;
//但凡儿子元素中有一个未打勾，父级元素直接为未打勾的状态，并且循环直接退出
}
}
//4.如果儿子的DOM列表元素中都是打勾的打勾状态，则父级元素的状态为打勾状态
father.checked=flag;
}
</script>
</head>
<body>
全选:<input type="checkbox" id="father" onclick="checkFather()" /><br />
<input type="checkbox" name="son" onclick="checkSon()"/><br />
<input type="checkbox" name="son" onclick="checkSon()" /><br />
<input type="checkbox" name="son" onclick="checkSon()" /><br />
<input type="checkbox" name="son" onclick="checkSon()" /><br />
</body>
</html>
7.JavaScript内置对象
7.1 Date对象
var date=new Date(); //返回当前日期和时间
| getHours()| 返回Date对象的小时数，其值介于0～23之间 |
| getMinutes()| 返回Date对象的分钟数，其值介于0～59之间 |
| getSeconds()| 返回Date对象的秒数，其值介于0～59之间 |
<script type="text/javascript">
var date = new Date();
var year = date.getFullYear();
var month = date.getMonth() + 1;
//月份是从0开始算的
var day = date.getDate();
var hours = date.getHours();
var min = date.getMinutes();
var seconds = date.getSeconds();
document.write(year + "年" + month + "月" + day + "日" + hours +"时" + min +"分" + seconds +"秒");
</script>
7.2 Math对象
<script type="text/javascript">
document.write(Math.ceil(25.1)+" ");
//向上取整
document.write(Math.floor(26.9)+" ");
//向下取整
document.write(Math.round(24.5)+" ");
//四舍五入
document.write(Math.random());
//随机
</script>
三种刷新当前页面方法：（摘录）
reload() 方法;
reload()方法用于刷新当前文档。
reload() 方法类似于你浏览器上的刷新页面按钮。
location.reload();
replace() 方法;
replace() 方法可用一个新文档取代当前文档。。
window.location.replace(“http://www.runoob.com”)
页面自动刷新;
window.location.replace(“http://www.runoob.com”)
页面自动刷新：把如下代码加入区域中
----2021.09.30&10.06
8万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
