浏览器对象模型

浏览器对象模型 (BOM) 是一种特定于浏览器的约定,是Web浏览器公开的所有对象。当浏览器解析一个文档时,它会创建一个对象集合,用于描述文档和如何显示它们的细节。浏览器创建的这个对象称为文档对象。它是浏览器使用的大集合对象的一部分。浏览器对象的这个集合称为浏览器对象模型,或BOM。BOM不是ECMAScript标准规范,尽管它是JavaScript核心部分所描述的。重要的BOM对象如下:

  • document文档
  • location位置
  • history历史
  • navigator导航
  • screen屏幕
  • frames框架

有一个浏览器对象的层次框架,可以用于与浏览器自身相联系的方法和属性的操作上。在BOM里的最顶级对象是窗体window对象。窗体对象代表浏览器窗口。其他全部浏览器对象都包含在窗体对象里面。窗体对象具有一些属性和方法,可以用它们操控网页浏览器。 客户端Web开发的很好的一部分是尽量使用与浏览器本身相关的属性和方法,和占用它们的文档。

浏览器窗口被称为窗口对象的一个全局对象所表示。这个窗口对象被所有主流浏览器支持,并且包括全部的JavaScript全局对象。任何函数,对象,或变量,在JavaScript里都是窗口对象的一个成员。下面是几个窗口对象的属性和方法实例:

window.open("", newWindow, "width=500, height=500");
window.frames[0].location = "http://net-informations.com";
window.close();
var winWidth = window.innerwidth;
var winHeight = window.innerHeight;
window1.moveTo(500, 300);
window1.focus();

文档元素是DOM元素的根,在对象层次框架里面是BOM的一部分。文档对象模型表示显示在浏览器当中的网页。网页里面的全部元素,包括HTML标签,都包括在文档对象里面。由于文档对象经常被作为BOM的最重要的部分而考虑,它表示自己的对象模型,通常被称为文档对象模型DOM。不像文档对象模型,因为没有实现的标准,没有严格的定义,所以浏览器发布者可以按他们自己的愿望自由实现BOM。所有的全局对象,函数,JavaScript变量都是缺省的窗口对象成员。当访问它的大部分元素的时候,JavaScript 允许 window引用被省略。全局对象的例子如下:

window.document.getElementById("Para1");
document.getElementById("Para1");

上面例子当中的两个语句意思是一样的。

BOM例子

<!DOCTYPE html>
<html>
<head>
<title>BOM Examples</title>
<script>
var browserInfo = window.navigator.appName + " " + window.navigator.appVersion;
document.write("<h2>Browser Info</h2>p>"+browserInfo +"</p>");
var newWindow;
function opennewWindow() {
newWindow = window.open("", "", "width=500, height=300, top=150, left=150");
newWindow.document.title = "New Window";
paraGraph = document.createElement("P");
paraGraph_text = document.createTextNode("New Paragraph");
paraGraph.appendChild(paraGraph_text);
newWindow.document.body.appendChild(paraGraph);
}
function closenewWindow() {
if (newWindow != undefined) {
newWindow.close();
newWindow = undefined;
}
else {
alert("Nothing to open !!");
}
}
</script>
</head>
<body>
<h2>BOM Window Object</h2>
<p>
<input type="button" value="Open Window" onclick="opennewWindow()" />
<input type="button" value="Close Window" onclick="closenewWindow()" />
</p>
</body>
</html>
原文链接