浏览器中的DOM和BOM，你应该要知道的那些事

2024-01-24 23:53:57

DOM（文档对象模型）是HTML和XML文档的编程接口，它将文档表示为一个对象的树形结构，每个对象代表文档中的一个元素。DOM允许开发者使用JavaScript来创建、修改和删除元素，添加事件监听器，以及操作文档结构。

BOM（浏览器对象模型）是JavaScript用于与浏览器交互的API，它提供了一系列属性和方法来操作窗口、导航和历史记录、以及定时器。BOM允许开发者使用JavaScript来控制浏览器的行为，例如打开和关闭窗口、导航到其他页面、设置定时器等。

DOM和BOM是前端开发人员必备的基本功，掌握了它们，就可以轻松地操作HTML文档和浏览器，构建出更加丰富和交互性的web应用。

下面是一些DOM和BOM的常用属性和方法：

DOM：
- document.getElementById()：根据ID获取元素
- document.getElementsByClassName()：根据类名获取元素
- document.createElement()：创建元素
- document.removeChild()：删除元素
- element.innerHTML：获取或设置元素的HTML内容
- element.style：获取或设置元素的样式
- element.addEventListener()：添加事件监听器
BOM：
- window.open()：打开一个新窗口
- window.close()：关闭当前窗口
- window.location：获取或设置当前页面的URL
- window.history：获取或设置浏览器的历史记录
- window.setTimeout()：设置定时器
- window.clearTimeout()：清除定时器

这些只是DOM和BOM的常用属性和方法的一部分，还有很多其他的属性和方法可以供开发者使用。

下面是一个使用DOM和BOM的简单实例：

// 获取ID为"my-button"的元素
const button = document.getElementById("my-button");

// 添加一个点击事件监听器
button.addEventListener("click", function() {
  // 打开一个新窗口
  window.open("https://www.baidu.com");
});