JavaScript BOM对象常用总结

阳光穿透心脏的1/2处 2021-06-24 16:10 470阅读 0赞

# BOM #

Broswer Object Model：浏览器对象模型。

## 一、Navigator 对象 ##

这个对象可以获取客户机（浏览器）的信息。

*  `appName` 属性可返回浏览器的名称。

## 二、Screen 对象 ##

*  `height`： 该属性返回显示屏幕的高度。
 *  `width`： 该属性返回显示器屏幕的宽度。
    
        document.write(screen.width);
        document.write("*");
        document.write(screen.height);
    
    输出：`1920*1080`

## 三、Location 对象 ##

Location 对象包含有关当前 URL 的信息。

*  `href`： href属性是一个可读可写的字符串，可设置或返回当前显示的文档的完整 URL。  
    **获取当前的URL地址：**
    
        document.write(location.href);
    
    **设置URL地址：**  
    需求：页面上安置一个按钮，按钮上绑定一个事件，当我点击这个按钮，页面可以跳转到另一个页面。
    
        <input type="button" value="jump" onclick="href1()" />		
        <script type="text/javascript"> function href1(){ location.href="xxx.html"; } </script>

## 四、History 对象 ##

History 对象包含用户（在浏览器窗口中）访问过的 URL。

*  `length`： 该属性可以返回浏览器历史列表中的 URL 数量。
 *  `back()`： 加载 history 列表中的前一个 URL。 相当于浏览器的后退按钮。
 *  `forward()`： 加载 history 列表中的下一个 URL。 相当于浏览器的前进按钮。
 *  `go()`： 方法可加载历史列表中的某个具体的页面。  
    go(1) 相当于前进一次，go(-2) 相当于后退两次。

## 五、Window 对象 △ ##

Window 对象表示浏览器中打开的窗口。  
**顶层对象：** 所有的BOM对象都是在window里面操作的。

### 方法： ###

*  `alert()`： 显示带有一段消息和一个确认按钮的警告框。
 *  `confirm()`： 显示带有一段消息以及确认按钮和取消按钮的对话框。  
    如果用户点击确定按钮，则 confirm() 返回 true。  
    如果点击取消按钮，则 confirm() 返回 false。
 *  `prompt()`： 显示可提示用户进行输入的对话框。
    
    格式：`prompt(text,defaultText);`  
    `text`： 可选。要在对话框中显示的纯文本（而不是 HTML 格式的文本）。  
    `defaultText`： 可选。默认的输入文本。
 *  `open()`： 打开一个新的浏览器窗口或查找一个已命名的窗口。  
    格式：`window.open("打开新窗口的地址URL","","窗口的特征")`
    
    创建一个按钮，点击这个按钮，打开一个新的窗口：
    
        <input type="button" value="open()" onclick="open1()" />		
        <script type="text/javascript"> function open1(){ window.open("xxx.html","","width=500,height=300"); } </script>
 *  `close()`： 用于关闭浏览器窗口。  
    *浏览器兼容性比较差。*
 *  `setInterval()`： 按照指定的周期（以毫秒计）来调用函数或计算表达式。  
    格式：`setInterval("JavaScript代码",毫秒数)`
    
        setInterval("alert('hello!')",3000);
    
    每3秒，执行一次`alert('hello!')`。
 *  `setTimeout()` 方法用于在指定的毫秒数后调用函数或计算表达式。  
    格式：`setTimeout("JavaScript代码",毫秒数);`  
    毫秒之后执行，但是只会执行一次。
 *  `clearInterval()` ：清除setInterval()设置的定时器。  
    `clearTimeout()`： 清除clearTimeout()设置的定时器。  
    这两个函数需要传入一个ID，上面的setTimeout()和setInterval()方法会返回一个ID，这里传入的就是这个ID。  
    **示例：** （通过两个按钮来取消定时器）
    
        <input type="button" value="clearInterval" onclick="clear1()" />
        <input type="button" value="clearTimeout" onclick="clear2()" />
        <script type="text/javascript"> var id1 = setInterval("alert('hello!')", 3000); var id2 = setTimeout("alert('hello!')", 5000); function clear1() { clearInterval(id1); } function clear2() { clearTimeout(id2); } </script>