JavaScriptBOM操作详解：窗口交互与浏览器对象-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_72166275/article/details/130607869

BOM 操作

3.1 window 对象

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

3.1.1 window 对象的常用属性

在 JavaScript 中。
语法

window.属性名="属性值";

window 对象的常用属性如下:
- history：用户访问过的统一资源定位符(Uniform Resource Locator，URL)信息。
- location：当前URL信息。
- screen：只读属性，包含客户端显示屏幕上的信息。
window.location=“淘宝网站 URL 地址”,表示页面跳转至淘宝网站主页；
screen.width 表示返回浏览器屏幕的宽度，单位为像素(px)。

3.1.2 window 对象的常用方法

在 JavaScript 中，window 对象的常用方法的基本语法格式：

window.方法名();

window 对象的常用方法
- alert()：显示一个带有提示信息和一个"确定"按钮的警示对话框。
- confirm()：显示一个带有提示信息、"确定"和"取消"按钮的对话框。
- prompt()：显示可提示用户输入的对话框。
- open()：打开一个新的浏览器窗口，加载给定 URL 所指定的文档。
- close()：关闭浏览器窗口。
- setInterval()：间隔指定的毫秒数不停地执行指定的代码。
- clearInterval()：用于停止 setInterval() 方法执行的函数代码。
- setTimeout()：在指定的毫秒 (ms) 数后执行指定的代码。
- clearTimeout()：用于停止执行 setTimeout() 方法的函数代码。
由于 window 对象是全局对象，所以在使用 window 对象的属性和方法时，window 可以省略不写。

1.open()

语法

window.open([URL,name,specs,replace]);

URL 为可选参数，打开指定的页面 URL。如果没有指定 URL，则打开一个新的空白窗口。
name 为可选参数，指定 target 属性或窗口的名称。
specs 为可选参数，标识窗口特征属性。
replace 为可选参数，指定装载到窗口的 URL 在窗口的浏览历史中是创建一个新条目。

窗口特征属性

属性	描述	默认值
channelmode=yue\|no\|1\|0	是否使用剧院模式显示窗口	默认为no
directories=yue\|no\|1\|0	是否添加目录按钮	默认为yes
fullscreen=yes\|no\|1\|0	是否使用全屏模式显示浏览器。处于全屏模式的窗口必须同时处于剧院模式	默认为no
width=pixels	窗口文档显示区的宽度，以 px 计	——
height=pixels	窗口文档显示区的高度，以 px 计	——
left=pixels	窗口的 x 坐标，以 px 计	——
location=yes\|no\|1\|0	是否显示地址字段	默认为yes
menuber=yes\|no\|1\|0	是否显示菜单栏	默认为yes
resizable=yes\|no\|1\|0	窗口是否可调节尺寸	默认为yes
scrollbars=yes\|no\|1\|0	是否显示滚动条	默认为yes
status=yes\|no\|1\|0	是否添加状态栏	默认为yes
titlebar=yes\|no\|1\|0	是否显示标题栏	默认为yes
toolbar=yes\|no\|1\|0	是否显示浏览器的工具栏	默认为yes
top=pixels	窗口的 y 坐标	——

2.close()

用于关闭浏览器窗口
语法

window.close();

示例
使用 open() 方法在 index页面打开 demo1 页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>open()和close()的应用</title>
</head>
<body>
<h2>我是 index 页面</h2>
<button onclick="openNewpage()">点我打开新页面</button>
<button onclick="closePage()">点我关闭 index 页面</button>
<script type="text/javascript">
  function openNewpage(){
    window.open("https://www.diyifanwen.com/fanwen/bianlunsai/3056190.html");

  }
  function closePage(){
    window.close();
  }
</script>
</body>
</html>

3.2 history 对象

