BOM

BOM（Browser Object Model）就是浏览器对象模型，是由浏览器提供的特殊对象，我们可以进行操作。对于 BOM 的学习除了需要了解这些对象分别代表什么，还需要学会使用其常用的方法

下面一共会介绍 6 种对象：

window
navigator
screen
location
document（重要）
history（垃圾）

注：上面的首字母用的都是小写，毕竟这是一个对象，不是一个类

1、window

还记得 JavaScript 有一个全局对象吗，它的名字就是 window，window 对象不仅仅可以充当全局对象，同样还可以代表 浏览器的窗口（就是我们打开的网页窗口），一般用于获取窗口内外宽高。这里解释一下什么是外窗口，就是你看到的整个浏览器，而内窗口就只是我们打开的网页部分（其实这个自己试一下就知道了）

//获取浏览器窗口的内高度、宽度
console.log("当前网页的内宽度是：" + window.innerWidth);
console.log("当前网页的内高度是：" + window.innerHeight);

//获取浏览器窗口的外高度、宽度
console.log("当前网页的外宽度是：" + window.outerWidth);
console.log("当前网页的外宽度是：" + window.outerHeight);

//打开指定的窗口
window.open("https://www.baidu.com/");

//关闭当前的窗口（copy 执行的时候记得注释掉）
window.close();

控制台输出结果：

2、navigator

包含一些 浏览器的基本信息，例如浏览器版本、应用名称等信息

console.log("浏览器名称：" + navigator.appName);

//出于兼容性的考虑，目前任何的浏览器都可以返回 “Netscape”，个人觉得可能是缅怀网景公司吧
console.log("浏览器版本：" + navigator.appVersion);
console.log("浏览器语言：" + navigator.language);

控制台输出结果：

但是请注意，来自 navigator 对象的信息具有 误导性，有时候新手喜欢用 navigator.appVersion 获取版本，从而编写不同的代码，但实际上这是不可取的，下面我们把浏览器的版本改掉：

Object.defineProperty(window.navigator, 'appVersion', {
    
    value: "This is wrong version, haha", writable: false});
console.log("浏览器版本：" + navigator.appVersion);

现在的浏览器版本：

3、screen

字面翻译就是 ‘屏幕’，实际上确实就是屏幕，包含了用户 当前屏幕的一些信息（就是你的笔记本屏幕）

console.log("当前屏幕的宽度是：" + screen.width);
console.log("当前屏幕的高度是：" + screen.height);
console.log("当前屏幕的色深是：" + screen.colorDepth);

控制台输出结果：

4、location

获取 当前页面 URL 的信息，你问什么是 URL？就是地址栏里面的内容，组成部分有协议、域名、端口、虚拟目录、文件名等等

//都写了是什么，自己看吧（结果就不展示了哈）
console.log("URL：" + location.href);
console.log("协议 " + location.protocol);
console.log("域名 " + location.host);
console.log("端口 " + location.port);

//重定向 URL
console.log(location.assign("https://www.baidu.com/"));

//刷新当前页面
console.log(location.reload());

5、document（重要）

个人认为 document 对象非常重要，之后我们会接触 DOM（文档对象模型），这是一种树形结构的模型，而 document 就是 DOM 树的根节点，我们可以利用 document 获取 DOM 树的节点，并且修改其内容或者属性。现在你可能无法理解，但是没关系，我会在 DOM 这篇博客中详细介绍用法，现在混个眼熟就行

由于需要操作页面元素，所以本次代码我们都写在 HTML 文件中：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>document</title>
    
    <!-- 我希望你们不要忘了这种写法 -->
    <script type="text/javascript">

        function changeTitle() {
      
      
            //修改页面的标题，就是 <head> 标签中的 <title> 标签
            document.title = "This is document object";
        }

        function func1() {
      
      
            //获取当前列表节点，并返回
            return document.getElementById('language');
        }

        changeTitle();

    </script>
</head>
<body>

<!-- 列表 -->
<ul id="language">
    <li>C</li>
    <li>C++</li>
    <li>Python</li>
    <li>Java</li>
    <li>HTML</li>
    <li>CSS</li>
    <li>JavaScript</li>
</ul>


</body>
</html>

我们在控制台执行 func1() 函数，查看结果，可以看到列表节点被获取了：

document 还有一个重要的属性，那就是 Cookie

Cookie 通俗点讲就是用于 让浏览器记住你，存储你的个人信息，方便下次登录。但是请注意，由于 document 可以直接获取用户的 Cookie，这样会导致用户的个人信息被曝光，解决方法就是我们可以在服务器端设置 Cookie 的时候使用 httpOnly，这样别人就无法使用 JavaScript 代码读取当前页面的 Cookie

//获取当前页面 Cookie
document.cookie;

6、history

字面意思，存放 浏览器历史记录，这个对象其实我不应该在这里讲，因为它已经被淘汰了，个人建议不要用了，前进后退什么的用 AJAX 完全能做到更好

//看看俩方法就行，back() & forward()

//相当于浏览器的后退
history.back();
//相当于浏览器的前进
history.forward();

轻松学习 BOM（浏览器对象模型）

BOM

猜你喜欢