BOM和DOM介绍、Window对象、Window子对象
【一】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.com
window.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);
