从DOM到BOM，JavaScript教你与浏览器无障碍沟通！

DOM：文档对象模型

文档对象模型（DOM）是JavaScript用来表示网页元素的模型。它是一棵树形结构，其中每个节点代表一个网页元素。我们可以通过DOM来获取元素的属性、样式和内容，也可以通过DOM来操作元素。

操作元素

我们可以通过DOM来获取元素的属性、样式和内容。例如，以下代码获取元素的ID：

var element = document.getElementById("myElement");
var id = element.id;

我们可以通过DOM来操作元素。例如，以下代码更改元素的样式：

var element = document.getElementById("myElement");
element.style.color = "red";

BOM：浏览器对象模型

浏览器对象模型（BOM）是JavaScript用来与浏览器进行交互的模型。它提供了许多属性和方法来获取浏览器信息和操作浏览器窗口。

获取浏览器信息

我们可以通过BOM来获取浏览器信息。例如，以下代码获取浏览器的名称和版本：

var browserName = navigator.appName;
var browserVersion = navigator.appVersion;

操作浏览器窗口

我们可以通过BOM来操作浏览器窗口。例如，以下代码打开一个新的浏览器窗口：

window.open("http://www.example.com");

总结

DOM和BOM是JavaScript中两个非常重要的对象模型。DOM用于表示网页元素，而BOM用于与浏览器进行交互。通过使用DOM和BOM，我们可以轻松地操作网页元素和与浏览器进行交互。

实例

以下是一些使用DOM和BOM的实例：

• 使用DOM来更改元素的样式：

var element = document.getElementById("myElement");
element.style.color = "red";

• 使用BOM来打开一个新的浏览器窗口：

window.open("http://www.example.com");

• 使用BOM来获取浏览器的名称和版本：

var browserName = navigator.appName;
var browserVersion = navigator.appVersion;