The implementation of JavaScript consists of the following three parts:

  • ECMAScript(core) : Describes the syntax and basic objects of JS.

  • Browser Object Model (BOM) : Methods and interfaces for interacting with browsers

  • Document Object Model (DOM) : Methods and interfaces for handling web page content

DOM- Document object Model

The DOM (Document Object Model) is an application programming interface for HTML and XML. It is an API for manipulating the appearance of documents. It is an interface for manipulating the appearance of documents. DOM represents the current web page loaded into the browser window: the browser provides us with a map (or model) of the current web page, and we can read this map in JS.

  • D (document-document) can be understood as a Web page document loaded by the entire Web

  • O (object-object) can be thought of as something like a window object that only comes in, that can call properties and methods, and here we’re talking about a Document object,

  • M (model-model) can be understood as the tree structure of web documents, and DOM tree is composed of nodes

BOM- Browser object model

The BOM is the Browser Object Model. The BOM deals with Browser Windows and frames, but usually browser-specific JavaScript extensions are treated as part of the BOM. These extensions include:

  • New browser Windows alert, Confirm, and Prompt are displayed

  • Move, close, and resize browser Windows: scrollTo, moveTo, resizeTo, etc

  • Location objects that provide Web browser details: Navigator, History

  • Screen object that provides details about the user’s Screen resolution: Screen

  • Cookie support: cookie

  • IE extends the BOM to include the ActiveXObject class, which instantiates ActiveX objects through JavaScript

The Window object corresponds to the browser window itself, and the properties and methods of this object are often referred to as BOM

The DOM contains: window

  • The Window object contains properties: Document, Location, Navigator, Screen, History, frames

  • The Document root node contains child nodes: Forms, location, anchors, images, links

As can be seen from window.document, the most fundamental object of the DOM is a child of the WINDOW object of the BOM.

Differences: DOM describes the methods and interfaces used to process web content, BOM describes the methods and interfaces used to interact with the browser.

According to the W3C DOM specification, the DOM is an application programming interface (API) for HTML and XML, and the DOM maps the entire page to a file composed of hierarchical nodes. There are three levels: Level 1, Level 2 and Level 3.

Comparison between BOM and DOM

  • BOM for handling browser Windows and frames

  • The DOM is the interface that appears to manipulate documents and is an application program interface (API) for HTML and XML.

  • DOM is a W3C standard; [Common Standards for all Browsers]

  • BOM is the implementation of THE DOM by each browser vendor in their browser. [Shows that different browsers have different definitions and different implementation methods]

  • Window is a BOM object, not a JS object;

Javacsript accesses, controls, and modifies the client (Browser) by accessing the BOM (Browser Object Model) Object. Since the Window of the BOM contains the Document, the properties and methods of the Window Object can be directly used and perceived. Therefore, you can directly use the Document attribute of the Window object to access, retrieve, and modify the content and structure of an XHTML document. Because the Document Object is the root node of the DOM (Document Object Model) Model. In other words, the BOM contains the DOM(object), which is provided and accessed by the browser. From the BOM object to the DOM object, JS can manipulate the browser and the document that the browser reads. Where DOM contains: window

Structure relationship diagram of BOM and DOM

Reference article:

ECMAScript, BOM, DOM (core, browser object model and the document object model (DOM) www.cnblogs.com/best/p/8028…

JavaScript learning summary (3) the BOM and the DOM, rounding segmentfault.com/a/119000000…

Javascript BOM and DOM operation explanation (1) blog.csdn.net/openbox2008…

JavaWeb: JavaScript (BOM and DOM) blog.csdn.net/weixin\_423…

The HTML DOM Event object www.w3school.com.cn/jsref/dom_o…

The XML DOM object Element – www.w3school.com.cn/xmldom/dom_…

JAVAScript DOM and variance analysis of BOM www.cnblogs.com/fjner/p/589…

Reprint the home station article talk about BOM and DOM (1) : BOM and DOM overview “, please indicate the source: www.zhoulujun.cn/html/webfro…