【一】BOM和DOM介绍

【1】什么是DOM/BOM

• 文档对象模型（Document Object Model, 简称 DOM）
• 浏览器对象模型（Browser Object Model, 简称 BOM）
• 是 JavaScript 与网页内容及浏览器环境进行交互的两种核心概念。

【2】DOM

（1）概述

• 文档对象模型（DOM）是一个编程接口，它以树状结构来表示 HTML 或 XML 文档。
• 在 DOM 中，每个HTML元素、属性、文本节点等都被视为一个对象，通过JavaScript可以创建、查询、修改和删除这些对象。

（2）示例

• document.getElementById(id): 通过元素ID获取DOM元素对象。
• element.querySelector/pseudo-class: 根据CSS选择器或伪类选择DOM元素对象。
• element.appendChild(newElement): 向指定元素添加子元素。
• element.setAttribute(name, value): 设置元素属性值。
• element.innerText/innerHTML: 获取或设置元素内的文本内容或HTML内容。

【2】BOM

（1）概述

• 浏览器对象模型（BOM）则是浏览器提供的API集合，主要用于处理与浏览器环境相关的任务，如窗口管理、导航、cookie、location等。

（2）示例

• window.open(url[, name[, features]]): 打开新的浏览器窗口或tab访问指定URL。
• window.location.href: 获取当前页面的URL地址，并可用于更改页面位置。
• window.history.back(): 返回历史记录中的上一页。
• navigator.userAgent: 获取浏览器的信息，例如类型、版本等。

【3】总结

• DOM 和 BOM 是 JavaScript 开发中两个不可或缺的部分，分别负责对网页内容和浏览器环境进行深层次的操作，使得前端开发者能够实现丰富的交互功能和动态效果。

【二】Window对象

【1】open()

// 语法window.open("url","target","features")url:指定的网址target:打开新标签页的方式 _blank  打开新窗口(默认) _self  原地打开features:指定打开的窗口大小的参数 'height=400px,width=400px'

【2】close()

• 关闭当前窗口。

window.close();

【3】setTimeout()

• 在指定的时间延迟后执行一次指定的函数或者一段代码。

setTimeout(function(){  // 执行代码}, 100); // 1秒后执行setTimeout(function () {    console.log("等会见")
}, 100); //1秒后执行

【4】setInterval()

• 以固定的时间间隔重复执行指定的函数或者一段代码。

setInterval(function(){  // 执行代码}, 200); // 每2秒执行一次setInterval(function () {    console.log("执行中...")
}, 200); // 每2秒执行一次

【5】alert()

• 显示一个带有指定消息和一个确认按钮的警告框。

window.alert("Hello, World!");

【6】confirm()

• 显示一个带有指定消息和两个按钮（确认和取消）的对话框。

if (window.confirm("Are you sure?")) {  // 用户点击了确认按钮} else {  // 用户点击了取消按钮}if (window.confirm("Are you sure?")) {    window.alert("yes")
} else {    window.alert("no")
}

【7】prompt()

• 显示一个带有指定消息和一个文本输入框的对话框。

let name = window.prompt("Please enter your name:");

【8】innerHeight属性

• 返回浏览器窗口的内部高度（即视口的高度），以像素为单位，不包括浏览器的工具栏、滚动条等元素。

let windowHeight = window.innerHeight;console.log(windowHeight); // 输出当前窗口的视口高度

【9】innerWidth属性

• 返回浏览器窗口的内部宽度（即视口的宽度），以像素为单位，不包括浏览器的工具栏、滚动条等元素。

let windowWidth = window.innerWidth;console.log(windowWidth); // 输出当前窗口的视口宽度

【10】监听 resize 事件

• 两个属性返回的值会随着窗口的大小调整而改变
• 如果需要监控窗口大小的改变，可以通过监听 resize 事件来实现
• 在使用这两个属性时，可以根据返回的数值进行相应的布局或调整操作，以适应当前窗口的尺寸。

window.addEventListener("resize", function() {  let windowHeight = window.innerHeight;  let windowWidth = window.innerWidth;  console.log("Window Height:", windowHeight);  console.log("Window Width:", windowWidth);
});

【11】window.opener

• 是指打开当前窗口的那个窗口对象。它是 Window 对象的一个属性，用于在当前窗口中引用到打开它的父窗口或者来源窗口。

• 在以下情况下可以使用 window.opener

（1）场景一：window.open()

• 当前窗口是通过使用 JavaScript 的 window.open() 方法打开的弹出窗口时，可以使用 window.opener 来引用打开它的父窗口。

let popup = window.open("popup.html"); // 打开一个弹出窗口

• 然后，在弹出窗口 popup.html 中的 JavaScript 代码中，可以通过 window.opener 引用到父窗口：

let parentWindow = window.opener;console.log(parentWindow); // 输出父窗口对象

（2）场景二：postMessage()方法

• 当前窗口是通过其他窗口向其发送消息（使用 postMessage() 方法）时，可以使用 event.source 属性来获取消息来源窗口，并通过 window.opener 来引用该来源窗口。
• 例如，在来源窗口的 JavaScript 代码中，向当前窗口发送消息：

let currentWindow = window.open("current.html"); // 打开当前窗口// 向当前窗口发送消息currentWindow.postMessage("Hello", "http://example.com");

• 然后，在当前窗口 current.html 中的 JavaScript 代码中，通过监听 message 事件接收来自来源窗口的消息，并使用 event.source 和 window.opener 引用到来源窗口：