history 对象代表着浏览器的访问历史记录。
由于 history 对象是 window 对象的属性，所以每个浏览器窗口、每个标签页，都有自己的 history 对象与特定的 window 对象关联。
出于安全方面的考虑，开发者无法得知用户浏览过得 URL 。不过，借由用户访问过的列表，同样可以在不知道实际的URL的情况下前进和后退。

3.2.1 histpry 对象的常用属性和方法

类别	名称	说明
属性	length	返回历史记录列表中的网址数
方法	go()	加载 history 列表中的某个具体页面
	forward()	加载 history 列表中的下一个 URL
	back()	加载 history 列表中的前一个 URL

history 对象常用的 length 属性，保存着历史记录的数量。这个户数量包括所有历史记录。
所有前进和后退的记录，history .length 等于0.

if(history.length==0){
    //这应该是影虎打开窗口的第一个页面
}

使用 go() 方法可以在用户的历史记录中任意跳转，可以向前也可以向后。
值为整数表示向前跳转，值为负数标识向后跳转。

//前进一页
history.go(1);
//后退一页
history.go(-1);
//前进两页
history.go(2);

也可以给 go() 方法传递一个字符串参数，参数是链接位置，浏览器会跳转到历史记录中包含该字符串的第一个位置。

//跳转到最近的 home.com 页面
history.go("home.com");
//跳转到最近的 list.com 页面
history.go("list.com");

还可以是用两个简写发那个发 forward() 和 back() 代替 go() 方法。

//前进一页
history.forward();
//后退一页
history.back();

history 对象长用于创建自定义的"前进" 和 “后退” 按钮，以及检测当前页面是不是用户历史记录中的第一个页面。

3.3 location 对象

location 对象是比较有用的 BOM 对象之一，它提供了与当前窗口中加载文档有关的信息，还提供了一些导航工能。

3.3.1 location 对象的常用属性和方法

location 对象的用处不仅表现在它保存着当前文档的信息，还表现它将 URL 解析为独立的片段，让开发者可以通过不同的属性访问这些片段。

类别	名称	说明
属性	host	返回服务器名称和端口号
	hostname	返回不带端口号的服务器明恒
	href	返回当前加载页面的完整 URL
方法	reload()	重新加载当前文档
	replace()	用新的文档替换当前文档

3.3.2 location 对象的使用

location 对象常用的属性时 href，通过对此属性设置不同的网址，从而达到跳转功能。

3.4 document 对象

document 对象既是 window 对象的一部分，又代表了整个 HTML 文档，可用来访问页面中的所有元素。
在使用 document 对象时，除要符合各浏览器的标准外，也要符合 W3C(万维网联盟)的标准。

3.4.1 document 对象的常用方法

方法	描述
getElementById()	返回对拥有指定 id 的第一个对象的引用
getElementByName()	返回带有指定名称对象的集合
getElementByTagName()	返回带有指定标签名的对象的集合
write()	向文档写文本、HTML 表达式或 JavaScript 代码

getElementById() 方法一般用于访问 div、图片、表单元素、网页标签等，但要求访问对象的 id 是唯一的。
getElementByName() 方法与 getElementById() 方法相似，但它访问的是具有 name 属性的元素。
getElementByTagName() 方法通常按标签来访问页面远古三，一般用于发那个文一组相同的元素，如一组

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>完善当当购物车页面</title>
    <link type="text/css" rel="stylesheet" href="css/cartStyle.css" />
    <script type="text/javascript" src="js/shopping.js"></script>
</head>
<body>

