JS17：操作BOM对象

JavaScript 的实现包括以下3个部分：

• 核心（ECMAScript）：描述了 JS 的语法和基本对象
• 文档对象模型（DOM）：处理网页内容的方法和接口
• 浏览器对象模型（BOM）：与浏览器交互的方法和接口

BOM：Browser Object Model 浏览器对象模型

window

代表浏览器窗口。（重要）

window.innerWidth;  // 浏览器内部宽度
window.innerHeight;  // 浏览器内部高度
window.outerWidth;  // 浏览器外部宽度
window.outerHeight;  // 浏览器外部高度

红色框是浏览器的内部，其余部分是浏览器外部。

navigator

封装了浏览器的信息；大多数时候不会使用这个对象，因为会被人为修改，不建议使用这些属性来进行判断和编写代码。（不建议使用）

navigator.appName;  // 返回当前浏览器名称
navigator.appVersion;  // 返回当前浏览器版本
navigator.userAgent;  // 返回当前浏览器的用户代理
navigator.platform;  // 返回浏览器平台名

 

screen

包含了计算机屏幕的信息

screen.width;  // 屏幕宽度
screen.height;  // 屏幕高度

location

当前页面的 URL 信息。（重要）

location.host;  // 主机
location.href;  // 路径
location.protocol;  // 协议
location.reload();  // 重新加载/刷新网页
location.assign('新的网址');  // 设置新的地址

以百度为例

document

代表当前页面，HTML DOM 文档树

document.title;  // 当前页面标题

获取具体的文档树节点

<dl id="app">
    <dt>Java</dt>
    <dd>JavaSE</dd>
    <dd>JavaEE</dd>
</dl>

<script>
    const dl = document.getElementById("app");
    console.log(dl)
</script>

 

获取 cookie

document.cookie

劫持 cookie 的原理就是写一段获取 cookie 上传到他的服务器的 js 代码，服务器端可以设置 cookie 的 httpOnly，避免被人获取 cookie。

history

代表浏览器的历史记录。（不建议使用）

history.back();  // 后退
history.forward();  // 前进