1、BOM
BOM(Browser Object Model) 即浏览器对象模型，主要是指一些浏览器内置对象如：window、location、navigator、screen、history等对象，用于完成一些操作浏览器的特定API。用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
- BOM是browser object model的缩写，简称浏览器对象模型
- BOM提供了独立于内容而与浏览器窗口进行交互的对象
- 由于BOM主要用于管理窗口与窗口之间的通讯，因此其核心对象是window
- BOM由一系列相关的对象构成，并且每个对象都提供了很多方法与属性
- BOM缺乏标准，JavaScript语法的标准化组织是ECMA，DOM的标准化组织是W3C
- BOM最初是Netscape浏览器标准的一部分
BOM结构
从上图可以看出：DOM是属于BOM的一个属性。
window对象是BOM的顶层(核心)对象，所有对象都是通过它延伸出来的，也可以称为window的子对象。
由于window是顶层对象，因此调用它的子对象时可以不显示的指明window对象。
1.2 BOM导图
1.3、window对象
window对象在浏览器中具有双重角色：它既是ECMAscript规定的全局global对象，又是javascript访问浏览器窗口的一个接口。
Window 对象代表一个浏览器窗口或一个框架。Window 对象会在 <body> 或 <frameset> 每次出现时被自动创建。
- 对象方法如图1、2、3
图一:
图二:
图三：
1.4、history对象
history对象保存着用户上网的历史记录，使用go()实现在用户的浏览记录中跳转：history.go(-1) 等价于history.back()
history.go(1) 等价于 history.forward()
history.go(1) //前进两页
history.go('jb51.net')
1.5、navigator对象
这个对象代表浏览器实例，其属性很多，但常用的不太多。如下：
navigator.userAgent：用户代理字符串，用于浏览器监测中、
navigator.plugins:浏览器插件数组，用于插件监测
navigator.registerContentHandler 注册处理程序，如提供RSS阅读器等在线处理程序。
1.6、location对象
location对象提供了当前窗口加载的文档的相关信息，还提供了一些导航功能。事实上，这是一个很特殊的对象，location既是window对象的属性，又是document对象的属性。
location对象提供了当前窗口加载的文档的相关信息，还提供了一些导航功能。事实上，这是一个很特殊的对象，location既是window对象的属性，又是document对象的属性。
location.hash #contents 返回url中的hash，如果不包含#后面的内容，则返回空字符串
location.host best.cnblogs.com:80 返回服务器名称和端口号
location.port 80 返回端口号
location.hostname best.cnblogs.com 返回服务器名称
location.href http://best.cnblogs.com 返回当前加载页面的完整url
location.pathname /index.html 返回url中的目录和文件名
location.protocol http 返回页面使用的协议
location.search ?q=javascript 返回url中的查询字符串
改变浏览器的位置：location.href=http://www.baidu.com
如果使用location.replace('http://www.baidu.com'),不会在历史记录中生成新纪录，用户不能回到前一个页面。
location.reload()：重置当前页面，可能从缓存，也可能从服务器；如果强制从服务器取得，传入true参数
2、DOM
DOM（文档对象模型）是针对HTML和XML文档的一个API，通过DOM可以去改变文档。
在DOM中，HTML文档的层次结构被表示为一个树形结构。并用document对象表示该文档，树的每个子节点表示HTML文档中的不同内容。
每个载入浏览器的 HTML 文档都会成为 Document 对象,Document是探索DOM的入口,利用全局变量document可以访问Document对象.
- 将HTML代码分解为DOM节点层次图:
DOM通过创建树来表示文档，描述了处理网页内容的方法和接口，从而使开发者对文档的内容和结构具有空前的控制力，用DOM API可以轻松地删除、添加和替换节点。
1)节点类型:
DOM规定文档中的每个成分都是一个节点（Node）,HTML文档可以说由节点构成的集合，DOM节点有:
类型 |
描述 |
元素节点（Element） |
上图中<html>、<body>、<p>等都是元素节点，即标签。 |
文本节点（Text） |
向用户展示的内容，如<li>...</li>中的JavaScript、DOM、CSS等文本。 |
属性节点（Attr） |
元素属性，元素才有属性,如<a>标签的链接属性href="http://www.baidu.com"。 |
2） DOM节点三大属性（XML DOM）
属性 |
描述 |
nodeName |
元素节点、属性节点、文本节点分别返回元素的名称、属性的名称和#text的字符串。
|
nodeType |
元素节点、属性节点、文本节点的nodeType值分别为1、2、3.、
|
nodeValue |
元素节点、属性节点、文本节点的返回值分别为null、属性值和文本节点内容。 |
Node为所有节点的父接口，其定义了一组公共的属性和方法，如下：
| nodeType | 返回节点类型的数字值（1~12） |
| nodeName | 元素节点:标签名称(大写)、属性节点:属性名称、文本节点:#text、文档节点:#document |
| nodeValue | 文本节点:包含文本、属性节点:包含属性、元素节点和文档节点:null |
| parentNode | 父节点 |
| parentElement | 父节点标签元素 |
| childNodes | 所有子节点 |
| children | 第一层子节点 |
| firstChild | 第一个子节点，Node 对象形式 |
| firstElementChild | 第一个子标签元素 |
| lastChild | 最后一个子节点 |
| lastElementChild | 最后一个子标签元素 |
| previousSibling | 上一个兄弟节点 |
| previousElementSibling | 上一个兄弟标签元素 |
| nextSibling | 下一个兄弟节点 |
| nextElementSibling | 下一个兄弟标签元素 |
| childElementCount | 第一层子元素的个数(不包括文本节点和注释) |
| ownerDocument | 指向整个文档的文档节点 |
节点关系方法：
hasChildNodes() 包含一个或多个节点时返回true
contains() 如果是后代节点返回true
isSameNode()、isEqualNode() 传入节点与引用节点的引用为同一个对象返回true
compareDocumentPostion() 确定节点之间的各种关系
2.2 选择器
getElementById() |
一个参数:元素标签的ID |
| getElementsByTagName() | 一个参数:元素标签名 |
| getElementsByName() | 一个参数:name属性名 |
| getElementsByClassName() | 一个参数:包含一个或多个类名的字符串 |
classList |
返回所有类名的数组
|
| querySelector() | 接收CSS选择符，返回匹配到的第一个元素，没有则null |
| querySelectorAll() | 接收CSS选择符，返回一个数组，没有则返回[] |
2.3、样式操作方法style
| style.cssText | 可对style中的代码进行读写 |
| style.item() | 返回给定位置的CSS属性的名称 |
| style.length | style代码块中参数个数 |
| style.getPropertyValue() | 返回给定属性的字符串值 |
| style.getPropertyPriority() | 检测给定属性是否设置了!important，设置了返回"important";否则返回空字符串 |
| style.removeProperty() | 删除指定属性 |
| style.setProperty() | 设置属性，可三个参数:设置属性名，设置属性值，是否设置为"important"(可不写或写"") |
2.4元素节点ELEMENT
| nodeName | 访问元素的标签名 |
| tagName | 访问元素的标签名 |
| createElement() | 创建节点 |
| appendChild() | 末尾添加节点，并返回新增节点 |
| insertBefore() | 参照节点之前插入节点，两个参数：要插入的节点和参照节点 |
| insertAfter() | 参照节点之后插入节点，两个参数：要插入的节点和参照节点 |
| replaceChild() | 替换节点，两个参数：要插入的节点和要替换的节点(被移除) |
| removeChild() | 移除节点 |
| cloneNode() | 克隆，一个布尔值参数，true为深拷贝，false为浅拷贝 |
| importNode() | 从文档中复制一个节点，两个参数：要复制的节点和布尔值(是否复制子节点) |
| insertAdjacentHTML() | 插入文本，两个参数：插入的位置和要插入文本
|
2.5、属性节点attributes
attributes |
获取所有标签属性 |
| getAttribute() | 获取指定标签属性 |
| setAttribute() | 设置指定标签属 |
| removeAttribute() | 移除指定标签属 |
var s = document.createAttribute("age") s.nodeValue = "18" |
创建age属性 设置属性值为18 |
2.6、文本节点TEXT
| nnerText | 所有的纯文本内容，包括子标签中的文本 |
| outerText | 与innerText类似 |
| innerHTML | 所有子节点(包括元素、注释和文本节点) |
| outerHTML | 返回自身节点与所有子节点 |
| textContent | 与innerText类似，返回的内容带样式 |
| data | 文本内容 |
| length | 文本长度 |
| createTextNode() | 创建文本 |
| normalize() | 删除文本与文本之间的空白 |
| splitText() | 分割 |
| appendData() | 追加 |
| deleteData(offset,count) | 从offset指定的位置开始删除count个字符 |
| insertData(offset,text) | 在offset指定的位置插入text |
| replaceData(offset,count,text) | 替换，从offset开始到offscount处的文本被text替换 |
| substringData(offset,count) | 提取从ffset开始到offscount处的文本 |
2.7文档节点 Document
| document.documentElement | 代表页面中的<html>元素 |
| document.body | 代表页面中的<body>元素 |
| document.doctype | 代表<!DOCTYPE>标签 |
| document.head | 代表页面中的<head>元素 |
| document.title | 代表<title>元素的文本，可修改 |
| document.URL | 当前页面的URL地址 |
| document.domain | 当前页面的域名 |
| document.charset | 当前页面使用的字符集 |
| document.defaultView | 返回当前 document对象所关联的 window 对象，没有返回 null |
| document.anchors | 文档中所有带name属性的<a>元素 |
| document.links | 文档中所有带href属性的<a>元素 |
| document.forms | 文档中所有的<form>元素 |
| document.images | 文档中所有的<img>元素 |
| document.readyState | 两个值:loading(正在加载文档)、complete(已经加载完文档) |
| document.compatMode | 两个值：BackCompat：标准兼容模式关闭、CSS1Compat：标准兼容模式开启 |
write()、writeln()、 open()、close() |
write()文本原样输出到屏幕、writeln()输出后加换行符、 open()清空内容并打开新文档、close()关闭当前文档，下次写是新文档 |
附：DOM基本操作思维导图
