BOM浏览器对象模型和API速查

时间：2022-10-11 01:34:03

什么是BOM
BOM是Browser Object Model的缩写，简称浏览器对象模型
BOM提供了独立于内容而与浏览器窗口进行交互的对象
由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window
BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性，告诉线程如何操作对象

BOM浏览器对象模型和API速查

全局函数：

　　js基于对象，但也有不封装在对象中的函数。

对话框
alert(str)—— 弹出消息对话框（对话框中有一个“确定”按钮）
confirm(str)—— 弹出消息对话框（对话框中包含一个“确定”按钮与“取消”按钮）
prompt(str,defaultValue)——弹出消息对话框（对话框中包含一个“确定”按钮、“取消”按钮与一个文本输入框），由于各个浏览器实现的不同，若没有第二个参数（文本框中的默认值）时也最好提供一个空字符串
状态栏
window.defaultStatus 属性——改变浏览器状态栏的默认显示(当状态栏没有其它显示时)，浏览器底部的区域称为状态栏，用于向用户显示信息
window.status 属性——临时改变浏览器状态栏的显示
时间等待与间隔函数
setTimeout()—— 暂停指定的毫秒数后执行指定的代码
clearTimeout()——取消指定的setTimeout函数将要执行的代码
setInterval()——间隔指定的毫秒数不停地执行指定的代码
clearInterval()——取消指定的setInterval函数将要执行的代码
setTimeout与setInterval方法有两个参数，第一个参数可以为字符串形式的代码，也可以是函数引用，第二个参数为间隔毫秒数,它们的返回是一个可用于对应clear方法的数字ID

var tid = setTimeout("alert('1')",1000);

alert(tid);

clearTimeout(tid);

window对象

　　概念上，我们把window看作可以承载可视化实体的容器。window对象的API告诉了线程应该如何操作它。注意window可以省略不写。

窗体控制
moveBy(x,y)——从当前位置水平移动窗体x个像素，垂直移动窗体y个像素，x为负数，将向左移动窗体，y为负数，将向上移动窗体
moveTo(x,y)——移动窗体左上角到相对于屏幕左上角的(x,y)点，当使用负数做为参数时会吧窗体移出屏幕的可视区域
resizeBy(w,h)——相对窗体当前的大小，宽度调整w个像素，高度调整h个像素。如果参数为负值，将缩小窗体，反之扩大窗体
resizeTo(w,h)——把窗体宽度调整为w个像素，高度调整为h个像素
窗体滚动轴控制
scrollTo(x,y)——在窗体中如果有滚动条，将横向滚动条移动到相对于窗体宽度为x个像素的位置，将纵向滚动条移动到相对于窗体高度为y个像素的位置
scrollBy(x,y)—— 如果有滚动条，将横向滚动条移动到相对于当前横向滚动条的x个像素的位置(就是向左移动x像素)，将纵向滚动条移动到相对于当前纵向滚动条高度为y个像素的位置(就是向下移动y像素)
窗体焦点控制
focus()—— 使窗体或控件获取焦点
blur()——与focus函数相反，使窗体或控件失去焦点
新建窗体
open()——打开(弹出)一个新的窗体
close()——关闭窗体
opener属性——新建窗体中对父窗体的引用，中文"开启者"的意思
window.open方法语法

window.open(url, name, features, replace);

子窗口与父窗口
只有自身和使用window.open方法打开的窗口和才能被JavaScript访问,window.open方法打开的窗口通过window.opener属性来访问父窗口。 而在opener窗口中，可以通过window.open方法的返回值来访问打开的窗口！

框架

概念上，一个框架是一个可以承载窗口的容器，也就间接成为可视化实体的容器。
window.frames集合：在框架集或包含iframe标签的页面中，frames集合包含了对有框架中窗口的引用

    alert(frames.length);//框架的数目

    alert(frames[0].document.body.innerHTML);//使用下标直接获取对框架中窗口的引用

    //不但可以使用下标，还可以使用frame标签的name属性

    alert(frames["frame1"].document.title);

在框架集中还可以使用ID来获取子窗口的引用

    var frame1 =document.getElementById("frame1");//这样只是获取了标签

    var frame1Win = frame1.contentWindow;//frame对象的contentWindow包含了窗口的引用

    //还可以直接获取框架中document的引用

    var frameDoc = frame1.contentDocument;

    alert(frameDoc);//但IE不支持contentDocument属性

document对象

　　引用了HTML文档本身。

getElementById("CANVAS") 返回一个元素引用的对象

write() 向浏览器输出

canvas对象

getContext("2d") 返回一个上下文环境，上下文环境中的方法告诉线程如何（在这个画布上）进行绘图。

对象中包含了一些方法，告诉线程如何处理用户事件

<script>

var canvas = document.getElementById("myCanvas");

var context = canvas.getContext("2d");

context.strokeStyle = "black";

context.fillStyle = "red";

context.rect(0, 0, 300, 400);

context.fill();

canvas.onmousedown = function(event) {

}

canvas.onmouseup = function(event) {

};

canvas.onmousemove = function(event) {

}

canvas.onclick = function(event) {

}

//或者

canvas.addEventListener("mousedown",doMouseDown,false);

canvas.addEventListener('mousemove', doMouseMove,false);

canvas.addEventListener('mouseup',  doMouseUp, false);

</script>

相关文章