不妨这样去理解JavaScript中的dom和bom

JavaScript是由三大部分组成：核心ECMAScript、文档对象模型-DOM、浏览器对象模型-BOM。
这里我们主要来讲解下BOM和DOM。

一. DOM

JavaScript可以通过DOM来获取文档里的标签、属性等内容，也可以用来操控文档内容

Document

文档，这里的文档指的是XML和HTML的页面。当你创建一个页面并且加载到浏览器中，DOM就悄然而生。

Object

在学习JavaScript过程中，你一定频繁地听过这样一句话“一切皆为对象”。我们可以把JavaScript中的对象分为三种：

用户自定义对象，如let o = {}
内置对象，无需我们自己创建，如Array、String、Math等。
宿主对象，这里指的是浏览器提供的对象，如Document和Window。

Model

顾名思义，就是模型的意思。

DOM把文档表示为一棵树，有一个主干和无数的子分支。如，

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <h1>Hello World!</h1>
    <p>欢迎观看本次文章，包含以下内容：</p>
    <ul>
        <li>ECMAScript</li>
        <li>DOM</li>
        <li>BOM</li>
    </ul>
</body>
</html>

可抽象成DOM树：
在这里插入图片描述

二. BOM

BOM提供了与浏览器交互的方法。如，

移动、缩放和关闭浏览器窗口的功能
提供浏览器详细信息的 navigator 对象
提供浏览器所加载页面的详细信息的 location 对象
提供用户显示器分辨率详细信息的 screen 对象
对 cookies 的支持
像 XMLHttpRequest 和 IE 的 ActiveXObject 这样的自定义对象

W3C把浏览器中 JavaScript 最基本的部分标准化，已经将 BOM 的主要方面纳入了 HTML5 的规范中。

三. 总结

JavaScript不光包括核心的ECMAScript，还包括用于操控文档的Dom和用于操控浏览器的Bom。

Dom主要用来操控（添加、删除、修改、查询）html文档标签，而bom主要用来跟浏览器进行交互。此外，在学习DOM时，还应关注DOM事件传递机制，具体文章《从八道面试题看JavaScript DOM事件机制》

BOM可用来：

// navigator检测浏览器类型
var ua = navigator.userAgent
var isChrome = ua.indexOf('Chrome')
console.log(isChrome)
// screen获取屏幕大小
console.log(screen.width)
console.log(screen.height)
//location获取url
console.log(location.href); //整个URL; http://www.jianshu.com/
console.log(location.host) // www.jianshu.com
console.log(location.protocol); //协议 http https
console.log(location.pathname); //域名之后的路径; writer#/
console.log(location.search); // 问号后面的查询字符串
console.log(location.hash); // 哈希
//history获取浏览历史
history.back();
history.forward();

四. 参考

https://blog.csdn.net/xiao__gui/article/details/8315148
https://juejin.im/post/5bf24cf851882511a852803d