<div class="content">
    <div class="logo">
        <img src="images/dd_logo.jpg"><span onclick="closes()">关闭</span>
    </div>
    <div class="cartList">
        <ul>
            <li>¥<input type="text" name="price" value="21.90"></li>
            <li><input type="button" name="minus" value="-" onclick="All_jian(0)"><input type="text" name="amount" value="0"><input type="button" name="plus" value="+" onclick=" All_jia(0)"></li>
            <li id="price0">¥21.90</li>
            <li><p onclick="shouCang()">移入收藏</p><p onclick="deletea()">删除</p></li>
        </ul>
        <ul>
            <li>¥<input type="text" name="price" value="24.00"></li>
            <li><input type="button" name="minus" value="-" onclick="All_jian(1)"><input type="text" name="amount" value="1"><input type="button" name="plus" value="+" onclick=" All_jia(1)"></li>
            <li id="price1">¥24.00</li>
            <li><p onclick="shouCang()">移入收藏</p><p onclick="deletea()">删除</p></li>
        </ul>
        <ol>
            <li id="totalPrice"></li>
            <li><span onclick="settle()">结 算</span></li>
        </ol>
    </div>
</div>
</body>
</html>

function deletea() {
    var finm =confirm("确认要删除吗?");
    if(finm==true)
    {
        alert("删除成功");
    }else if(finm==false){
        alert("已取消删除");
    }
}
function shouCang(){
    var finm =confirm("确认要收藏吗?");
    if(finm==true)
    {
        alert("收藏成功");
    }else if(finm==false){
        alert("已取消收藏");
    }
}
function closes()
{
    var finm =confirm("确认要关闭吗?");
    if(finm==true)
    {
        this.close();
    }
}
function settle()
{
    alert("成功结账");
}

function All_jian(num){
    var amount=parseInt( document.getElementsByName("amount")[num].value-1);
    var price=parseFloat( document.getElementsByName("price")[num].value);
    if(amount<0)
    {
        alert("不能减了，没个球了");
    }else{
        document.getElementsByName("amount")[num].value=amount;
       document.getElementById("price"+num).innerHTML="¥"+amount*price;
        sum()
    }
}
function All_jia(num){
    var amount=parseInt( document.getElementsByName("amount")[num].value)+1;
    var price=parseFloat( document.getElementsByName("price")[num].value);
        document.getElementsByName("amount")[num].value=amount;
        document.getElementById("price"+num).innerHTML="¥"+amount*price;
    sum()
}
function sum(){
    var price0=document.getElementById("price0").innerHTML;
    var price1=document.getElementById("price1").innerHTML;
    price0=parseFloat(price0.substring(1));
    price1=parseFloat(price1.substring(1));
    document.getElementById("totalPrice").innerHTML="￥"+(price0+price1);
}

innerHTML 是几乎所有的 HTML 元素都有的属性。它是一个字符串，用来设置或获取当前对象的开始标签和结束标签之间的 HTML。

3.5 JavaScript 定时函数

在 JavaScript 中，定时函数包括超市调用和间歇调用，
- 定时函数：是指在指定的时间过后执行代码。
- 间歇调用：是每隔指定的时间就执行一次代码。

3.5.1 超时调用

超时调用需要使用 window 对象的 setTimeout() 方法，它接收两个参数；
- 第一个参数：是包含 JavaScript 代码的字符串，也可以是一个函数；
- 第二个参数：以毫秒标识的时间。

//不推荐使用
setTimeout("alert('你好')",1000);

//推荐使用
setTimeout(function(){
    alert('你好!');
},1000)

字符串可能会导致性能损失，所以不推荐以字符串作为第一个参数。
第二个参数是表示等待多长时间的毫秒数。
调用 setTimeout() 方法，该方法会返回一个数值 ID，表示超时调用。
可以调用 clearTimeout() 方法将相应的超时调用 ID 作为参数传递给它。

//设置超时调用
var timeoutID=setTimeout(function(){
                         alert('你好');
                         },10000);
clearTimeout(timeoutID);

只要是在指定的时间尚未过去之前调用 clearTimeout() 方法，就可恶意完全取消超时调用。

3.5.2 间歇调用

间歇调用与超时调用类似，只不过它会按照指定的时间间隔重复执行代码，直至间歇调用被取消或页面被卸载。
- 设置间歇调用的方法是 setInterval(),接受的参数与 setTimeout() 方法相同。

