Navigator 对象
Navigator 对象包含有关浏览器的信息。到底提供哪些信息很大程度取决于用户的浏览器，但是也有一些公共的属性，如userAgent 存在所有的浏览器中
Navigator 对象常见的属性
window.navigator.appCodeName //返回浏览器的代码名 'Mozilla' window.navigator.appName //返回浏览器的名称 'Netscape' window.navigator.appVersion //返回浏览器的平台和版本信息 //'5.0 (iPhone; CPU iPhone OS 13_2_3 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.0.3 Mobile/15E148 Safari/604.1' window.navigator.cookieEnabled //返回指明浏览器中是否启用 cookie 的布尔值 true window.navigator.platform //返回运行浏览器的操作系统平台 'MacIntel' window.navigator.userAgent //返回由客户机发送服务器的user-agent 头部的值 //'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/101.0.4951.64 Safari/537.36'
使用场景
检测插件
可以检测浏览器内是否安装了特定的插件
navigator.plugins
判断系统类型，版本信息
location对象
location 对象 是最有用的BOM对象之一
它既是window对象的属性，也是document对象的属性，window.location 和document.location引用的是同一个对象。
常见属性
- href: 当前window对应的超链接URL, 整个URL;
- protocol: 当前的协议;
- host: 主机地址;
- hostname: 主机地址(不带端口);
- port: 端口;
- pathname: 路径;
- search: 查询字符串;
- hash: 哈希值;
- username:URL中的username(很多浏览器已经禁用);
- password:URL中的password(很多浏览器已经禁用);
常用方法
- assign:赋值一个新的URL，并且跳转到该URL中;
- replace:打开一个新的URL，并且跳转到该URL中(不同的是不会在浏览记录中留下之前的记录);
- reload:重新加载页面，可以传入一个Boolean类型;如果把该方法的参数设置为 true，那么无论文档的最后修改日期是什么，它都会绕过缓存，从服务器上重新下载该文档。
location.assign("http://www.baidu.com") location.href = "http://www.baidu.com" location.replace("http://www.baidu.com") location.reload(false)
Screen对象
在编程中使用不多，只用来表明客户端的能力，其中包括浏览器窗口外部的显示器的信息，如像素的宽度和高度，每个浏览器的screen对象都包含着不同的属性。根据具体业务场景去查询就好。
history 对象
history对象允许我们访问浏览器曾经的会话历史记录。
history对象有两个属性
- length:会话中的记录条数;
- state:当前保留的状态值;
history对象有五个方法:
- back():返回上一页，等价于history.go(-1);
- forward():前进下一页，等价于history.go(1);
- go():加载历史中的某一页;
- pushState():打开一个指定的地址;
- replaceState():打开一个新的地址，并且使用replace;
总结
BOM 以window对象为依托，表示浏览器窗口以及页面可见区域
DOM
document Object Model 文档对象模型
节点层次
DOM可以把任何HTML和XML文档描绘成一个由多层节点构成的树形结构。
<html> <head> <meta charset="UTF-8"> <title>测试</title> </head> <body> <h1>标题</h1> <ul> <1i> <a href="#">链接</a> </1i> </ul> </body> </html>
上图中就包括DOM的主要节点
Document文档节点
表示整个 HTML 页面(相当于 document 对象)
当需要访问任何标签、属性或文本时，都可以通过文档节点进行导航
Element元素节点 ul h1 li
表示 HTML 页面中的标签(即 HTML 页面的结构)
当访问 DOM 树时，需要从查找元素节点开始
Attr 属性节点 href
表示 HTML 页面中的开始标签包含的属性
Text 文本节点 比如title的内容
Node 类型
所有的DOM节点类型都继承自Node接口，每个节点都有一个nodeType属性，用于表明节点的类型。
对于HTML文档，节点主要有以下六种类型：Document节点、DocumentType节点、Element节点、Attribute节点、Text节点和DocumentFragment节点。
分类
| 节点 | 名称 | 含义 |
Document |
文档节点 | 整个文档（window.document） |
| DocumentType | 文档类型节点 | 文档的类型（比如 'DOCTYPE html'） |
| Element | 元素节点 | HTML元素（比如body、a等） |
| Attribute | 属性节点 | HTML元素的属性（比如class="right"） |
| Text | 文本节点 | HTML文档中出现的文本 |
| DocumentFragment | 文档碎片节点 | 文档的片段 |
常用属性
Node 有几个非常用且重要的属性
- nodeName:node节点的名称;
- nodeType:可以区分节点的类型;
- nodeValue:node节点的值;
- childNodes:所有的子节点;
Document 类型
JavaScript 通过Document 类型表示整个文档。
Document 类型可以表示 HTML 页面或者 其他基于 XML 的文档。不过最常用的应用还是作为HTMLDocument实例的document 对象。
在浏览器中 document 对象是 HTMLDocument的一个实例，表示整个HTML页面。而且，document对象也是window对象的一个属性，因此可以作为全局对象来访问。
常见属性
- document.body 返回文档的body元素
- document.title 返回当前文档的标题
- document.head 返回当前文档的head内容
- document.children[0] 返回当前文档html内容
常见方法
- 创建元素
- 获取标签元素
// 创建元素 const imageEl = document.createElement("img") const imageEl2 = new HTMLImageElement() // 获取元素 const divEl1 = document.getElementById("box") const divEl2 = document.getElementsByTagName("div") const divEl3 = document.getElementsByName("title")
- 文档写入
将输出流写入到网页的能力。
document.write() document.writeln() document.open() document.close()
