JavaScript 中的 DOM 和 BOM 是什么

js Java

1个回答

写回答

zzxnannayug

2025-07-09 19:15

+ 关注

Java
Java

JavaScript中的DOM和BOM是什么？

在JavaScript编程中，DOM（文档对象模型）和BOM（浏览器对象模型）是非常重要的概念。DOM提供了访问和操作HTML文档元素的方法和属性，而BOM则提供了与浏览器窗口进行交互的方法和属性。

DOM（文档对象模型）

DOM是一种基于对象的表述，将HTML文档中的每个元素（如标签、属性、文本等）都看作对象，并且这些对象之间存在层级关系。通过DOM，我们可以使用JavaScript来操作HTML文档的结构和内容，实现动态的网页效果。

DOM的层级结构可以用一棵树来表示，其中最顶层的节点是文档节点（Document Node），它是整个文档的入口。文档节点下面是元素节点（Element Node），表示HTML文档中的标签，如、

等。元素节点可以包含子元素节点和文本节点。文本节点（Text Node）表示HTML文档中的文本内容。

通过DOM，我们可以使用一系列的方法和属性来操作这些节点，如创建、删除、修改节点，以及获取和设置节点的属性和内容。例如，我们可以使用document.getElementById()方法来获取指定id的元素节点，并使用innerHTML属性来获取或设置该元素的内容。

下面是一个示例代码，演示了如何使用DOM来动态修改HTML文档的内容：

Javascript
<!DOCTYPE html>
<html>
  <head>
    <title>DOM示例</title>
    <script>
      function changeText() {
        var element = document.getElementById("myElement");
        element.innerHTML = "Hello, DOM!";
      }
    </script>
  </head>
  <body>
    <h1 id="myElement">原始文本</h1>
    <button onclick="changeText()">点击按钮</button>
  </body>
</html>

在上面的代码中，我们定义了一个changeText()函数，在点击按钮时会调用该函数。函数内部通过getElementById()方法获取id为"myElement"的元素节点，并使用innerHTML属性将其内容修改为"Hello, DOM!"。这样，当我们点击按钮时，页面上的文本就会被动态地更新。

BOM（浏览器对象模型）

BOM是与浏览器窗口进行交互的对象模型。它提供了一些方法和属性，用于操作浏览器窗口的大小、位置、历史记录等信息，以及与浏览器进行通信。

BOM的核心对象是window对象，它表示当前浏览器窗口。通过window对象，我们可以获取和设置浏览器窗口的大小、位置等属性，以及加载新的网页、弹出对话框等。

除了window对象，BOM还提供了其他一些对象，如location对象用于获取和设置当前页面的URL信息，history对象用于操作浏览器的历史记录，navigator对象用于获取浏览器的相关信息等。

下面是一个示例代码，演示了如何使用BOM来弹出一个对话框：

Javascript
<!DOCTYPE html>
<html>
  <head>
    <title>BOM示例</title>
    <script>
      function showAlert() {
        window.alert("Hello, BOM!");
      }
    </script>
  </head>
  <body>
    <button onclick="showAlert()">点击按钮</button>
  </body>
</html>

在上面的代码中，我们定义了一个showAlert()函数，在点击按钮时会调用该函数。函数内部使用window.alert()方法弹出一个对话框，显示"Hello, BOM!"的消息。这样，当我们点击按钮时，就会弹出一个包含该消息的对话框。

DOM和BOM是JavaScript中非常重要的概念，通过DOM我们可以操作HTML文档的结构和内容，实现动态的网页效果；通过BOM我们可以与浏览器窗口进行交互，操作窗口的大小、位置、历史记录等。掌握DOM和BOM的使用，可以让我们更好地控制和定制网页的交互行为。

举报有用（4）分享收藏

JavaScript 中的 DOM 和 BOM 是什么

1个回答

zzxnannayug

热门话题

相关问题