JS中BOM相关知识点总结(必读)

窗口对象

ECMAScript是javascript的核心，但如果要在web中使用JavaScript，那么BOM (Browser Object Model)才是真正的核心。BOM提供了很多访问浏览器功能的对象，与任何网页内容无关。

窗口对象：BOM的核心对象是窗口，代表浏览器的一个实例。在浏览器中，窗口对象具有双重角色，既是通过javascript访问浏览器窗口的接口，也是ECMAScript指定的Global对象。

因此，在全局范围内声明的所有变量和函数都将成为窗口对象的属性和方法。

脚本类型=' text/JavaScript ' var age=26；//这里定义的全局变量和全局函数自动归属于窗口对象名function saying(){ console . log(this . age)；} console . log(window . age)；//26 SayAge()；//26相当于window . sayage(). window . sayage()；//26 //全局变量和窗口对象上直接定义的属性唯一的区别就是全局变量不能被delete运算符删除，而窗口对象上直接定义的属性可以是window.color=' red删除window.age删除窗口. color；console . log(window . age)；//26 console . log(window . color)；//undefined/script type=' text/JavaScript '/*另外注意：试图访问未声明的变量会抛出一个错误，但是通过查询window对象，可以知道某个未声明的变量是否存在*///这样会抛出一个错误，因为oldValue没有定义var newValue=oldValue//这不会抛出错误，因为它是一个属性查询var new value=window . old value；/编写窗口关系和框架的脚本

如果页面包含框架，则每个框架都有自己的窗口对象，该对象存储在框架集合中。在框架集合中，您可以通过数字索引(从0开始，从左到右，从上到下)或框架名称来访问相应的窗口对象。每个窗口对象都有一个名称属性，其中包含框架的名称。

上面的框架可以被window.frames[0]或window.frames["topFrame"]"引用。但是，最好用top而不是window来指代这些框架。因为顶部对象总是指向最高(最外层)层的框架，即浏览器窗口。使用它来确保一个帧可以从另一个帧正确访问。因为对于在框架中编写的任何代码，窗口对象都指向该框架的特定实例，而不是最高级别的框架。

另一个与顶部相对的窗口对象是父对象。父对象总是指向当前框架正上方的框架。

与框架相关的最后一个对象是self，它总是指向window。自对象和窗口对象可以互换使用。

在使用框架的情况下，浏览器中会有多个全局对象。每个框架中定义的全局变量自动成为框架中窗口对象的属性。由于每个窗口对象都包含本机类型的构造函数，因此每个框架都有自己的构造函数集，它们是一对一的，但不相等。

位置对象

位置对象是一个非常特殊的对象，因为它是窗口对象和文档对象的属性。Window.location和document.location指的是同一个对象。

位置对象的属性：

