JavaScript操作BOM对象(一)

BOM：浏览器对象模型（Browser Object Model）：

浏览器对象模型（BOM ：Browser Object Model）是JavaScript的组成之一，它提供了独立于内容与浏览器窗口进行交互的对象，使用浏览器对象模型可以实现与HTML的交互。它的作用是将相关的元素组织包装起来，提供给程序设计人员使用，从而降低开发人员的劳动量，提高设计Web页面的能力。BOM是一个分层结构

使用BOM通常可实现如下功能：

弹出新的浏览器窗口
移动、关闭浏览器窗口以及调整窗口的大小
页面的前进、后退

windows对象（属性与方法）

1、属性

属性名称	说明
history	有关客户访问过的URL的信息
location	有关当前 URL 的信息

语法结构：

window.属性名= “属性值”

代码示例：

    <script type="text/javascript">
        function newLocation(){
    
    
            window.location="http://www.baidu.com";//类似于超链接
          }
   </script>

2、方法

方法名称	说明
prompt( )	显示可提示用户输入的对话框
alert( )	显示带有一个提示信息和一个确定按钮的警示框
confirm( )	显示一个带有提示信息、确定和取消按钮的对话框
close( )	关闭浏览器窗口
open( )	打开一个新的浏览器窗口，加载给定 URL 所指定的文档
setTimeout( )	在指定的毫秒数后调用函数或计算表达式，理解为单次定时器
setInterval( )	按照指定的周期（以毫秒计）来调用函数或表达式，理解为多次定时器
clearInterval	理解为清除多次定时器
clearTimeout	理解为清除单次定时器

注意：window对象是全局对象，所以在使用window对象的属性和方法时，window可以省略
例如：直接使用的alert(),相当于写成window.alert();

confirm( )：将弹出一个确认对话框

代码示例：

<script type="text/javascript">
	var flag=confirm("确认要删除此条信息吗？");
	if(flag==true)
	alert("删除成功！");
	else
	alert("你取消了删除");
</script>

prompt( )：显示可提示用户输入的对话框

代码示例：

<script>
        prompt("请输入需要打印的行数");
</script>

alert( )：显示带有一个提示信息和一个确定按钮的警示框

代码示例：

<script>
        alert("你好!!!");
</script>

close( )：关闭浏览器窗口

代码示例：

<span onclick='javasript:window.close()'>点击我关闭当前页面</span>

open( )：打开一个新的浏览器窗口，加载给定 URL 所指定的文档

在这里插入图片描述
窗口特征：

属性名称	说明
height、width	窗口文档显示区的高度、宽度。以像素计
left、top	窗口的x坐标、y坐标。以像素计
toolbar=yes	是否显示浏览器的工具栏。黙认是yes
scrollbars=yes no l 1 l 0	是否显示浏览器的工具栏。黙认是yes
scrollbars=yes no l 1 l 0	是否显示滚动条。黙认是yes
location=yes no l 1 l 0	是否显示地址地段。黙认是yes
status=yes no l 1 l 0	是否添加状态栏。黙认是yes
menubar=yes no l 1 l 0	是否显示菜单栏。黙认是yes
resizable=yes no l 1 l 0	窗口是否可调节尺寸。黙认是yes
titlebar=yes no l 1 l 0	是否显示标题栏。黙认是yes
fullscreen=yes no l 1 l 0	是否使用全屏模式显示浏览器。黙认是no。处于全屏模式的窗口必须同时处于剧院模式

代码示例：

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script >
        function showNewWin(){
    
    
            window.open("newsWin.html","","width=800,height=400");
        }
    </script>
</head>
<body>
    <button onclick="showNewWin();">弹出一个新窗口</button>
   
</body>

setTimeout()，clearTimeout():单次定时器与清除单次定时器

语法：

setTimeout(“调用的函数”,等待的毫秒数)

代码示例：

<div>
 <input type="button" value="删除" onclick="Delete();">
 <input type="button" value="保留当前状态" onclick="UnDelete();">
 <div id = "status"></div>
 </div>
 <script>
 function Delete() {
    
    
  document.getElementById("status").innerText = "已删除";
  t1 = setTimeout(Clearstatus,1500);
 }
 function Clearstatus() {
    
    
  document.getElementById("status").innerText = "";
 }
 function UnDelete() {
    
    
  clearTimeout(t1); //清除完定时器，他会一直显示
 }
 </script>

setInterval()多次定时器，clearInterval()清除多次定时器

代码示例：

<input type="button" value="Interval" onclick="Interval();">
<input type="button" value="StopInterval" onclick="StopInterval();">
 <script>
 function Interval() {
    
    
  s1 = setInterval(function () {
    
    
  console.log(123) //持续输出123
  },500);
  s1 = setInterval(function () {
    
    
  console.log(123)
  },500);
 }
 function StopInterval() {
    
    
  clearInterval(s1); //清除一个多次定时器
 }
 </script>

confirm( )与alert ( )、 prompt( )区别：

alert( )：一个参数，仅显示警告对话框的消息，无返回值，不能对脚本产生任何改变

prompt( )：两个参数，输入对话框，用来提示用户输入一些信息，单击“取消”按钮则返回null，单击“确定”按钮则返回用户输入的值，常用于收集用户关于特定问题而反馈的信息

confirm()：一个参数，确认对话框，显示提示对话框的消息、“确定”按钮和“取消”按钮，单击“确定”按钮返回true，单击“取消”按钮返回false，因此与if-else语句搭配使用

history对象：

常用方法：

名称	说明
back( )	加载 history 对象列表中的前一个URL
forward( )	加载 history 对象列表中的下一个URL
go( )	加载 history 对象列表中的某个具体URL

代码示例：

<body>
    <h1>我是内容</h1>
    <button onclick="javascript:history.back();">history.back</button>
    <button onclick="javascript:history.forward();">history.forward</button>
    <button  onclick="javasript:history.go(-1)">history.go</button>
    <button  onclick="javasript:history.go(1)">history.go</button>
</body>

这里思考个问题：为什么一般都用javascript:history方法来跳而不直接用超链接跳呢？
供如下代码给大家思考;

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        document.write(window.location.host+"<br/>"+location.hostname+"<br/>"+location.href);
        function goSite(){
    
    
            var number = Math.random();//产生一个0~1之间的随机数
            if(number>0.5){
    
    
                //https://www.w3school.com.cn/jsref/jsref_random.asp
                location.href='http://www.baidu.com'
            }else{
    
    
                location.href='http://www.qq.com'
            }
        }

    </script>
</head>
<body>
    <a href="javascript:goSite()">跳转1111</a>
    <a href="http://www.baidu.com">跳转2222</a>
</body>
</html>

back与forward的关系：
在这里插入图片描述

location对象：

常用属性：

名称	说明
host	设置或返回主机名和当前URL的端口号
hostname	设置或返回当前URL的主机名
href	设置或返回完整的URL

代码示例：

 <script>
        document.write(window.location.host+"<br/>"+location.hostname+"<br/>"+location.href);
 </script>

常用方法：

名称	说明
replace()	用新的文档替换当前文档
reload()	重新加载当前文档

代码示例：

<a href="javascript:location.reload()">刷新本页</a>
<a href="javascript:location.replace('http://www.baidu.com')">替换当前文档</a>