javascript学习之BOM

时间：2022-09-06 20:05:32

BOM是browser object model的缩写，简称浏览器对象模型。先看看下面这张图

javascript学习之BOM

window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。

通过图可以看出 平时经常用到的一些对象都是BOM对象。

下面将一一为您介绍 这些子对象的用途。

一  window对象

window对象除了是BOM中所有对象的父对象外，还包含一些窗口控制函数。

JavaScript中的任何一个全局函数或变量都是window的属性。如下代码中的全局变量sTest

 var sTest="dreamdu";

 document.write(sTest==window.sTest);

由于sTest是全局变量，因此可以通过window.sTest访问这个变量

window函数索引：

1. 窗体控制函数

    • JavaScript moveBy()  从当前位置水平移动窗体x个像素，垂直移动窗体y个像素，x为负数，将向左移动窗体，y为负数，将向上移动窗体
    • JavaScript moveTo() 移动窗体左上角到相对于屏幕左上角的(x,y)点，当使用负数做为参数时会吧窗体移出屏幕的可视区域
    • JavaScript resizeBy() 相对窗体当前的大小，宽度调整w个像素，高度调整h个像素。如果参数为负值，将缩小窗体，反之扩大窗体
    • JavaScript resizeTo() 把窗体宽度调整为w个像素，高度调整为h个像素

2. 窗体滚动轴控制函数

    • JavaScript scrollTo() 在窗体中如果有滚动条，将横向滚动条移动到相对于窗体宽度为x个像素的位置，将纵向滚动条移动到相对于窗体高度为y个像素的位置
    • JavaScript scrollBy() 如果有滚动条，将横向滚动条移动到相对于当前横向滚动条的x个像素的位置(就是向左移动x像素)，将纵向滚动条移动到相对于当前纵向滚动条高度为y个像素的位置(就是向下移动y像素)

3. 窗体焦点控制函数

    • JavaScript focus() 使窗体或控件获取焦点
    • JavaScript blur() 与focus函数相反，使窗体或控件失去焦点

4. 新建窗体函数

    • JavaScript open() 打开(弹出)一个新的窗体
    • JavaScript close() 关闭窗体
    • JavaScript opener 实际上就是通过window.open打开的窗体的父窗体。通过opener可以实现跨窗体之间的通讯，但是要保证是在同一域名下，而且一个窗体要包含另一个窗体的opener。

5. 对话框函数

6. 状态栏属性

    • JavaScript window.defaultStatus 属性
    • JavaScript window.status 属性

7. 时间等待与间隔函数

二  document对象

document对象是window对象的属性，document对象包含一个节点对象，此对象包含每个单独页面的所有HTML元素，这就是W3C的DOM对象。

document属性

    • cookie -- 用户cookie
    • title -- 当前页面title标签中定义的文字
    • URL -- 当前页面的URL

由于document代表HTML文档的内容，因此可以通过它表示文档中加载的一些元素，这些元素全部通过集合访问。

    • anchors -- 文档中所有锚(a name="aname")的集合
    • applets -- 文档中所有applet标签表示的内容的集合
    • embeds -- 文档中所有embed标签表示的内容的集合
    • forms -- 文档中所有form标签表示的内容的集合
    • images -- 文档中所有image标签表示的内容的集合
    • links -- 文档中所有a(链接)标签表示的内容的集合

document函数

    • JavaScript write() 在文档中写入字符串
    • JavaScript writeln() 函数
    • JavaScript document.open() 打开已经载入的文档。代码示例 
       var win = window.open("about:blank","dreamdu");
      
 win.document.open();
      
 win.document.write("welcome to dreamdu!");
      
 win.document.close();

      上面这个示例首先新建一个空白文档，并打开open，写入内容，最后完成显示关闭文档close。

    • JavaScript document.close() 函数

三 frames对象

frames用于表现HTML页面当前窗体的中的框架集合。

