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

"BOM和DOM（上）-介绍JavaScript操作浏览器和HTML元素的基本概念与方法" 在今天的课程中，我们将探讨BOM（Browser Object Model，浏览器对象模型）和DOM（Document Object Model，文档对象模型）的概念，特别是如何使用JavaScript来操控浏览器功能以及HTML元素。BOM主要关注的是对浏览器自身特性的控制，而DOM则是关于页面中HTML结构的抽象表示。 BOM的核心是`window`对象，它是浏览器内置的一个全局对象，提供了许多用于操作浏览器的功能。例如，通过`window`对象，我们可以获取到浏览器窗口的尺寸，包括`innerHeight`和`innerWidth`属性，它们分别返回浏览器窗口的内部高度和宽度，包括滚动条。以下是一个简单的示例： ```javascript var windowHeight = window.innerHeight; console.log(windowHeight); var windowWidth = window.innerWidth; console.log(windowWidth); ``` BOM还允许我们执行页面跳转、获取当前URL信息、操作滚动条，以及获取浏览器的版本等。此外，它提供了一些常见的对话框方法，如`alert`、`confirm`和`prompt`，用于与用户交互。 - `alert`方法用于显示警告对话框，通常包含一条信息和一个“确定”按钮，用户点击后对话框关闭。 - `confirm`方法显示一个带有信息和“确定”、“取消”两个按钮的确认对话框，用户的选择会被返回为布尔值，`true`表示“确定”，`false`表示“取消”。 - `prompt`方法则会弹出一个输入对话框，用户可以输入文本，对话框有两个按钮：“取消”和“确定”。如果用户点击“取消”，返回值为`null`；如果点击“确定”，则返回输入的文本。 ```javascript // 示例代码 window.alert('我是一个提示框'); var boo = window.confirm('我是一个询问框'); console.log(boo); var str = window.prompt('请输入内容'); console.log(str); ``` 接下来，我们转向DOM，DOM是HTML和XML文档的标准表示，它将文档解析成一个由节点组成的树形结构。通过DOM，我们可以查找、访问、修改或添加页面上的任何元素。例如，如果我们想获取页面上某个ID为"example"的元素，可以使用`document.getElementById`方法： ```javascript var element = document.getElementById('example'); ``` DOM提供了丰富的API，如`getElementById`、`getElementsByClassName`、`getElementsByTagName`等，用于查找元素，以及`appendChild`、`removeChild`、`innerHTML`等，用于修改元素内容和结构。 总结起来，BOM和DOM是JavaScript在Web开发中不可或缺的部分，它们让我们能够动态地控制页面行为和内容，从而实现丰富的交互式用户体验。了解和熟练掌握这两者对于任何前端开发者来说都至关重要。在下一部分中，我们将深入讨论DOM的操作方法及其应用。