JS中bom和dom区别是什么？

让你五行代码

于 2023-03-29 15:32:34 发布

阅读量237

点赞数

文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/zy1992As/article/details/129838125

版权

在web前端中，BOM(浏览器对象模型)和 DOM(文档对象模型)是 JavaScript 中的两个重要概念，它们都是 JavaScript 访问和操作浏览器的方式。它们之间的主要区别是：

　　·BOM：提供了与浏览器交互的对象，例如 Window、Location、Navigator 等，它们可以让我们控制浏览器窗口、重定向页面、检测浏览器版本等等。

　　·DOM：提供了与文档交互的对象，例如 Document、Element、Attribute 等，它们可以让我们获取和修改 HTML 页面的内容和结构。

　　接下来我们用一个简单的示例来演示下如何使用BOM和DOM来获取和修改页面元素：

<!DOCTYPE html>
<html>
<head>
  <title>BOM vs DOM</title>
</head>
<body>
  <h1 id="myHeading">Hello World</h1>

  <button onclick="changeText()">Change Text</button>

  <script>
    // 使用 BOM 获取页面元素
    var heading = window.document.getElementById("myHeading");

    // 使用 DOM 修改页面元素
    function changeText() {
      heading.innerHTML = "Hello JavaScript";
    }
  </script>
</body>
</html>

　　在这个例子中，我们使用BOM的window.document对象来获取页面中的标题元素，并使用DOM的innerHTML属性来修改标题的文本内容。当用户点击按钮时，changeText()函数会被调用，从而改变页面上的文本。