JavaScript BOM操作(超详细)

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

history对象常用的length属性，它保存着历史记录的数量。这个数量包括所有的历史记录，即所有前进和后退的记录。对于加载到窗口、标签页或框架中的第一个页面而言，history.length等于0。如下代码测试该属性的值，可以确定用户是否一开始就打开了页面。

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

使用go()方法可以在用户的历史记录中任意跳转，可以向前也可以向后。此方法接收一个参数。go(number)中number参数指的是要访问的URL在history的URL列表中的相对位置，当值为正数时，表示向前跳转;当值为负数时，表示向后跳转。具体使用方式如下。

//前进一页
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.location对象

location对象是比较有用的BOM对象之一，它提供了与当前窗口中加载文档有关的信息，还提供了一些导航功能。本节将会学习location对象的常用属性和方法。

1.location对象的常用属性和方法

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

2.location对象的使用

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

4.document对象

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

geetElementById()方法一般用于访问div、图片、表单元素、网页标签等，但要求访问对象的id是唯一的。

getElementsByName()方法与getElementById()方法相似，但它访问的是具有name属性的元素，由于一个文档中的name属性可能不唯一，所以getElementsByName()方法一般用于访问一组相同name属性的元素，如具有相同name属性的单选按钮、复选框等。

getElementsByTagName()方法通常按标签来访问页面元素，一般用于访问一组相同的元素，如一组<input>、一组图片等。

5.JavaScript定时函数

在JavaScript中，定时函数包括超时调用和间谒用，前者是在指定的时间过后执行的代码，而后者则是每隔指定的时间就执行一次代码。

1.超时调用

超时调用需要使用window对象的setTimeout()方法，它接收两个参数；要执行的代码和以毫秒表示的时间。其中，第一个参数可以是一个包含JavaScript代码的字符串，也可以是一个函数。例如，下面对setTimeout()方法的两次调用都会在1秒后显示一个警告框。

//不推荐传递字符串
setTimeout("alert('你好！')".1000);
//推荐使用
setTimeout(function(){
 alertt('你好！');
},1000)

虽然以上两种方法都没有问题，但是由于字符串可能导致性能损失，所以不推荐以字符串作为第一个参数。

第二个参数是一个表示等待多长时间的毫秒数，但经过该时间后指定的代码不一定会执行。JavaScript是一个单线程的解释器，因此在一定时间内只能执行一段代码。为了控制要执行的代码，就有一个JavaScript任务队列。这些任务按照将它们添加到队列的顺序执行。setTimeout()方法的第二个参数告诉JavaScript再过多长时间把当前任务添加到队列中。如果队列是空的，那么添加的代码会立即执行;如果队列不是空的，那么它就要等前面的代码执行完以后再执行。

调用setTimeout()方法，该方法会返回一个数值ID,表示超时调用。这个超时调用ID是计划执行代码的唯一标识符，可以通过它来取消超时调用。要取消尚未执行的超时调用计划，可以调用clearTimeout()方法并将相应的超时调用ID作为参数传递给它，具休代码如下所示。

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

只要是在指定的时间尚未过去之前调用clearTimeout()方法，就可以完全取消超时调用。上面的代码在设置超时调用之后又马上调用了clearTimeout()方法，所以不会在1秒后显示警告框。

2.间谒调用

间谒调用与超时调用类似，只不过它会按照指定的时间间隔重复执行代码，直至间谒调用或被取消或者页面被卸载。设置间谒调用的方法是setInterval(),接收的参数与setTimeout()方法相同，为要执行的代码和每次执行之前需要等待的毫秒数。

//不推荐传递字符串
setInterval("alert('你好！')",3000);

//推荐使用
setInterval(function(){
 alert('你好！')"
},3000)

调用setInterval()方法同样会返回一个间歇调用ID,该ID可用于在将来某个时刻取消间谒调用。要取消尚未执行的间谒调用，可以使用clearInterval()方法并传入相应的间谒调用ID。取消间谒调用的重要性要远远高于取消超时调用，因为在不加干涉的情况下，间谒调用将会一直执行到页面卸载。

6.JavaScript内置对象

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

String对象:用于支持对字符串的处理。
Array对象:用于在单独的变量名中存储一系列的值。
Date对象：用于操作日期和时间。
Math对象:它包含若干数字常量和函数，使我人前能力执行常用的数学任务。
其中，String 对象前面已经介绍过，下面将介绍Array对象、Date对象和Math对象。

1.Array对象

同Java中的数组一样，JavaScript中的数组也是具有一个或多个值的集合。数组用一个名称存储系列的值，用下标区分数组中的每个值，数组的下标从0开始。

JavaScript中的数组也需要先创建、赋值、再访问数组元素，并通过数组的一些方法和属性对数组元素进行处理。

1创建数组

在JavaScript中创建数组的语法格式如下。

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

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

例如，var fruit=new Array(5);表示创建了一个名称为fruit,有5个元素的数组。

2.为数组元素赋值

在声明数组时，可以直接为数组元素赋值，例如：

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";

另外，除Array()对象外，数组还可以用方括号([])来定义，例如：

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

3.访问数组

可以通过数组的名称和下标直接访问数组的元素，访问数组的表示形式，数组名[下标]。例如，fruit[0]表示访问数组中的第一个元素，基中fruit是数组名，0表示下标。

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

数组是JavaScript中的一个对象，它有一组属性和方法，下表为数组的常用方法和属性。

1. length属性

数组的length属性用于返回数组中元素的个数，返回值为整数。如果在创建数组时就指定了数组的size值，那么无论数组元素中是否存储了实际数据，该数组的length值都是这个指定的长度值size。语法格式如下。

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

2.join()方法

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

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

关于sort()方法、push()方法,可通过访问w3school网站了解其用法，这里不再举例。

3.forEach()方法

该方法可以为数组执行循环操作。语法格式如下。

array.forEach(callBackFn[,thisArg])

参数说明：

array:必需参数，一个数组。
callBackFn:必需参数，最多可以接受三个参数的函数。
thisArg：可选参数，callBckFn函数中的this可以引用的对象。一般情况下，该参数使用的机会较少，了解即可。

callBackFn的语法格式如下

function callBackFn(value,index,array){...}

参数说明：

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

2.Date对象

ECMAScript中的Date对象是在早期java中java.util.Date类基础上构建的。为此，Date对象使用自协调世界时(Coordinated Universal Time, UTC)1970年1月1日午夜(零时)开始的毫秒数来保存日期。在使用这种数据存储格式的条件下，Date对象保存的日期能够精准1970年1月1晶之前或之后的100000000年。

要创建一个日期对象，需要使用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");"。

Date对象中有大量用于设置，获取和操作日期的方法，从而实现在页面中显示不同类型的日期时间。其中常用的是获取日期的方法，如下表所示。

3.Math对象

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

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

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

wu_ry

关注

22
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
JavaScript BOM操作(超详细)

由于window对象是全局对象，所以在使用window对象的属性和方法时，window可以省略不写.例如，之前直接使用的alert()方法、confirm()方法及prompt()方法的用法、本节主要讲解open()方法和close()方法，JavaScript定时函数会在后面中详细介绍。设置间谒调用的方法是setInterval(),接收的参数与setTimeout()方法相同，为要执行的代码和每次执行之前需要等待的毫秒数。可以通过数组的名称和下标直接访问数组的元素，访问数组的表示形式，数组名[下标]。
复制链接

扫一扫