二、JS02 BOM操作

二、BOM 操作

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

可以实现与 HTML 的交互

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

2.1 Windows 对象

2.1.1 window 对象的常用属性

• 属性的基本语法格式

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

• window 对象的常用属性:

属性名	作用
history	用户访问过的统一资源定位符信息
location	当前 URL 信息
screen	只读属性，包含客户端显示屏幕上的信息

• 示例

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

2.1.1 window 对象的常用方法

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

window.方法名();

• window 对象的常用方法

方法名	作用
alert()	显示一个带有提示信息和一个 “确定” 按钮的警示对话框
confirm()	显示一个带有提示信息，“确定” 和 “取消” 按钮的对话框
propmt()	显示可提示用户输入的对话框
open()	打开一个新的浏览器窗口，加载给定 URL 所指的文档
colse()	关闭浏览器窗口
setInertval()	间隔指定的毫秒数不停地执行指定的代码
clearInterval()	用于停止 setInertval() 方法执行的函数代码
setTimeout()	在指定的毫秒数后执行指定的代码
clearTimeout()	用于停止执行 setTimeout() 方法的函数代码

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

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

1、window.open() 方法

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

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

• 窗口特征常用的属性

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

2.2 history 对象

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

2.2.1 history 对象常用属性和方法

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

• 示例

//判断用户是否一开始就打开了一个页面
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 对象常用的属性和方法

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

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

2.4 document 对象

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

2.4.1 document 对象常用属性

属性	描述
referrer	属性返回载入当前文档的来源文档的URL
URL	返回当前文档的 URL

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

2.4.2 document 对象常用方法

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

• 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、数组的常用属性和方法

• 数组常用的属性和方法

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

• 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 对象的常用方法

方法	说明
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日）以来的毫秒数

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

2.6.3 Math 对象

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

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

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

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