关于BOM-window对象，history，location，document对象

最新推荐文章于 2023-08-04 11:03:12 发布

codingXT

最新推荐文章于 2023-08-04 11:03:12 发布

阅读量6.2k

点赞数 1

分类专栏： JavaScript

本文链接：https://blog.csdn.net/qq_37774171/article/details/86580290

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

BOM指的是浏览器对象模型，是JavaScript的组成之一，提供了独立于内容的，与浏览器窗口进行交互的对象模型，就是用来管理窗口与窗口之间的通信，例如弹出一个新浏览器窗口，改变窗口大小等

弹出新的浏览器窗口
移动，关闭浏览器窗口以及调整窗口大小
实现页面的前进和后退功能
提供web浏览器详细信息的导航对象
提供用户屏幕分辨率详细信息的屏幕对象
支持cookies
下面是BOM模型图：
其主要对象是window对象
window对象又称浏览器对象，当浏览器打开HTML文档时，通常会创建一个window对象，如果定义了多个框架，浏览器会为原始文档创建一个window对象，同时为每一个框架另外创建一个window对象。

window对象常用属性

名称	说明
history	有关客户访问过的URL的信息
location	有关当前URL的信息

window对象的常用方法

名称	说明
prompt（）	显示可提示用户输入的对话框
alert（）	显示一个带有提示信息和一个确定按钮的警示对话框
confirm（）	显示一个带有提示信息，确定和取消按钮的对话框
close（）	关闭浏览器窗口
open（）	打开一个新的浏览器窗口，加载给定URL所指定的文档
setTimeout()	在指定的毫秒数后调用函数或计算表达式
setInterval()	按照指定的周期来调用函数或表达式

经常看到方法前面没有window，比如直接调用close（），而不用window.close(),是因为window对象是全局对象，所以可以省略不写

window常用事件

名称	说明
onload	一个页面或图像完成加载
onmouseover	鼠标指针移动到某元素之上
onclick	鼠标单击某个对象
onkeydown	某个键盘按键按下
onchange	域的内容被改变

history对象
提供用户最近浏览过的URL列表
方法有

名称	方法
back（）	加载history对象列表中的前一个URL
forward（）	加载history对象列表中的后一个URL
go()	加载history对象列表中的某个具体的URL

location对象

提供当前页面的URL信息，可以重新装载当前页面或载入新页面
location对象属性

名称	描述
host	设置或返回主机名和当前URL的端口号
hostname	设置或返回当前URL的主机名
href	设置或返回完整的URL

方法

名称	描述
reload（）	重新加载当前文档
replace（）	用新的文档替换当前文档

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

<a href="javascript:location.href='index.html'">查看index页面</a>

document对象
既是window对象的一部分，又代表了整个HTML文档，可用来访问页面中的所有元素

常用属性

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

这里有一个要注意的点：关于referrer，如果当前文档不是通过超链接访问的，则document.referrer的值为null
上网浏览某个页面时，由于不是由指定的页面进入的，系统将会提醒不能浏览本页面或直接跳转到其他页面，这样的功能实际上就是通过referrer属性来完成的。

<script type="text/javascript">
  var preURL=document.referrer;//载入本页面文档的地址
  if(preURL==""){
	  document.write("你不是从登录页面进入，5秒后转入登录页面");
	  setTimeout("javascript:location.href='login.html',5000");
  }
  
</script>

document对象的常用方法

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

getElementById()一般用于访问div，图片，表单元素，网页标签等，但要求访问的对象的id是唯一的
getElementsByName()与getElementById()相似，由于一个HTML文档中的name属性可能不唯一，所以一般用来访问一组相同name属性的元素，如具有相同name属性的单选按钮等
getElementsByTagName()是按标签来访问页面元素的，一般用于访问一组相同的元素。如一组 ,一组图片等。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
 function changeLink(){
	 document.getElementById("node").innerHTML="搜狐";
 }
 function all_input(){
	 var allInput=document.getElementsByTagName("input");
	 var sStr="";
	 for(var i=0;i<allInput.length;i++){
		 sStr+=allInput[i].value+"<br/>";
	 }
	 document.getElementById("s").innerHTML=sStr;
	 
 }
 function s_input(){
	 var allInput=document.getElementsByName("season");
	 var sStr="";
	 for(var i=0;i<allInput.length;i++){
		 sStr+=allInput[i].value+"<br/>";
	 }
	 document.getElementById("s").innerHTML=sStr;
	 
 }
 
 
 
</script>
</head>
<body>

<div id="node">新浪</div>
<input name="b1" type="button" value="改变层内容" onclick="changeLink()"/><br/>
<br/><input name="season" type="text" value="春">
<input name="season" type="text" value="夏">
<input name="season" type="text" value="秋">
<input name="season" type="text" value="冬">
<br/><input name="b2" type="button" value="显示input内容" onclick="all_input()"/>
<input name="b3" type="button" value="显示season内容" onclick="s_input()"/>
<p id="s" ></p> 

</body>
</html>

codingXT

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
关于BOM-window对象，history，location，document对象

BOM指的是浏览器对象模型，是JavaScript的组成之一，提供了独立于内容的，与浏览器窗口进行交互的对象模型，就是用来管理窗口与窗口之间的通信，例如弹出一个新浏览器窗口，改变窗口大小等弹出新的浏览器窗口移动，关闭浏览器窗口以及调整窗口大小实现页面的前进和后退功能提供web浏览器详细信息的导航对象提供用户屏幕分辨率详细信息的屏幕对象支持cookies下面是BOM模型图：其主要对...
复制链接

扫一扫

专栏目录