setIntercal(function(){
    alert('你好');
},1000)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>间歇调用的使用</title>
</head>
<body>
<script type="text/javascript">
  var num=0;
  var max=10;
  var intervalId=null;
  function auto(){
    num++;
    //如果执行次数达到了 max 设定的值，则取消后续尚未执行的调用
    if(num==max)
    {
      clearInterval(intervalId);
      alert("Done");
    }
  }
  intervalId= setInterval(auto,1000);
</script>

</body>
</html>

在这里插入图片描述

变量 num 每秒递增一次，当递增到最大值时就会取消先前设定的间歇调用，并弹出提示框显示"Done"。

3.6 JavaScript 内置对象

在 JavaScript 中，系统的内置对象有 String 对象、Array 对象、Date 对象和 Math 对象等。
- String 对象：用于支持对字符串的处理。
- Array 对象：用于在单独的变量名中存储一系列的值。
- Date 对象：用于操作日期和时间。
- Math 对象：它包含若干数字常量和函数，使我们有能力执行常用的数学任务。

3.6.1 Array 对象

同 Java 中的数组一样，JavaScript 中的数组也是具有一个或多个值的集合。
JavaScript 中的数组也需要县创建、赋值、在访问数组元素。

1.创建数组

语法

var 数组名称=new Array(size);

其中 new 使用率来创建数组的关键字；
Array 表述数组的关键字；
size 表示数组中可存放的元素总数，因此 size 用正整数来表示。

为数组元素赋值

语法

var fruit=new Array("apple","orange","banana","peach");

也可以分别数组元素赋值

var fruit=new Array(4);
fruit[0]="apple";
fruit[1]="orange";
fruit[2]="banana";
fruit[3]="peach";

还可以用中括号 ([]) 来定义。
语法

var fruit=["apple","orange","banana","peach"];

3.访问数组

可以通过数组的名称和下标直接访问数组的元素。
访问数组的标识形式：数组名 [下标]。

4.数组的常用属性和方法

数组是 JavaScript 中的一个对象，它有一组属性和方法。

类别	名称	描述
属性	length()	设置成返回数组中元素的数目
方法	join()	把数组中的元素放入一个字符串，通过指定的分隔符进行分隔
	sort()	对数组排序并返回数组
	push()	向数组末尾添加一个或多个元素，并返回新的长度
	forEach()	遍历数组，forEach() 方法不会直接修改原始数组，但是回调函数可能会修改

length 属性

数组的 length 属性用于返回数组中元素的个数，返回值为整数。
语法

var score=new Array(指定数组长度);
score.length;//数组长度

join() 方法

join() 方法通过一个指定的分隔符把数组元素放在字符串中，
语法

数组对象.join(分隔符);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>数组的应用</title>
</head>
<body>
<script type="text/javascript">
    var fruit="apple,orange,peach,banana";
    var arrList=fruit.split(",");
    var str=arrList.join("-");
    document.write("分隔前:"+fruit+"<br/>");
    document.write("使用, 拆分后:");
    arrList.forEach(function (value,index,array){
        document.write("第"+index+"个元素的值:"+value+"<br/>");
    })
    document.write("使用 - 重新链接后:"+str)
</script>
</body>
</html>

在这里插入图片描述

forEach() 方法

forEach() 方法可以为数字执行循环操作。
语法

array.forEach(callBackFn[,thisArg]);

参数说明
- array：必需参数，一个数组。
- callBackFn：必需参数，最多可以接受三个参数的函数。
- thisArg：可选参数，callBackFn 函数中的 this 可以引用的对象。
callBackFn 语法

function callBackFn(value,index,array){
    
}

参数说明
- value：数组元素的值。
- index：可选参数，数组元素的索引。
- array：可选参数，当前被遍历的数组。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>forEach() 方法使用</title>
</head>
<body>

