BOM，全称 Browser Object Model，浏览器对象模型。

最新推荐文章于 2024-04-30 09:57:08 发布

哦SuY

最新推荐文章于 2024-04-30 09:57:08 发布

阅读量201

点赞数

文章标签： css js javascript java html

本文链接：https://blog.csdn.net/weixin_43755857/article/details/107321694

版权

BOM

上一篇: JavaScript基础知识
上一篇: DOM

1. 简介

全称 Browser Object Model，浏览器对象模型。

JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的。

为了便于对浏览器的操作，javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器。

Window 对象是 JavaScript 层级中的顶层对象。

Window 对象代表一个浏览器窗口或一个框架。

Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。

浏览器对象模型中把浏览器的各个部分都是用了一个对象进行描述，如果我们要操作浏览器的一些属性，我就可以通过浏览器对象模型的对象进行操作。

window 代表了一个新开的窗口

location 代表了地址栏对象。

screen  代表了整个屏幕的对象

2. window 对象

window对象常用的方法：

open() 打开一个新的窗口。
resizeTo() 将窗口的大小更改为指定的宽度和高度值。
moveTo() 将窗口左上角的屏幕位置移动到指定的 x 和 y 位置。
moveBy() 相对于原来的窗口移动指定的x、y值。
setInterval() 每经过指定毫秒值后就会执行指定的代码。
clearInterval() 根据一个任务的ID取消的定时任务。
setTimeout() 经过指定毫秒值后执行指定的代码一次。
history.back() 回到过去
注意：使用window对象的任何属性与方法都可以省略window对象不写的。

    <button onclick="window.history.back()">回到过去</button>

3. 常用的事件

鼠标点击相关：

onclick 在用户用鼠标左键单击对象时触发。
ondblclick 当用户双击对象时触发。
onmousedown 当用户用任何鼠标按钮单击对象时触发。
onmouseup 当用户在鼠标位于对象之上时释放鼠标按钮时触发。

鼠标移动相关：

onmouseout 当用户将鼠标指针移出对象边界时触发。
onmousemove 当用户将鼠标划过对象时触发。

焦点相关的：

onblur 在对象失去输入焦点时触发。
onfocus 当对象获得焦点时触发。

其他：

onchange 当对象或选中区的内容改变时触发。
onload 在浏览器完成对象的装载后立即触发。
onsubmit 当表单将要被提交时触发。

4. location 对象

Location 对象是由 JavaScript runtime engine 自动创建的，包含有关当前 URL 的信息。

location中的重要方法：

	href属性	设置或获取整个 URL 为字符串。

	reload()	重新装入当前页面

5. screen 对象

Screen 对象是由 JavaScript runtime engine 自动创建的，包含有关客户机显示屏幕的信息。

Screen(屏幕)对象

	availHeight	获取系统屏幕的工作区域高度，排除 Windows 任务栏。 

	availWidth	获取系统屏幕的工作区域宽度，排除 Windows 任务栏。

	height		获取屏幕的垂直分辨率。 

	width		获取屏幕的水平分辨率。


    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>window对象</title>
    	</head>
    	<body id="b1">
    		<script>
    			/* 
    				window 是一个对象，窗口对象，表示的是整个浏览器
    				BOM  Browser object model   浏览器对象模型
    				window onload  加载
    				
    				window.onload = 匿名函数
    				类似于Java中的静态代码  权限很高
    				在浏览器打开时，立即执行
    			 */
    			window.onload =  function (){
    				var body1 = document.getElementById("b1");
    				//在body中创建一个div
    				var div = document.createElement("div");
    				console.log(div);
    				//加一些CSS样式
    				div.style.width = "200px";
    				div.style.height = "200px";
    				div.style.backgroundColor = "greenyellow";
    					
    				//给动态创建的元素进行属性的设置
    				div.setAttribute("id","div1");
    				div.setAttribute("class","classDiv");
    					
    				// 将动态创建的元素对象给需要的元素
    				body1.appendChild(div);
    			}
    		</script>
    	</body>
    </html>

哦SuY

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
BOM，全称 Browser Object Model，浏览器对象模型。

BOM1. 简介全称 Browser Object Model，浏览器对象模型。JavaScript是由浏览器中内置的javascript脚本解释器程序来执行javascript脚本语言的。为了便于对浏览器的操作，javascript封装了对浏览器的各个对象使得开发者可以方便的操作浏览器。Window 对象是 JavaScript 层级中的顶层对象。Window 对象代表一个浏览器窗口或一个框架。Window 对象会在 <body> 或 <frameset> 每
复制链接

扫一扫