实用JS系列——BOM常用对象

深藏阁楼爱情的钟 2022-08-06 10:27 173阅读 0赞

**背景： **

最近在着手项目的时候，意识到自己JS的欠缺。虽然看了不少JavaScript的视频，但真正项目中并不是经常遇到大且难的例子。所以JavaScript的基础还需要再打扎实，也就有了这一系列博客。这一系列更重视实用，理论部分可参看之前博客。

BOM（Browser Object Mode）浏览器对象模型，是Javascript的重要组成部分。它提供了一系列对象用于与浏览器窗口进行交互，这些对象通常统称为BOM。

![Center][]

由图中可看出，window对象是BOM中所有对象的父对象。

**1、window对象——BOM核心**

window，顾名思义，窗口对象。

它表示整个浏览器窗口，主要用来操作浏览器窗口。

对窗口的操作主要是对坐标的调整，屏幕的坐标如下图所示：

![Center 1][]

常用的方法有：

1）相对操作

moveBy——移动

resizeBy——调整大小

2）绝对操作

moveTo

resizeTo

**  2、document 对象**

它是window对象的一个属性，可以用来处理页面文档，但很多功能已不推荐使用。

常用方法示例：

**3、location 对象**

它是window对象和document对象的属性，用来分析和设置页面的URL地址。

常用方法示例：

//类似document的URL属性
                location.href="http://baidu.com";
    
                //重新加载页面
                location.reload(true);

**4、navigator 对象**

被认为是最重要的对象，它包含了一系列浏览器信息的属性。

userAgent是最常用的属性，用来完成浏览器判断。

var auserAgent = navigator.userAgent;
                 document.write(auserAgent);

显示结果：

![Center 2][]

**       5、screen 对象**

也是window对象的属性之一，主要用来获取用户的屏幕信息。

常用方法示例：

document.write("屏幕的高度是："+ screen.availHeight+" "+"屏幕的宽度是："+screen.availWidth);

显示结果：

![Center 3][]

**总结：**

JavaScript是基础。JavaScript学不好，而直接去用JQuery中提供的函数的话，就有一种知识架空的感觉。知其然，不知其所以然。Js也可帮助你理解看懂Ajax，因此，JS学了要会用，要能用上，而不是写个简单的注册事件都要百度，这样效率太低，也太不专业了。

[Center]: /images/20220806/566410892c1d4cb6a1e9ace9f715f226.png
[Center 1]: /images/20220806/56b95c9b8272425e95af0a1d1ebb8dfa.png
[Center 2]: /images/20220806/d53e98124d8542d2b935fd51f1ca6f12.png
[Center 3]: /images/20220806/58fabc7dfb78403f900bfd587c6acfcf.png