！doctype html head metharset=' utf-8 ' meta http-equiv=' x-ua-compatible ' content=' ie=edge ' title query string参数/title/head dyscript type=' text/JavaScript '函数getquerystring args(){//获取查询字符串并删除问号var qs=(location.search.length 0？location . search . substring(1): ' ')，//保存数据对象args={}，//获取每一项items=qs.length？QS。split('):[]，item=null，name=null，value=null，//在for循环中使用i=0，len=items.length//将每个项目逐个添加到args对象中(I=0；我透镜；i ){ item=items[i]。split('=')；///decodeURIComponent用于解码名称和值，因为查询字符串应该编码为name=Decoderuicomponent(item[0])；value=decodeURIComponent(项目[1])；if(name . length){ args[name]=value；} }返回参数；}//假设查询字符串为：q=JavaScript num=10 var args=GetqueryStringargs()；alert(args[' q '])；//“JavaScript”警报(args[' num '])；//“10”//这样，每个查询字符串参数都成为返回对象的一个属性，这极大地方便了对每个参数的访问。/script/body/HTMl使用location对象，可以通过多种方式更改浏览器位置。

其中，最常见的方法是使用assign()方法并向其传递一个URL

location . assign("//www . JB 51 . net ")

这样，您可以立即打开一个新的网址，并在浏览器的历史记录中生成一条记录。

同样，将location.href和window.location设置为一个URL值也将使用该值调用assign()方法。

location . href="//www . JB 51 . net "；window . location="//www . JB 51 . net "；

这两种方法的效果与调用assign()方法的效果完全相同

此外，还可以通过修改位置对象的其他属性来更改当前加载的页面。

每次修改位置属性(哈希除外)，页面都会重新加载一个新的网址。修改哈希值将在浏览器历史记录中生成一条新记录

在URL:http://a.com # hello word，' #helloworld '是location.hash更改hash不会导致页面刷新，所以hash值可以用于数据传输，尽管数据容量有限。

当通过上述任何一种方法修改网址时，浏览器的历史记录中会生成一条新记录，因此通过单击“后退”按钮可以导航到上一页。

我们可以使用replace()方法来禁用此行为。方法只接受一个参数，即要导航到的URL结果将更改浏览器位置，但不会在历史记录中生成新记录。调用replace()方法后，用户无法返回上一页。

将此页面加载到浏览器后，浏览器将在1秒钟后重定向到www.jb51.net。然后，“返回”按钮将被禁用，如果您重新输入完整的网址，您将无法返回示例页面。

脚本类型=' text/JavaScript ' setTimeout(function(){ location . replace('//www . JB 51 . net/')；}, 1000);/scriptreload()方法，用于重新加载当前显示的页面。如果在不传递任何参数的情况下调用reload()方法，将以最有效的方式重新加载页面。也就是说，如果页面自上次请求后没有更改，页面将从浏览器缓存中重新加载。如果要强制从服务器重新加载，需要将参数true传递给此方法。

location . reload()；//Reload(可能从缓存中)位置. Reload(true)；//重新加载(从服务器重新加载)

超时呼叫和间歇呼叫

Javascript是一种单线程语言，但它允许您通过设置超时值和间歇值来设置代码在特定时间执行

超时调用：代码在指定时间后执行

间歇调用：代码每隔指定时间执行一次

超时调用：需要使用window对象的setTimeout()方法，接收两个参数：要执行的代码和以毫秒表示的时间。

第二个参数是指示等待时间的毫秒数，但是在此时间之后，指定的代码不一定会执行。因为javascript是单线程解释器，所以它只能在一定时间内执行一段代码。第二个参数指示将当前任务添加到队列需要多长时间。如果队列为空，将立即执行代码；否则，它将等待执行前面的代码。

调用setTimeout()后，该方法将返回一个数字标识，指示调用超时。要取消未执行的超时调用计划，可以调用clearTimeout()方法，并将相应的超时调用ID作为参数传递给它。

间歇调用：使用setInterval()方法

它类似于超时调用，只是它以指定的时间间隔重复执行代码，直到间歇调用被取消或页面被卸载。它接收与setTimeout()方法相同的参数

演示1

脚本类型='text/javascript' //set timeout调用vartimeoutid=settimeout(function(){ alert(' hello world！');}, 1000);//取消超时调用cleartime out(timeoutId)；/scriptDemo2

脚本类型='text/javascript' /*通过间歇调用实现*/var num=0；var max=10var intervalId=null函数incrementNumber(){ num；if(num==max){ clearInterval(intervalId)；警报(“完成”)；} } intervalId=set interval(incrementNumber，500)；/scriptDemo3

脚本类型='text/javascript' /*由超时调用实现*/var num=0；var max=100函数incrementNumber(){ num；if (num max) { setTimeout(递增数，500)；} else { alert(' Done ')；} } setTimeout(incrementNumber，500)；/script使用超时调用时，不需要跟踪超时调用ID，因为每次代码执行后，如果没有设置另一个超时调用，调用会自动停止。一般认为，使用超时呼叫来模拟间歇呼叫是最好的模式。间歇呼叫通常较少使用，因为后一个间歇呼叫可能在前一个间歇呼叫结束之前开始。

系统对话框

警报()，确认()和提示()

脚本类型=' text/JavaScript ' alert(' Hello world！');/script script type=' text/JavaScript '/*判断用户点击的是OK还是Cancel，可以查看confirm()方法返回的布尔值：true表示OK，false表示Cancel或者右上角的x按钮。*/if(确认('您确定吗？'){ alert('我很高兴你确定！');} else { alert('很抱歉听到您不确定的消息');}/script script type=' text/JavaScript '/* prompt()方法用于生成一个' prompt '框，提示用户输入一些文本。除了显示“确定”和“取消”按钮，提示框还显示用于输入文本内容的文本输入字段。该方法接收两个参数：要向用户显示的文本提示和文本输入字段的默认值(可以是空字符串)*/var result=prompt(‘你叫什么名字？’, '');如果(结果！==null) { alert('Welcome，'结果)；} /scripthistory对象

历史对象保存用户上网的历史，从窗口打开的那一刻算起。因为历史是窗口对象的属性，所以每个浏览器窗口、选项卡和框架都有自己的与特定窗口对象相关联的历史对象。出于安全考虑，开发者无法知道用户访问的网址。然而，在用户访问的页面列表的帮助下，他们也可以在不知道实际网址的情况下来回移动。

使用Go()方法在用户历史中随意跳转，可以是向后跳转，也可以是向前跳转。方法接收一个参数：一个整数值，表示向前或向后跳转的页数。负数表示向后跳转(类似于点按浏览器的后退按钮)，正数表示向前跳转(类似于浏览器的前进按钮)。

//后退一页历史。go(-1)；//前进一页历史。go(1)；也可以给go()方法传递一个字符串参数，此时浏览器会跳转到历史记录中包含该字符串的第一个位置可能后退也可能前进，具体要看哪个位置最近。如果历史记录中不包含该字符串，那么这个方法什么也不做

//跳转到最近的JB 51。网络历史。go(' JB 51。net ')；另外，还可以使用后退()和向前()来代替go()方法

//后退一页历史。back()；//前进一页历史。forward()；除此之外历史对象还有一个长度属性，保存着历史记录的数量。这个数量包括所有的历史记录，即所有的向后和向前的记录。如果history.length==0，则表示这是用户打开窗口后的第一个页面

历史对象不常用，但是在创建自定义的后退和前进按钮，以及检测当前页面是不是用户历史记录的第一个页面时，还是必须使用它。

演示一

history.html

！DOCTYPE html html标题元字符集=' utf-8 '元http-equiv=' X-UA-Compatible '内容=' IE=edge '标题历史/标题/标题正文表单输入类型=' text ' id=' username '/表单输入类型='button' id='btn' value='按钮onclick='go()'脚本类型='text/javascript '函数go(){ var name=document。getelementbyid('用户名').价值；if(name==' hello '){ history。go(-1)；}else{ alert('用户名不正确');} } /script/body/htmlceshi.html

！DOCTYPE html html head meta charset=' utf-8 ' meta http-equiv=' X-UA-Compatible ' content=' IE=edge ' title/title link rel='样式表历史。' html '跳转/a/body/html这里使用历史模仿了一个输入用户名之后。跳转到之前页面的例子。

history2.html民主2

！DOCTYPE html html head meta charset=' utf-8 ' meta http-equiv=' X-UA-Compatible ' content=' IE=edge ' title history/title/head dy a href=' demo。' html '跳转/a输入类型='button' id='btn' value='前进onclick='go()'脚本类型='text/javascript '函数go(){ history。forward()；} /script/body/htmldemo.html

！DOCTYPE html html head meta charset=' utf-8 ' meta http-equiv=' X-UA-Compatible ' content=' IE=edge ' title/title link rel='样式表href=' '/流浆池输入类型=' button '名称value='回退id='btn' onclick='fn()'脚本类型='text/javascript '函数fn(){历史记录。back()；}/脚本/正文/html这个小例子模拟了history.back()和历史。前进()的基本功能

以上就是小编为大家带来的射流研究…中月初(月初的缩写)相关知识点总结（必看篇)全部内容了，希望大家多多支持我们~