window.addEventListener("message", function(event) {  let message = event.data;  let sourceWindow = event.source;  let openerWindow = window.opener;  console.log("Message:", message);  console.log("Source Window:", sourceWindow);  console.log("Opener Window:", openerWindow);
});

（3）在来源窗口的js代码中，向当前窗口发送消息

window.postMessage("Hello!");

【三】Window子对象

window.location // 控制地址window.history // 控制浏览器历史记录window.navigator // 获取浏览器标识信息

【1】window.document

• 此子对象表示当前窗口中的文档对象，用于对页面内容进行读取和修改操作。
• 通过 window.document，可以使用各种方法来查询和修改当前页面的 HTML 结构、CSS 样式和 DOM 元素。
• 例如，要获取页面标题：

let pageTitle = window.document.title;console.log(pageTitle);

【2】window.location

• 此子对象包含有关当前页面 URL 的信息，并提供了一些与页面导航相关的方法。
• 通过 window.location，可以获取当前页面的 URL、查询字符串参数、路径等信息，并且可以使用一些方法来导航到其他页面。
• 例如，要在新标签页中打开一个 URL：

window.location.href = 'https://example.com';

（1）window.location.href*

• 获取当前页面的完整 URL（包括协议、域名、路径等）。

let currentURL = window.location.href;console.log(currentURL);// 跳转到目标地址window.href = "url地址"

（2）window.location.protocol

• 获取当前页面的协议部分（例如 'http:' 或 'https:'）。

let protocol = window.location.protocol;console.log(protocol);

（3）window.location.host

• 获取当前页面的主机（域名和端口号）部分。

let host = window.location.host;console.log(host);

（4）window.location.hostname

• 获取当前页面的主机名部分。

let hostname = window.location.hostname;console.log(hostname);

（5）window.location.port

• 获取当前页面的端口号部分。

let port = window.location.port;console.log(port);

（6）window.location.pathname

• 获取当前页面的路径部分。

let pathname = window.location.pathname;console.log(pathname);

（7）window.location.search

• 获取当前页面的查询参数部分（即 URL 中问号后面的内容）。

let searchParams = window.location.search;console.log(searchParams);

（8）window.location.hash

• 获取当前页面的片段标识部分（即 URL 中井号后面的内容）。

let hash = window.location.hash;console.log(hash);

（9）window.location.assign()

• 将当前页面重定向到指定的 URL。

// 将当前页面重定向到 example.comwindow.location.assign("http://example.com");

（10）window.location.reload()*

• 重新加载当前页面。

// 重新加载当前页面window.location.reload();

【3】window.history

• 此子对象用于操作浏览器的历史记录，包括向前和向后导航。

• 通过 window.history，可以使用一些方法来在历史记录中向前或向后导航，以及获取当前历史记录的状态数量。

• 例如，要后退到上一个页面：

window.history.back();

（1）window.history.length

• 返回当前会话的历史记录条目数。

let historyLength = window.history.length;console.log(historyLength);

（2）window.history.back()*

• 加载上一个历史记录。相当于用户点击浏览器的后退按钮。

window.history.back();

（3）window.history.forward()*

• 加载下一个历史记录。相当于用户点击浏览器的前进按钮。

window.history.forward();

（4）window.history.go()

• 根据传入的整数参数，加载相对于当前历史记录的某个条目。负数表示后退，正数表示前进， 表示重新加载当前页。

// 后退两个历史记录window.history.go(-2);// 前进一个历史记录window.history.go(1);// 重新加载当前页window.history.go();

（5）window.history.pushState()

• 向浏览器历史记录中添加新的状态，并且不会触发页面的重新加载。它接受三个参数：state、title 和 URL。

// 添加新的历史记录状态window.history.pushState({ page: 1 }, "Page 1", "/page1.html");

（6）window.history.replaceState()

• 替换当前的历史记录状态，不会触发页面的重新加载。它接受三个参数：state、title 和 URL。

// 替换当前历史记录状态window.history.replaceState({ page: 2 }, "Page 2", "/page2.html");

【4】window.navigator

• 此子对象提供有关浏览器环境和设备的信息，包括用户代理字符串、浏览器版本、操作系统等。
• 例如，要获取用户代理字符串：

let userAgent = window.navigator.userAgent;console.log(userAgent);

（1）window.navigator.userAgent*

• 返回浏览器的用户代理字符串，该字符串包含了有关浏览器厂商、版本号以及操作系统等信息。（该方法可以用来校验反爬程序）

let userAgent = window.navigator.userAgent;console.log(userAgent);

（2）window.navigator.platform*

• 返回操作系统平台，如 "Win32"、"MacIntel" 等。

let platform = window.navigator.platform;console.log(platform);

（3）window.navigator.vendor

• 返回浏览器的厂商或供应商名称。

let vendor = window.navigator.vendor;console.log(vendor);

（4）window.navigator.language

• 返回浏览器的首选语言，通常是用户操作系统的默认语言。

let language = window.navigator.language;console.log(language);

（5）window.navigator.cookieEnabled

• 返回一个布尔值，表示浏览器是否启用了 cookie。

let cookieEnabled = window.navigator.cookieEnabled;console.log(cookieEnabled);

（6）window.navigator.plugins

• 返回一个包含浏览器插件列表的 PluginArray 对象。

let plugins = window.navigator.plugins;console.log(plugins);