我们说过JS由三部分组成，其中一部分是BOM，用来操作浏览器。这节课，我们将主要介绍BOM。

物料清单基础

我们先来看看一个BOM最基本的功能：打开和关闭窗口；

html head meta charset=' utf-8 ' title ss document/title/head body输入类型=' button ' value=' open window ' onclick=' window . open '(http://www . zhengshe.com/')；//body/htmlopen方法用于打开窗口，相反的close方法用于关闭窗口。在这里，我们可以使用open方法来实现一个应用程序：运行代码。

在此之前，我们想补充一点关于文档的知识

！doctype HTML HTML Head metachartset=' UTF-8 ' Title Untitled Document/Title/Head Body Input Type=' button ' value=' write ' onclick=' Document . write(' ABC ')'//Body/当我们打开HTML的源代码时，可以发现当我们点击按钮时，只有“ABC”——保留为整个页面的源代码。也就是说，如果在事件中使用document.write，页面在重写之前将被完全清空。

如您所见，在我们的运行代码案例中，使用document.write方法非常合适：

html head meta charset=' utf-8 ' title无标题文档/title script window . onload=function(){ var otxt=document . getelementbyid(' txt 1 ')；var oBtn=document . getelementbyid(' BTN 1 ')；obtn . onclick=function(){ var oNewWin=window . open(' about : blank '，' _ blank ')；onewwin . document . write(OTxt . value)；};};/script/head body text area id=' txt 1 ' rows=' 10 ' cols=' 40 '/text area br input id=' BTN 1 ' type=' button ' value=' run '/body/在html中，_blank代表新打开的窗口(打开此窗口时使用_self)，about:blank代表空白窗口，然后我们使用document.write将新窗口写入html，然后我们就可以在新窗口中运行html代码。

开篇之后，我们来谈谈关的一些问题。关闭的使用非常简单，关闭窗口的事件可以使用window.close来执行，但是在Firefox中，关闭用户打开的窗口是不可能的，只有当一个窗口用open方法打开时，才能用close方法关闭。

说了打开和关闭的方法之后，我们再来说两个常用的属性：window . nev gator . user agent和window.location，前者用于获取当前浏览器的版本信息，后者用于获取当前网页的地址(可以读取和分配，通过修改位置可以跳转到当前网页的URL)。您可以使用它来查看返回的内容，因此这里没有列出。

尺寸和坐标

这里我们讨论JS关于尺寸和坐标的内容。

首先要提到的是关于可视区域大小的知识。可视区域的大小是多少？事实上，它是客户端在屏幕上可以看到的网页大小。可视区域的大小因窗口大小而异。

当前页面可见区域的宽度和高度可以通过document . document element . client width和document . document element . client height获取.

html head metaharset=' utf-8 ' title无标题文档/title script window . onload=function(){ varobtn=document . getelementbyid(' BTN 1 ')；obtn . onclick=function(){ alert(' width : ' document . document element . client width ' height : ' document . document element . client height)；};};/script/head body输入id=' btn1' type=' button' value='可视区域大小'/body/html效果如下：

此外，对于可视区域，还有一个名为scrollTop的属性，它是滚动距离，即从可视区域到页面顶部的距离。

！doctype HTML HTML Head metachartset=' UTF-8 ' Title无标题文档/标题脚本文档. onclick=Function () {//IE，FF///Alert(Document . Document element . scroltop)；//chrome//alert(document . body . scroll top)；var scroll top=document . document element . scroll top | | document . body . scroll top；alert(scroll top)；};/script/head body style=' height :2000 px；'/body/html效果如下：

//这里有一张图片

值得注意的是，document . document element . scroll top只在ie下兼容，chrome下的编写规则是document.body.scrollTop，所以我们用| |方法来处理兼容性问题。常见方法和事件

在这里，我们尝试用固定之外的另一种方法来实现元素的固定定位(fixed与ie6不兼容)。

这里我们画另一幅画：

可以看到，只要计算一下黑线的长度，就可以把右下方的div块固定住。黑线的长度正好等于可视区域的高度减去div块的右边。

html head meta charset=' utf-8 ' title无标题文档/title style # div 1 { width :200 px；高度：150 px；背景：红色；位置：绝对；right:0底部：0；} body { height:2000px} /style脚本window . onscroll=function(){ var scroll top=document . document element . scroll top | | document . body . scroll top；var oDiv=document . getelementbyid(' div 1 ')；odiv . style . top=document . document element . client height-odiv . offset ThEight scroll top ' px '；};/script/head body div id=' div 1 '/div/body/html具有以下效果：

我们可以看到我们的div块有轻微的抖动，因为onscroll函数一直在发生，每次发生都会被调用，所以才会发生这种情况。此外，还有一个更严重的情况：如果我们改变窗口大小，div块将不会跟随而是留在原地，所以我们将使用另一个事件——

Window.onresize(页面大小更改时触发的事件):

window . on scroll=window . on resize=function(){ 0.}最后，我们来说说几个常用的系统对话框：

Alert ('content ')警告框，不带返回值confirm(' content to question ')选择框，会给出确认或取消的选项，返回一个布尔提示(' prompt text '，' default text ')，会弹出一个输入文本框，返回值为输入文本内容(字符串)，否则为null summary

以上是边肖介绍的JS中的BOM应用，希望对大家有所帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！