二、BOM 操作

BOM 是 JavaScript 的组成部分之一，它提供了独立于内容与浏览器窗口进行交互的对象

可以实现与 HTML 的交互

BOM 的作用是将相关的元素组织包装起来，提供给程序开发人员使用，降低开发者的劳动量

2.1 Windows 对象

2.1.1 window 对象的常用属性

• 属性的基本语法格式

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

• window 对象的常用属性:

• 示例

window.location="https://www.bilibili.com/";
//表示页面跳转到此网址
screen.width='像素(px)';
//表示返回浏览器屏幕的宽度，单位像素(px)

2.1.1 window 对象的常用方法

• window 对象的常用方法的基本语法

window.方法名();

• window 对象的常用方法

window 对象时全局对象，所以在使用 window 对象的属性和方法时，window 可以省略不写

例如，之前直接使用 alert() 方法，相当于写成了 window.alert()

1、window.open() 方法

• 打开一个新的浏览器窗口，加载给定 URL 所指的文档
• 语法格式如下

window.open("弹出窗口的 URL","指定target属性或窗口的名称","窗口的特征")

• 窗口特征常用的属性

2.2 history 对象

窗口打开的那一刻，history 对象就保存着用户上网的历史记录

2.2.1 history 对象常用属性和方法

• 示例

//判断用户是否一开始就打开了一个页面
if(history.length==0){
    //用户打开窗口的第一个页面
}
//返回到上一个页面 前进一页
history.go(-1);
history.back();
//返回到下一个页面 后退一页
history.go(1);
history.forward();

• go() 方法
  • go() 方法的参数可以是一个是数字，也可以是字符串
  • 参数如果是数字，则代表前进几页，或后退几页，前进为整数，后退为负数
  • 参数如果是字符串，则代表跳转到历史记录中指定的网页，如果历史记录中不包含此网页，则不会跳转

2.3 location 对象

location 对象提供了与当前窗口中加载文档有关的信息，以及一些导航功能

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

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

• href 除了可以获取 URL 以外，也可以通过 href=“网址” 的方式来进行网页间的跳转
• replace(“新的网页地址”) 也可以实现网页间的跳转

2.4 document 对象

document 对象代表了整个 HTML 文档，可以用来访问页面中的所有元素

2.4.1 document 对象常用属性

• referrer 属性，返回通过1网页打开的2网页的 2网页的URL，如果没有通过任何网页打开，则为空

2.4.2 document 对象常用方法

• getElementById() 方法一般用于访问 div、图片、表单元素、网页标签等，但要求访问对象的 id 是唯一的
• getElementByName() 方法，访问具有 name 属性的元素，由于一个文档中的 name 属性可能不唯一，所以 getElementByName() 方法一般用于访问一组相同 name 属性的元素，如单选按钮、复选框
• getElementByTagName() 方法通常按标签来访问页面元素，一般用于访问一组相同的元素，如一组 input 标签，一组图片等
• innerHTML 属性
  • 几乎所有的 HTML 元素都有的属性
  • 字符串类型，用来设置或获取当前对象的开始标签和结束标签之间的 HTML

2.5 JavaScript 定时函数

JavaScript 中，定时函数包括 超时调用 和 间歇调用

超时调用是在指定的时间过后执行代码

定时调用则是每个指定的时间就执行一次代码

2.5.1 超时调用

• 超时调用需使用 window 对象的 setTimeout() 方法
• 它接收两个参数：要执行的代码和以毫秒表示的时间
• 语法格式如下

window.setTimeout("执行代码",毫秒);

• 第一个参数可以是一个包含 JavaScript 代码的字符串，也可以是一个函数
• 调用 setTimeout() 方法，会返回一个数值的 ID，表示这个超时调用
• 超时调用 ID 是计划执行代码的唯一标识，可以用它来取消超时调用
• 取消超时使用 clearTimeout() 方法，并且将相应的超时调用 ID 作为参数传递给他
• 取消超时调用，示例

//设置超时调用
var timeoutId=setTimeout("function(){alert('你好')}",1000)
//取消超时调用
clearTimeout(timeoutId)

• 在还没有执行超时调用时提前取消超时调用，就不会再执行所设置的超时调用

2.5.2 间歇调用

• 间歇调用会按照指定的时间间隔重复的执行代码，直至间歇调用被取消或者页面被卸载
• 间歇调用使用 setInterval() 方法，参数与超时调用方一致
• 调用 setInetval() 方法同样会返回一个间歇调用 ID，用于取消间歇调用 ID
• 取消间歇调用使用 clearInterval() 方法
• 取消间歇调用的重要性远远高于取消超时调用，因为在不加干涉的情况下，间歇调用会一直运行，直到页面被卸载

2.6 JavaScript 内置对象

在 JavaScript 中，系统的内置对象有 String 对象、Array 对象、Date 对象和 Math 对象

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

2.6.1 Array 对象

1、数组的创建及赋值

• JavaScript 中的数组也是具有一个或多个值的集合
• 用一个名称存储一系列的值，用下标区分数组中的每个值，数组的下标从 0 开始
• 数组的创建及赋值 示例

//创建数组
var 数组名=new Array(数组长度)
//为数组元素赋值
数组名.[下标]=元素1;
//边创建边赋值数组
var 数组名=new Array(元素1,元素2,元素3,...)
var 数组名=[元素1,元素2,元素3,...]                  
//访问数组元素
数组名.[下标]

2、数组的常用属性和方法

• 数组常用的属性和方法

• join() 方法

  • 通过一个指定的分隔符，把数组元素放在一个字符串中
  • 语法格式如下

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

2.6.2 Date 对象

• Date 对象是在早期 Java 中的 java.util.Date 类基础构建的

• Date 对象保存的日期能够精准到 1970年1月1日之后的 100000000 年

• 创建一个日期对象 语法格式如下

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

• 如果没有参数，则表示当前日期和时间

• 参数是字符串格式 “MM DD,YYYY,hh:mm:ss” ，表示日期和时间

• Date 有参无参示例

//无参 获取当前时间
var today=new Date();
//有参 自定义时间
var today=new Date("July 15,2020,10:07:42");

• Date 对象的常用方法

• 获取星期几使用 getDay()，0 表示周日，1表示周一，6 表示周六

2.6.3 Math 对象

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

• random() 方法返回的随机数包括 0，不包括 1
• 生成范围的随机数 示例

var iNum=Math.floor(最小数+(最大数-最小数+1)*Math.random());
//例如 生成一个 25-50 的随机数
var iNum=Math.floor(25+(50-25+1)*Math.random())