JavaScript = ECMAscript+DOM+BOM

ECMAScript, the core of JavaScript, describes the language's syntax and basic objects.
The DOM describes the methods and interfaces for working with web content.
The BOM describes the methods and interfaces for interacting with the browser.

ECMAScript
Simply put, ECMAScript describes the following: syntax, types, statements, keywords, reserved words, operators, objects.
ECMAScript only makes a standard, defines all the properties, methods and objects of the scripting language, and does not involve the specific implementation of the scripting language. Other scripting languages (like javascript and Jscript) use ECMAScript as a benchmark to implement functionality and extensions, and then develop the DOM and BOM.

BOM stands for Browser Object Model, which is the window object in JavaScript.
The DOM is the Document Object Model, which is the document object in JavaScript. In fact, the complete writing is window.document (because the window can be omitted), so the DOM is actually an attribute of the BOM.

The following picture explains the relationship between them well:

The window (BOM) contains objects such as document, history, location, navigator, and screen, among which document is the DOM!

PS: BOM is the browser object model, including some operations of the browser, such as window.open, window.alert, window.close, etc. The BOM is between the different regulations of various browser manufacturers on the browser, so the compatibility is very poor.

Detailed BOM:
window object:
BOM enables JavaScript to "talk" with the browser, and the bridge of the dialogue is the window object.
The window object can be understood as an instance in the browser in JavaScript.
The operation on the properties of the window object can obtain or operate the state, size, position, etc. of the webpage label.
All JavaScript global objects, functions, and variables are automatically members of the window object.
Global variables are properties of the window object.
Global functions are methods of the window object.

screen object:
The Screen object contains information about the screen displayed by the client.
The screen object can be understood as an instance of the display in JavaScript.

navigator object:
The Navigator object contains information about the browser.
The navigator object can be understood as an instance of the current browser (not a web page tab) in JavaScript.

location object:
The Location object contains information about the current URL.
The location object can be understood as an instance of the current web page URL in JavaScript.
If the property of the location object is called, the corresponding value will be returned. If it is assigned a value, the property will be set to the assigned value, and the web page will be linked to the new address.

<html>
<body>
	<script type="text/javascript">
		alert(location.href);
		location.href = "http://www.baidu.com";
	</script>
	</body>
</html>

history object:
The History object contains the URLs that the user (in the browser window) has visited.
The history object can be understood as an instance of browser history in JavaScript.

<html>
	<body>
		<a onclick="history.go(-1);">上一页</a>
	</body>
</html>

DOM details:
Every HTML document loaded into the browser becomes a Document object.
The Document object allows us to access all the elements in the HTML page from script.
The document object can be understood as an instance of an HTML document in JavaScript.

<html>
	<head>
		<title>Sample Page</title>
	</head>
	<body>
		<p>hello world!</p>
	</body>
</html>

This code can be drawn into a node hierarchy using the DOM:

Reference link:

http://www.w3school.com.cn/js/pro_js_history.asp

JavaScript = ECMAscript+DOM+BOM

Guess you like