• home > webfront > SGML > xml >

    再谈BOM和DOM(1):BOM与DOM概述

    Author:zhoulujun Date:

    DOM是为了操作文档出现的接口,浏览器向我们提供了当前网页的地图或者说模型,而我们可以通过js去读取这张地图对html元素进行查找及修改,BOM主要是处理浏览器窗口和框架,比如操作浏览器历史记录,获取浏览器信息等。

    JavaScript的实现包括以下3个部分:

    • ECMAScript(核心):描述了JS的语法和基本对象。

    • 浏览器对象模型(BOM):与浏览器交互的方法和接口

    • 文档对象模型 (DOM):处理网页内容的方法和接口

    DOM-文档对象模型

    DOM(文档对象模型)是 HTML 和 XML 的应用程序接口,是操作文档出现的 API,是为了操作文档出现的接口。DOM代表着被加载到浏览器窗口里的当前网页:浏览器向我们提供了当前网页的地图(或者说模型),而我们可以通过js去读取这张地图。

    • D(文档-document)可以理解为整个Web加载的网页文档

    • O(对象-object)可以理解为类似window对象只来的东西,可以调用属性和方法,这里我们说的是document对象,

    • M(模型-model)可以理解为网页文档的树形结构,DOM树由节点构成

    BOM-浏览器对象模型

    BOM 是 Browser Object Model,浏览器对象模型,BOM 主要是处理浏览器窗口和框架,不过通常浏览器特定的 JavaScript 扩展都被看做 BOM 的一部分。这些扩展包括:

    • 弹出新的浏览器窗口:alert、confirm、prompt

    • 移动、关闭浏览器窗口以及调整窗口大小:scrollTo、moveTo、resizeTo等

    • 提供 Web 浏览器详细信息的定位对象:Navigator、History

    • 提供用户屏幕分辨率详细信息的屏幕对象:Screen

    • 对 cookie 的支持:cookie

    • IE 扩展了 BOM,加入了 ActiveXObject 类,可以通过 JavaScript 实例化 ActiveX 对象

    window对象对应着浏览器窗口本身,这个对象的属性和方法通常被称为BOM

    DOM包含:window

    • Window对象包含属性:document、location、navigator、screen、history、frames

    • Document根节点包含子节点:forms、location、anchors、images、links

    从window.document已然可以看出,DOM的最根本的对象是BOM的window对象的子对象。

    区别:DOM描述了处理网页内容的方法和接口,BOM描述了与浏览器进行交互的方法和接口。

    根据W3C DOM规范,DOM是HTML与XML的应用编程接口(API),DOM将整个页面映射为一个由层次节点组成的文件。有1级、2级、3级共3个级别。

    BOM与DOM的对比

    • BOM为了处理浏览器窗口和框架

    • DOM为了操作文档出现的接口,是 HTML 和 XML 的应用程序接口(API)。

    • DOM是 W3C 的标准; [所有浏览器公共遵守的标准]

    • BOM 是 各个浏览器厂商根据 DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]

    • window 是 BOM 对象,而非 js 对象;


    javacsript是通过访问BOM(Browser Object Model)对象来访问、控制、修改客户端(浏览器),由于BOM的window包含了document,window对象的属性和方法是直接可以使用而且被感知的,因此可以直接使用window对象的document属性,通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM(Document Object Model)模型的根节点。可以说,BOM包含了DOM(对象),浏览器提供出来给予访问的是BOM对象,从BOM对象再访问到DOM对象,从而js可以操作浏览器以及浏览器读取到的文档。其中DOM包含:window

    BOM和DOM的结构关系示意图

    8c1f686c9694b8d837ba4b67451dcd6c_articlex.jpeg


    参考文章:

    ECMAScript、BOM、DOM(核心、浏览器对象模型与文档对象模型)https://www.cnblogs.com/best/p/8028168.html

    JavaScript学习总结(三)BOM和DOM详解 https://segmentfault.com/a/1190000000654274

    Javascript操作BOM和DOM详解(1) https://blog.csdn.net/openbox2008/article/details/85260063

    JavaWeb学习总结:JavaScript(BOM和DOM) https://blog.csdn.net/weixin_42384085/article/details/99807198

    HTML DOM Event 对象 https://www.w3school.com.cn/jsref/dom_obj_event.asp

    XML DOM - Element 对象 https://www.w3school.com.cn/xmldom/dom_element.asp

    JAVAScript中DOM与BOM的差异分析 https://www.cnblogs.com/fjner/p/5892325.html


    转载本站文章《再谈BOM和DOM(1):BOM与DOM概述》,
    请注明出处:https://www.zhoulujun.cn/html/webfront/SGML/xml/2020_0317_8346.html