HTML DOM和BOM之间的区别是什么

在本文中，我们将了解文档对象模型（DOM）和浏览器对象模型（BOM），以及通过示例了解它们的基本实现和差异。

文档对象模型（DOM） 是用于HTML和XML文档的编程接口，允许创建、操作或删除文档中的元素。它定义了文档的逻辑结构以及访问和操作文档的方式。借助DOM的帮助，网页可以以结构化的层次结构表示，即我们可以使用文档对象提供的命令或方法轻松访问和操作HTML的标签、ID、类、属性或元素，这将指导程序员和用户更轻松地理解文档。

HTML用于构建网页，JavaScript用于为我们的网页添加行为。当HTML文件加载到浏览器时，JavaScript无法直接理解HTML文档。因此，创建了相应的文档（DOM）。DOM基本上是相同HTML文档的一个表示，但使用了对象的形式以不同的格式展示。DOM提供了几种方法来查找和操作HTML元素的行为：

getElementById()方法： 此方法返回具有给定ID的元素。
getElementsByClassName()方法： 此方法返回包含文档中指定类名的所有元素的对象。
getElementsByName()方法： 此方法按名称返回特定文档的所有元素集合。
getElementsByTagName()方法： 此方法按给定标签名称返回文档中的所有元素集合。
querySelector()方法： 此方法用于返回文档中与指定CSS选择器匹配的第一个元素。
querySelectorAll()方法： 此方法用于返回与指定CSS选择器匹配的元素的子元素集合，作为静态NodeList对象。

示例1： 此示例使用DOM的概念，通过使用getElementById()方法获取具有唯一ID的图像。

HTML

<!DOCTYPE html> 
<html> 
  
<body style="text-align: center;"> 
    <div> 
        <h1 style="color: green;"> 
              GeeksforGeeks 
          </h1> 
        <p>Click on the button to see image</p> 
        <img id="image"> 
    </div> 
    <button type="button" 
            onclick="show()" 
            id="btnID"> 
        Show Image 
    </button> 
    
    <script> 
        function show() { 
            let image = document.getElementById("image"); 
            image.src = 
"https://media.geeksforgeeks.org/wp-content/uploads/20210915115837/gfg3.png" 
            document.getElementById("btnID") 
                .style.display = "none"; 
        } 
    </script> 
</body> 
  
</html>

输出：

HTML DOM和BOM之间的区别是什么

浏览器对象模型（BOM） 是特定于浏览器的约定，指的是由Web浏览器公开的所有对象。BOM允许JavaScript与浏览器“交互”。窗口对象表示浏览器窗口及其所有对应的功能。窗口对象由浏览器自动创建。Java Script的window.screen对象包含有关用户屏幕的信息。也可以省略window前缀。此对象模型支持以下窗口属性：

screen.width ： screen.width属性以像素为单位返回用户的屏幕宽度。
screen.height ： screen.height属性以像素为单位返回用户的屏幕高度。
screen.availWidth ： screen.availWidth属性以像素为单位返回用户屏幕的宽度，不包括界面特征。
screen.availHeight ： screen.availHeight属性以像素为单位返回用户屏幕的高度，不包括界面特征。
screen.colorDepth ： screen.colorDepth属性返回用于显示一种颜色的位数（数字）。
screen.pixelDepth ： screen.pixelDepth属性返回屏幕的像素深度。

BOM还支持以下窗口方法：

window.open()方法 ：此方法用于打开一个具有指定URL和名称的新标签页或窗口。
window.close()方法 ：此方法用于关闭由window.open()方法先前打开的特定窗口或标签页。
window.moveTo()方法 ：此方法用于在窗口中移动窗口左上角的坐标。
window.moveBy()方法 ：此方法用于将窗口相对于当前坐标移动指定的像素数。
window.resizeTo()方法 ：此方法用于将窗口调整为指定的宽度和高度。

示例2： 此示例使用BOM的概念来打开和关闭浏览器窗口。

HTML

<!DOCTYPE html> 
<html> 
  
<body style="display: flex;  
            flex-direction: column; 
            justify-content:center; 
            align-items:center;"> 
    <div class="container" 
         style="position: relative; 
                text-align: center;"> 
        <h1 style="color: rgb(18, 154, 18);"> 
            GeeksforGeeks 
        </h1> 
        <h3> window open and close method</h3> 
        <button onclick="windowOpen()"> 
            Open GeeksforGeeks 
        </button> 
        <button onclick="windowClose()"> 
            Close GeeksforGeeks 
        </button> 
    </div> 
    <script> 
        let Window; 
          
        // Function that open the new Window 
        function windowOpen() { 
            Window = window.open( 
                "https://www.geeksforgeeks.org/", 
                "_blank", "width=400, height=300, top=230, left=540"); 
        } 
          
        // function that Closes the open Window 
        function windowClose() { 
            Window.close(); 
        } 
    </script> 
</body> 
  
</html>

输出：

HTML DOM和BOM之间的区别是什么

DOM（文档对象模型）和BOM（浏览器对象模型）的区别：

文档对象模型（DOM）	浏览器对象模型（BOM）
主要关注显示文档的结构。	主要关注浏览器特定的功能。
提供了一个标准化的接口，用于访问和修改HTML或XML文档的元素和内容。	允许JavaScript与超出文档结构操作范围的浏览器功能进行交互。
当HTML文档加载到浏览器中时，它就变成了一个文档对象。	在这种情况下，浏览器会自动创建窗口对象。
提供了访问和操作、动态更新Web文档的结构、内容和样式的功能。	提供了不同的功能，用于控制浏览器窗口、处理导航、管理历史记录和访问与浏览器有关的信息。
直接控制Web文档内容，并允许遍历和修改其元素和属性。	不能直接访问Web文档的内容。