DOM和BOM的区别

最新推荐文章于 2024-07-28 21:35:25 发布

克里斯蒂亚诺更新

最新推荐文章于 2024-07-28 21:35:25 发布

阅读量169

点赞数 2

分类专栏： Vue 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_36152801/article/details/137657807

版权

Vue 专栏收录该内容

39 篇文章 0 订阅

订阅专栏

DOM（Document Object Model）和 BOM（Browser Object Model）是两种不同的对象模型，用于表示浏览器中的不同部分和功能。它们之间的主要区别在于它们所代表的内容和功能不同。

DOM 代表的是文档对象模型，用于表示 HTML 或 XML 文档的结构和内容，以及对这些结构和内容进行操作的方法和属性。

BOM 代表的是浏览器对象模型，用于表示浏览器窗口和浏览器本身的各种属性和方法，以及与浏览器交互的功能。

下面是一个简单的例子来说明 DOM 和 BOM 的区别：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM vs. BOM</title>
</head>
<body>
    <div id="content">
        <p>Hello, world!</p>
    </div>
    <script>
        // DOM 示例：获取并修改文档中的内容
        const paragraph = document.querySelector('p');
        paragraph.textContent = 'Hello, DOM!';

        // BOM 示例：获取并修改浏览器窗口的大小
        window.resizeTo(500, 500);
    </script>
</body>
</html>

在上面的例子中：

使用 DOM，我们通过 document.querySelector 方法获取了页面中的段落元素，并且使用 textContent 属性修改了段落的内容，从而改变了页面的显示效果。
使用 BOM，我们通过 window 对象的 resizeTo 方法改变了浏览器窗口的大小，但是这并没有影响到文档内容的显示。

通过这个例子，可以看出 DOM 和 BOM 分别代表了文档和浏览器的不同部分，它们有着不同的功能和作用。

克里斯蒂亚诺更新

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
DOM和BOM的区别

DOM（Document Object Model）和 BOM（Browser Object Model）是两种不同的对象模型，用于表示浏览器中的不同部分和功能。DOM 代表的是文档对象模型，用于表示 HTML 或 XML 文档的结构和内容，以及对这些结构和内容进行操作的方法和属性。BOM 代表的是浏览器对象模型，用于表示浏览器窗口和浏览器本身的各种属性和方法，以及与浏览器交互的功能。通过这个例子，可以看出 DOM 和 BOM 分别代表了文档和浏览器的不同部分，它们有着不同的功能和作用。
复制链接

扫一扫

专栏目录