<script type="text/javascript">
    var arr=[2,3,4,10,7,8];
    arr.sort();
    arr.forEach(forEach);
    function forEach(value,index,array){
        document.write("第"+index+"个元素的值:"+value+"<br/>");
    }
</script>
</body>
</html>

在这里插入图片描述

3.6.3 Date对象

要创建一个日期对象，需要使用 new Date() 方法创建一个实例。
语法

var 日期实例=new Date(参数);

日期实例是存储 Date 对象的变量。
- 如果没有参数，则表示当前日期和时间，如"var today=new Date();"。
- 参数是字符串格式 “MM DD,YYYY,hh:mm:ss”，表示日期时间。如"var today=new Date(“july15,2020,10:07:42);”。

1.Date 对象的常用方法

方法	说明
getDate()	返回 Date 对象的一个月中的每一天，其值为 1~31
getDay()	返回 Date 对象的星期中的每一天，其值为 0~6
getHours()	返回 Date 对象的小时数，其值为 0~23
getMinutes()	返回 Date 对象的分钟数，其值为 0~59
getSeconds()	返回 Date 对象的描述，其值为 0~59
getMonth()	返回 Date 对象的月份，其值为 0~11
getFullYear()	返回 Date 对象的年份，其值为 4 位数
getTime()	返回自某一时刻（1970年1月1日）以来的毫秒数

注意
- getFullYear() 方法常用于获取年份，返回4位数的年份。
- 获取星期几使用 getDay()，0表示周日，1表示周一，6表示周六。
- 各部分时间表示的范围：除 getDate() 外，其他均从 0 开始计算。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="muclock"></div>
<script type="text/javascript">
    function disotime(){
        var toady=new Date();//获得当前时间
        var hh=toady.getHours();//获得小时
        var mm=toady.getMinutes();//获得分
        var ss=toady.getSeconds();//获得秒
        document.getElementById("muclock").innerHTML="现在时间是:"+hh+":"+mm+":"+ss;
    }
    disotime();
</script>
</body>
</html>

在这里插入图片描述

3.6.5 Math 对象

Math 对象提供了许多与数学相关的功能，它是 JavaScript 的一个全局对象，不需要创建，直接作为对象使用就可以调用其属性和方法。

1.Math 对象的常用方法

方法	说明	示例
ceil()	对数进行上舍入	Math.ceil(25.5);返回 26 Math.cil(-25.5);返回-25
floor()	对数进行下舍入	Math.floor(25.5)；返回25 Math.floor(-25.5)；返回26
round()	把数四舍五入为最接近的数	Math.round(25.5)；返回26 Math.round(-25.5)；返回-25
random()	返回 0~1 中的随机数	Math.random()；例如，0.35643

random() 方法返回的随机数包括0,不包括1，且都是小数。
如果想选择一个 1~100中的整数(包括 1 和100)

var iNum=Math.floor(Math.random()*100+1);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
本次选择的颜色是:<span id="color"></span>
<input type="button" value="请选择颜色" onclick="selColor()">
<script type="text/javascript">
    function selColor(){
        var color=new Array("红色","绿色","蓝色","黄色","橙色");
        var num=Math.ceil(Math.random()*5)-1;
        document.getElementById("color").innerHTML=color[num];
    }

</script>
</body>
</html>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-9GvFrIhj-1683717112590)(img/BOM/image-20230414213104893.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-genlrDfw-1683717112590)(img/BOM/image-20230414213120548.png)]
0中的整数(包括 1 和100)

var iNum=Math.floor(Math.random()*100+1);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
本次选择的颜色是:<span id="color"></span>
<input type="button" value="请选择颜色" onclick="selColor()">
<script type="text/javascript">
    function selColor(){
        var color=new Array("红色","绿色","蓝色","黄色","橙色");
        var num=Math.ceil(Math.random()*5)-1;
        document.getElementById("color").innerHTML=color[num];
    }

</script>
</body>
</html>