JS中BOM对象复习

最新推荐文章于 2022-08-09 17:34:40 发布

轻云K

最新推荐文章于 2022-08-09 17:34:40 发布

阅读量438

点赞数 1

分类专栏： Web前端基础

本文链接：https://blog.csdn.net/weixin_36927395/article/details/54429843

版权

Web前端基础专栏收录该内容

14 篇文章 0 订阅

订阅专栏

BOM:浏览器对象模型----- Browser Object Model 主要提供访问和操作浏览器各组件的方式

浏览器各组件：window（浏览器窗口）、location（地址栏）、history（浏览历史）

screen（显示器屏幕）、navigator（浏览器软件）、document（网页）

DOM:文档对象模型---Document Object Model 主要提供访问和操作html的方式

注意：BOM和DOM不是JS中的内容，它们是W3C制定的规范，它们在浏览器中以对象形式实现，它们是由一组对象构成

window对象是JS中最大的对象，其他的对象都是他的子对象（包括document（包括网页中所有标签）、location、history、 navigator、screen）

访问window的子对象应该这样，window.document、window.location.......但是window是最顶层的对象所以一半可以直接省略

1.window对象：

name：指浏览器窗口的名字或框架的名字，这个属性一般是给<a>标签的target用的

eg：window.name="new win";document.write(name);

top:代表最顶层窗口

parent：代表父级窗口，主要用于框架

self：代表当前窗口，主要用于框架

innerWidth：浏览器窗口的内宽(不含菜单栏、工具栏、地址栏、状态栏)，Firefox支持。ie使用document.documentElement.clientWidth来代替

innerHeight：浏览器窗口的内高(不含菜单栏、工具栏、地址栏、状态栏)，Firefox支持。ie使用document.documentElement.clientHeight来代替

//document.documentElement就是html标签对象

-----------

alert(str):弹出一个警告对话框，显示str字符串内容

prompt(str[,default]):弹出一个输入窗口,str是输入的提示内容，default是默认的输入内容

confirm(str):弹出一个确认的对话框，str是提示内容，确认返回true，取消返回false

close():关闭窗口(关闭本网页)

print():打印整个窗口(打印本网页)

var win=open([url][,name][,options]):打开一个新的浏览器窗口,参数可以没有，没有就按默认的打开一个新的浏览器窗口，并最大化，url：表示打开网页的地址，name：新窗口的名字，一般给<a>标签的target属性使用，options：表示窗口的规格，包括width(新窗口的宽度)，height(高度)，left(新窗口距离屏幕左边的距离)，top(距离屏幕上边的距离)，menubar(是否显示菜单栏，值为yes，no)，toolbar(是否显示工具栏，值为yes，no)，location(是否显示地址栏，值为yes，no)，status(是否显示状态栏，值为yes，no)， scrollbars(是否显示滚动条，值为yes，no)，返回值是一个window对象的变量

onload事件:网页全部加载完成之后，指<body>的内容完全加载完成，才触发的事件，通过onload事件属性来调用JS函数，这个属性只有<body>才有

eg：function init(){var screenW = screen.availWiidth;//屏幕的有效宽度

var screenH= screen.availHeight;//屏幕的有效高度

var w = 400;//设置新窗口的宽度

var h = 300;//设置新窗口的高度

var x = (screenw-w)/2;//左距离

var y = (screenH-h)/2;//上距离

var url1 =""; var name = "win";

var options="width"+w+",height"+h+",left"+x+",top"+y+"menubar=no,toolbar=no";

var newwin=open(url1,name1,options);

newwin.document.write("this is the new window");

newwin.setTimeout("window.close()",1000);

}

onclick事件：当某个标签被点击之后触发的事件，所有的标签都有该属性

var timer = window.setTimeout(code,millisec):延时器方法，间隔millisec的毫秒值执行一次js代码code(注意只是会执行一次，除非使用类似递归的方法)，返回一个延时器的id变量，这个变量是给clearTimeout()用来清除延时器的

window.clearTimeout(timer):用来停止延时器的方法，timer是延时器返回的id变量

var timer = setInterval(code,millisec):设置一个定时器，重复执行js的code。timer是返回的定时器变量，变量给clearInterval(timer)使用，用来清除定时器

window.clearInterval(timer)：清除定时器，timer是创建定时器时返回的id变量

2.screen屏幕对象

Width：屏幕的宽度，只读属性

Height：屏幕的高度，只读属性

availWidth：屏幕的有效宽度，不包括任务栏，只读属性

availHeight：屏幕的有效高度，不包括任务栏，只读属性

3.navigator对象

appName:浏览器软件名称主要用来判断客户使用的是什么核心的浏览器

ie浏览器的值：返回Microsoft Internet Explorer

Firefox：返回 Netscape

appVersion:浏览器软件核心的版本号

systemLanguage：系统语言

userLanguage：用户语言

platform：平台

4.location地址栏对象

href:获取地址栏中完整的地址，可以用来实现，页面的跳转，

eg：location.href ="http://www.baidu.com"

host:主机名

hostname:主机名

pathname：文件路径以及文件名

search：查询字符串，地址栏中"?"之后的为查询字符串

protocol：协议，如：http ，ftp

hash：锚点名称，如#top

reload([true]):刷新网页，true表示强制刷新网页

注意：所有的属性重新赋值后，网页都会自动刷新

eg：

5.history对象

length：历史记录的个数

go(n):同时可以实现"前进"和"后退"

eg:history.go(0):刷新网页，history.go(1):前进一步，history.go(-1):后退一步

forward():相当于浏览器的前进按钮

back():相当于浏览器的后退按钮

轻云K

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JS中BOM对象复习

BOM:浏览器对象模型----- Browser Object Model 主要提供访问和操作浏览器各组件的方式浏览器各组件：window（浏览器窗口）、location（地址栏）、history（浏览历史）screen（显示器屏幕）、navigator（浏览器软件）、document（网页）DOM:文档对象模型---Document Object Model 主要提供访问和
复制链接

扫一扫