BOM(浏览器对象模型)+操作BOM

2022-04-01 12:04:24 阅读：140 来源： 互联网

标签：浏览器 -- 模型获取 window BOM navigator document

BOM

概念：BOM：browser object module--浏览器对象模型是一套操作浏览器窗口的 属性 和 方法
BOM的核心是window
所有BOM属性都是 window.xxx(window可以省略)

获取浏览器窗口尺寸

	1，window.innerWidth--获取浏览器窗口宽度（包含滚动条）
	2，window.innerHigth--获取浏览器窗口高度（包含滚动条）

浏览器的三种弹出层

1，alert()--提示框
    包含：提示文本 + 确定按钮
    返回值是undefined
2，confirm（）--选择提示框
    包含：提示文本 + 确定按钮 + 取消按钮
    返回值是boolean类型--点击确定返回true，点击取消返回false
3，prompt（）--提示输入框
    包含：提示文本 + 输入框 +确定按钮 + 取消按钮
    返回值：点击确定返回输入文本内容，点击取消返回null

浏览器地址栏

window对象中有location地址成员，location也是对象数据类型
location的href属性
    读属性：window.location.href--获取当前地址栏的完整地址url（汉字会转换为编码格式）
    写属性：window.location.href = "url"--把当前地址栏的地址修改，其实是页面跳转
location 的 reload（）方法
    window.loaction.reload()--重新加载当前页面，其实就是刷新（注意不要写在打开页面的位置）

浏览器的历史记录

window对象的成员history也是对象数据类型
history的back（）方法
    window.history.back()
    回退到上一条历史记录，相当于浏览器的左箭头<-
history 的 forward（）方法
    window.history.forward()
    前进到下一条历史记录，相当于点击右按钮 ->
history 的 go() 方法
    window.history.go( 数字 )
    正整数表示历史记录前进
    负整数表示历史记录后退
    0 表示当前页面刷新

浏览器版本信息

window对象的成员navigator是对象数据类型
navigator的方法
    1，userAgant()
        window.navigator.userAgent()
        获取浏览器 型号 和 版本 信息
    2，appVersion()
        window.navigator.appVersion()
        获得浏览器版本信息
    3，appName（）
        window.navigator.appName()
        获取浏览器的名字
navigator的属性
	platform
        window.navigator.platform
        获取浏览器的安装环境，操作系统（如：win32,win64）

浏览器常见事件

1，load
    window.onload=function(){}
    事件在加载完毕之后执行
2，scroll
    window.onscroll=function(){}
    事件在滚动条滚动时执行
3，resize
    window.onscroll=function(){}
    事件在浏览器窗口尺寸改变的时候执行

获取浏览器卷去尺寸

浏览器卷去高度
    1，document.documentElement.scrollTop
        有DOCUTYPE标签时获取浏览器卷去高度
    2，document.body.scrllTop
        没有DOCTYPE标签时获取浏览器卷去高度
    3，兼容写法
var scrollTop=document.documentElement.scrollTop || document.body.scrollTop
浏览器卷去宽度
    1，document.documentElement.scrollLeft
        有DOCUTYPE标签时获取浏览器卷去高度
    2，document.body.scrollLeft
        没有DOCTYPE标签时获取浏览器卷去高度
    3，兼容写法
var scrollTop=document.documentElement.scrollLeft || document.body.scrollLeft

小案例

	顶部通栏 返回顶部
		1，绑定鼠标滚动事件
		2，获取浏览器卷去高度
		3，判断浏览器卷去高度

标签：浏览器,--,模型,获取,window,BOM,navigator,document
来源： https://www.cnblogs.com/guoyanchao/p/16086105.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9