如果页面使用框架，将产生一个框架集合frames，在集合中可用数字(从0开始，从左到右，逐行索引)或名字索引框架

<iframe id="color_iframe" src="" frameborder="0" scrolling="no" style="text-align: center;"></iframe>

如上代码可以选择一个框架 var iframeDocument = window.frames["color_iframe"].contentWindow.document;

四 history对象

浏览者通常可以使用浏览器的前进与后退按钮访问曾经浏览过的页面。JavaScript的history对象记录了用户曾经浏览过的页面，并可以实现浏览器前进与后退相似的导航功能

可以通过back函数后退一个页面，forward函数前进一个页面，或者使用go函数任意后退或前进页面，还可以通过length属性查看history对象中存储的页面数

由于安全的原因，不能显示history对象中的历史页面URL

history对象函数

五  location对象

location用于获取或设置窗体的URL，并且可以用于解析URL，是BOM中最重要的对象之一。location的8个属性都是可读写的，但是只有href与hash的写才有意义。例如改变location.href会重新定位到一个URL，而修改location.hash会跳到当前页面中的anchor(<a id="name">或者<div id="id">等)名字的标记(如果有)，而且页面不会被重新加载。

location对象属性图示

javascript学习之BOM

location属性

    • JavaScript hash 属性 -- 返回URL中#符号后面的内容
    • JavaScript host 属性 -- 返回域名
    • JavaScript hostname 属性 -- 返回主域名
    • JavaScript href 属性 -- 返回当前文档的完整URL或设置当前文档的URL
    • JavaScript pathname 属性 -- 返回URL中域名后的部分
    • JavaScript port 属性 -- 返回URL中的端口
    • JavaScript protocol 属性 -- 返回URL中的协议
    • JavaScript search 属性 -- 返回URL中的查询字符串
    • JavaScript assign() 函数 -- 设置当前文档的URL
    • JavaScript replace() 函数 -- 设置当前文档的URL，并在history对象的地址列表中删除这个URL
    • JavaScript reload() 函数 -- 重新载入当前文档(从server服务器端)
    • JavaScript toString() 函数 -- 返回location对象href属性当前的值

六  navigator对象

navigator对象通常用于检测浏览器与操作系统的版本。navigator中最重要的是userAgent属性，返回包含浏览器版本等信息的字符串，其次cookieEnabled也很重要，使用它可以判断用户浏览器是否开启cookie。

常用的navigator属性

    • appCodeName -- 浏览器代码名的字符串表示
    • appName -- 官方浏览器名的字符串表示
    • appVersion -- 浏览器版本信息的字符串表示
    • cookieEnabled -- 如果启用cookie返回true，否则返回false
    • javaEnabled -- 如果启用java返回true，否则返回false
    • platform -- 浏览器所在计算机平台的字符串表示
    • plugins -- 安装在浏览器中的插件数组
    • taintEnabled -- 如果启用了数据污点返回true，否则返回false
    • userAgent -- 用户代理头的字符串表示

七  screen对象

screen对象用于获取用户的屏幕信息。

screen对象属性

    • JavaScript availHeight 属性 -- 窗口可以使用的屏幕高度，单位像素
    • JavaScript availWidth 属性 -- 窗口可以使用的屏幕宽度，单位像素
    • JavaScript colorDepth 属性 -- 用户浏览器表示的颜色位数，通常为32位(每像素的位数)
    • JavaScript pixelDepth 属性 -- 用户浏览器表示的颜色位数，通常为32位(每像素的位数)（IE不支持此属性）
    • JavaScript height 属性 -- 屏幕的高度，单位像素
    • JavaScript width 属性 -- 屏幕的宽度，单位像素

availWidth与availHeight属性非常有用，例如：可以使用下面的代码填充用户的屏幕：

 window.moveTo(0,0);

 window.resizeTo(screen.availWidth, screen.availHeight);

相关文章