js BOM和DOM是什么

前言

同样是对一个基础的查缺补漏，以最精炼的话概括DOM与BOM究竟是什么，通俗易懂，一篇掌握，面试无忧。

DOM（文档对象模型）

概念

• DOM是文档对象模型，html页面上的从顶级元素html开始，包括中间的body、div等等标签，它们在被加载时同时会生成一个文档对象，js可以通过这个对象处理网页内容，这对象就是DOM。

节点

1. DOM文档对象由节点构成，节点有很多种，但是最主要节点有三种：元素节点、文本节点和属性节点，nodeType可以获取它们的节点类型值，这三种分别对应值1，2，3。
2. HTML的标签元素就是DOM的元素节点，而这些元素节点也都是一个个对象，用DOM提供的方法可以获得这些对象，比如js通过DOM操作网页之前需要使用document.getElementById获取元素对象等。

BOM（浏览器对象模型）

概念

• BOM是浏览器对象模型，该对象模型提供一些对象，这些对象提供一些方法，可以用于js操作浏览器一些功能。

对象

1. window对象：BOM的核心，表示正打开的窗口，同时也是html中的js所说的全局对象，且全局对象上的方法和属性使用时不用加上前缀window，比如我们常常使用的alert，实际上是window.alert，剩下介绍的三个对象都存在于 window 对象上。

2. location对象：提供一些属性返回url请求的信息，比如host：服务器名称+端口，以下记录一些常用的

   属性	结果
   href	整个url(http://www.xxx.com:8080/test/index.html?xxxx)
   protocol	协议（http:）
   hostname	服务器名称 （www.xxx.com）
   post	端口（8080）
   host	服务器名称+端口(www.xxx.com:8080)
   pathname	url请求路径部分 (/test/index.html)
   search	搜索部分 (?xxxx)

3. navigator对象：检测当前浏览器一些信息，比如是什么浏览器什么内核等等，做兼容性处理时用得到。

4. history对象：可以对当前用户会话产生的路由栈进行跳转，back（向后跳转一页）、forward（向前跳转一页）、go（拥有一个入参值，指定页数前后跳转）

尾言

如果觉得文章还不错的话，欢迎点赞收藏哦，感谢，最后封面壁纸送上~