JavaScript操作浏览器：BOM与DOM基础

“DAY04_BOM_DOM（上）.md”是关于JavaScript中浏览器对象模型(BOM)和文档对象模型(DOM)的介绍，重点讲解如何使用JavaScript操作浏览器功能和HTML元素。 在JavaScript中，对象可以分为两类：原生对象（Native Objects）和宿主对象（Host Objects）。原生对象是由ECMAScript标准定义的，例如Number、String、Boolean、Object、Array、Function、Date、RegExp以及内置对象Math和Global等。这些对象是JavaScript语言的基础部分，不依赖于任何特定的执行环境。而宿主对象则是由Web的运行环境，也就是操作系统或浏览器提供的。BOM和DOM就属于宿主对象，它们允许开发者与浏览器进行交互。 BOM，全称为Browser Object Model，主要提供了操作浏览器的能力。通过BOM，开发者可以获取浏览器窗口信息，如窗口大小（通过`innerHeight`和`innerWidth`属性），进行页面跳转，获取地址栏信息，操作滚动条，获取浏览器版本信息，以及弹出各种对话框。其中，BOM的核心是`window`对象，它是浏览器内置的一个全局对象，包含了所有与浏览器交互的方法。 - `innerHeight`和`innerWidth`分别用于获取浏览器窗口的可视区域高度和宽度，包括滚动条。 - `window.alert('message')`用于弹出一个带有确定按钮的提示框，仅显示信息。 - `window.confirm('message')`弹出一个询问框，提供确定和取消两个选项，返回值为用户点击的按钮状态，确定为`true`，取消为`false`。 DOM，即Document Object Model，是HTML和XML文档的标准对象模型。它将文档结构转化为一个树形结构，每个节点都是一个可操作的对象，使得开发者可以通过JavaScript来遍历、修改或添加页面元素。DOM提供了对HTML元素的操作接口，例如创建、查找、修改和删除元素。 在实际应用中，BOM和DOM常常结合使用，通过`window`对象，可以访问到DOM中的元素，从而实现对页面内容的动态更新和交互。例如，通过`document.getElementById('elementId')`或`document.querySelector('CSS选择器')`可以获取页面上的特定元素，然后通过该元素的属性和方法进行操作。 总结来说，BOM和DOM是JavaScript在Web开发中不可或缺的部分，它们提供了与浏览器和HTML页面进行交互的强大工具，使得开发者能够实现丰富的用户界面和动态效果。了解并熟练掌握BOM和DOM的使用，对于提升网页应用的用户体验和功能性具有重要意义。