JS基础之BOM ｜ DOM（持续更新...）

1、BOM：浏览器对象模型的奇妙世界

window：表示浏览器实例

location：加载文档的信息和常用导航功能实例

navigator：客户端标识和信息的对象实例

screen：客户端显示器信息

history：当前窗口建立以来的导航历史记录

浏览器对象模型（BOM）是前端开发中不可或缺的一部分，它为我们提供了与浏览器进行交互的手段。在这个奇妙的世界里，我们将深入了解BOM的各个属性，窥探它们的秘密。

1，?window属性：窗口之谜

在BOM中，window对象是至关重要的。它不仅代表了浏览器实例，还拥有许多属性，如top、parent、self等，它们像一把魔法钥匙，打开了各种神秘之门。

1. top、parent、self属性：?这三者都涉及窗口的层级关系。top属性指向最外层窗口，parent属性指向当前窗口的父窗口，而self属性则指向窗口本身。这些属性犹如窗户间的秘密通道，让我们可以在不同层级之间穿梭。
2. 弹窗与定时器：?window对象提供了一系列弹窗和定时器的方法，如alert、confirm、prompt、setTimeout、setInterval等。这些方法就像是BOM的信使，通过它们，我们可以向用户展示信息、获取输入，甚至掌握时间的魔法。
3. 窗口控制：?open方法可以打开一个新窗口，而close方法则能关闭当前窗口。moveBy、moveTo、resizeBy、resizeTo等方法则是在窗口间自由穿梭和调整大小的法宝。
4. 滚动与导航：?scrollBy和scrollTo方法使得我们能够在页面上轻松滚动，而history对象则记录了窗口导航的历史，包括访问过的网址数量以及前进、后退的操作。

2，location属性：定位网页的坐标

在BOM中，location对象是我们定位网页信息的导航仪。它拥有许多属性，每个属性都是一段关于当前网页位置的信息。

1. URL的构成：?location.href属性能获取或设置当前页面的URL，而其他属性如protocol、host、hostname、port、pathname、search、hash则分别表示URL的协议、主机、域名、端口、路径、查询字符串和哈希值。
2. origin的奥秘：?通过location.origin属性，我们可以一举获取到URL的协议、域名和端口，为我们提供了方便的方式来构建资源的绝对路径。

?3，navigator属性：探秘浏览器的身份

navigator对象是BOM中关于浏览器的身份证明，它让我们能够深入了解用户使用的浏览器和操作系统。

1. User?Agent的密码：?navigator.userAgent属性返回浏览器的User?Agent字符串，这是一段神秘的密码，包含了浏览器的厂商和版本信息。
2. 操作系统信息：?navigator.platform属性则揭示了用户的操作系统信息，如MacIntel、Win32、Linux?x86_64等。这是我们追踪用户设备的有力工具。
3. 语言的诗篇：?navigator.language属性返回用户的首选语言，为我们提供了一个了解用户语言偏好的途径。
4. 在线状态的魔法：?navigator.onLine属性告诉我们用户当前是在线还是离线，这是处理网络状态的关键信息
5. 地理位置的宝藏：**?navigator.geolocation属性则为我们提供了用户地理位置的信息，通过这个信息，我们可以为用户提供更加个性化的服务。需要注意的是，该API在HTTPS协议下才可用，这也是为了保障用户隐私和安全。

?4，screen属性：屏幕的色彩世界

screen对象带我们踏上屏幕的色彩之旅，通过这个对象，我们可以获取关于用户显示器的各种信息。

1. 高度和宽度的魔法：?availHeight和availWidth属性分别返回屏幕的可用高度和宽度，不包括Windows任务栏。而height和width属性则是返回屏幕的总高度和宽度。
2. 色彩的深度：?pixelDepth属性揭示了屏幕的颜色分辨率，这是在设计图形界面时至关重要的信息。

?5，history属性：历史的记忆碑

history对象是浏览器历史记录的守护者，通过这个对象，我们可以对用户在浏览器中的行为进行了如指掌。

1. 历史记录的数量：?history.length属性告诉我们当前窗口访问过的网址数量，包括当前网页。这是一个记录用户行为的宝库。
2. 历史状态的密码：?history.state属性存储着History堆栈最上层的状态值，这是一个关键的信息，我们可以通过这个状态值来还原用户在页面中的状态。
3. 回溯与前进的魔法：?history.back()和history.forward()方法分别用于返回上一个网址和前进到下一个网址。而history.go()方法则接受一个整数参数，使我们能够跳转到指定的网址。
4. 历史的修改：?history.pushState()和history.replaceState()方法是修改History对象记录的关键。通过这两个方法，我们可以在历史中添加一条记录，而不触发页面刷新，使得用户在浏览器中的体验更为流畅。

2.?DOM的意义：开启交互与动态网页

DOM的存在使得我们能够创建交互式和动态的网页。通过DOM提供的方法和属性，我们可以实时地修改网页的内容和结构，而无需重新加载整个页面。这使得用户体验更为流畅，也为动态网页的开发提供了有力支持。

同时，DOM的标准化使得开发者可以编写在不同浏览器上一致运行的代码，而不受底层渲染引擎的影响。这为跨浏览器兼容性提供了便利，让开发者能够更专注于功能的实现，而非不同浏览器的差异性。

在现代Web应用开发中，DOM更是至关重要。许多前端框架如React、Angular和Vue.js都建立在DOM的基础上，通过提供高效和声明式的方法来处理用户界面更新和状态管理。

3.?DOM的基本操作：创造、删除、修改、查询

在DOM的世界里，我们可以通过一系列操作来改变文档的结构和内容。以下是一些常见的DOM操作：

增加（Create）：

?通过createElement和createTextNode方法，我们可以创建新的元素节点和文本节点。而appendChild和insertBefore方法则允许我们将新节点添加到指定节点的末尾或在指定节点之前。

删除（Delete）：

?removeChild方法用于从其父节点中移除指定的子节点，这为文档的精细调整提供了便捷手段。

修改（Update）：?

通过setAttribute和removeAttribute方法，我们可以设置或移除指定元素的属性。innerText属性可以设置或返回节点的文本内容，不包括HTML标签，而innerHTML则包括HTML标签。

查询（Retrieve）：?

通过一系列获取元素的方法，如getElementById、getElementsByTagName、getElementsByClassName、querySelector、querySelectorAll等，我们可以轻松地获取文档中的元素。此外，一些属性如parentNode、childNodes、firstChild、lastChild、nextSibling、previousSibling、nodeValue、getAttribute、tagName等也允许我们获取元素的各种信息。

在DOM的世界中，我们掌握了这些操作，就仿佛拥有了一把打开文档奇妙世界的钥匙。DOM的力量在于它的灵活性和丰富性，为我们提供了构建更加交互和动态的网页的无限可能。因此，在前端的道路上，深刻理解和熟练运用DOM，将为我们打开更广阔的发展空间。