JavaScript 中的 DOM 和 BOM 是什么？

They're just different objects you're dealing with:

• The DOM is the Document Object Model, which deals with the document, the HTML elements themselves, e.g. document and all traversal you would do in it, events, etc.
• The BOM is the Browser Object Model, which deals with browser components aside from the document, like history, location, navigator and screen (as well as some others that vary by browser).

• DOM - Document Object Model
• BOM - Browser Object Model

This article explains relationship between Javascript, DOM and BOM.

The BOM (Browser Object Model) consists of the objects navigator, history, screen, location and document which are children of window. In the document node is the DOM (Document Object Model), the document object model, which represents the contents of the page. You can manipulate it using javascript.

You can find more information about Javascript on Mozilla Foundation.

DOM

https://developer.mozilla.org/en-US/docs/DOM/DOM_Reference/Introduction

BOM

https://developer.mozilla.org/en-US/docs/WebAPI/Browser

DOM means Document Object model..when the webpage is loaded the browser creates a document object model for the page..All the objects are arranged as tree structure...

BOM means Browser Object Model.window object is supported by all browsers it represents the window browser..All global JavaScript objects, functions, and variables automatically become members of the window object.

BOM means Browser Object Model . These are objects that you can use to manipulate the browser. they are navigator

• navigator
• screen
• location
• history
• document

they are all children of the Window Object. DOM is Document Object Model is part of the BOM and it helps you manipulate the content of the loaded page file. this include the HTML and CSS

DOM -> Document Object Model in JavaScript is the API to access the elements inside the document. It maps the entire Document into an hierarchy of parent and child tree. Each node can hold number of children element or can inherit to other parent element in some or the other way.

BOM -> Browser Object Model is a larger representation of everything provided by the browser including the current document, location, history, frames, and any other functionality the browser may expose to JavaScript. The Browser Object Model is not standardized and can change based on different browsers.

DOM : The document object represents the whole html document. When html document is loaded in the browser, it becomes a document object.

BOM : The window object represents a window in browser. An object of window is created automatically by the browser.

BOM stands for Browser Object Model. Unlike DOM, there is no standard defined for BOM, hence different browsers implement it in different ways. The collection of browser objects is collectively known as the Browser Object Model.

BOM main task is to manage browser windows and enable communication between the windows (i.e BOM deals with entire browser). Each HTML page which is loaded into a browser window becomes a Document object and a document object is an object in the BOM. You can say BOM is a superset of DOM. BOM has many objects, methods, and properties that are not part of the DOM structure.

while

DOM stands for Document Object Model. It is a standard defined by W3C (World Wide Web Consortium) and is specific to current HTML document (i.e DOM deals with document alone). DOM is a programming interface (API) for representing and interacting with HTML, XHTML and XML documents. It organizes the elements of the document in a tree structure (DOM tree) and in the DOM tree, all elements of the document are defined as objects (tree nodes) which have properties and methods.

DOM tree objects can be accessed and manipulated with the help of any programming language since it is cross-platform and language-independent. DOM is a subset of BOM, we can manipulate DOM tree with the help of JavaScript and jQuery for example.

What is the DOM?

The DOM is a W3C (World Wide Web Consortium) standard.

The DOM defines a standard for accessing documents:

"The W3C Document Object Model (DOM) is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document."

DOM Methods:
document.getElementById(id)
document.getElementsByTagName(name)
document.getElementsByClassName(name)
document.createElement(element)
document.removeChild(element)

Properties:
document.body
document.cookie
document.doctype
document.documentElement
document.documentMode

More details

The Browser Object Model (BOM)
There are no official standards for the Browser Object Model (BOM).

Since modern browsers have implemented (almost) the same methods and properties for JavaScript interactivity, it is often referred to, as methods and properties of the BOM. It consists:

• window
• screen
• location
• history
• navigator
• popup alert
• timing
• cookies

More Details