DOM：
1.Source(起源）：
在1998年，W3C发布了第一级的DOM规范。这个规范允许访问和操作HTML页面中的每一个单独的元素。
所有的浏览器都执行了这个标准，因此，DOM的兼容性问题也几乎难觅踪影了。
DOM可被JavaScript用来读取、改变HTML、XHTML以及XML文档。
DOM被分为不同的部分（核心、XML及HTML）和级别（DOM Level1/2/3）
Source 对象是 HTML5 中的新对象。
Source 对象表示 HTML <source> 元素。
2.Methods：
方法是我们可以在节点（HTML 元素）上执行的动作。
这里提供一些您将在本教程中学到的常用方法：
| 方法 | 描述 |
|---|---|
| getElementById() | 返回带有指定 ID 的元素。 |
| getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 |
| getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
| appendChild() | 把新的子节点添加到指定节点。 |
| removeChild() | 删除子节点。 |
| replaceChild() | 替换子节点。 |
| insertBefore() | 在指定的子节点前面插入新的子节点。 |
| createAttribute() | 创建属性节点。 |
| createElement() | 创建元素节点。 |
| createTextNode() | 创建文本节点。 |
| getAttribute() | 返回指定的属性值。 |
| setAttribute() | 把指定属性设置或修改为指定的值。 |
3.Contents:
DOM 是 W3C（万维网联盟）的标准。
DOM 定义了访问 HTML 和 XML 文档的标准：
“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：
4:Application:
1.DOM节点
childNodes 获取子节点，包括文本节点和元素节点，空格也会计算为节点，但在IE6-8下则为子节点个数，不包括空格，childNodes没有背景颜色。
2.操纵元素属性
设置元素：setAttribute(名称，值)
获取元素：getAttribute(名称)
删除：removeAttribute(名称)
3.用className选择元素
4.
创建、插入和删除元素
a、创建元素：creatElement
b、父级.appendChild(子节点) 追加元素，在父节点调用，追加到末尾
c、父级.insertBefore(子节点，再谁之前) 都是向父节点插入
d、父级.removeChild(子节点) 删除元素
5.文档碎片
a、文档碎片可以提高DOM操作性能
BOM:
1.Source:
BOM（起源）：BOM(Browser Object Mode) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
2.Methods
1. 窗口操作：
moveBy(dx,dy)：把浏览器窗口相对当前位置水平移动x个像素，垂直移动y个像素。
moveTo(x,y)：移动浏览器窗口，使它们的左上角位于用户屏幕的（x，y）处。
resizeBy(dw,dh)：相对于浏览器窗口的当前大小，把它的宽度调整x个像素，高度调整y个像素。
resizeTo(w,h)：把窗口的宽度调整为x，高度调整为y。不能为负数。
★IE提供了window.screenLeft和window.screenTop对象来判断窗口的位置。document.body.offsetWidth和document.body.offsetHeight属性可获取视口大小。
★Mozilla提供了window.screenX和window.screenY属性判断窗口的位置;windows.innerWidth和windows.innerHeight属性来判断视口的大小;window.outerWidth和window.outerHeight属性判断浏览器窗口自身的大小。
2. 导航和打开新窗口：
打开新窗口：window.open("新窗口的URL","名字","特性字符串");
各种设置：
Left：窗口的左坐标,不能为负数；
Top：窗口的上坐标,不能为负数；
Height：窗口的高度,不能小于100；
Width：窗口的宽度,不能小于100；
Resizable：判断窗体是否能拖动,默认为no；
Scrollable：判断窗体不要显示内容时是否滚动，默认为no；
Toolbar：判断是否显示工具栏，默认为no；
Status：判断是否显示状态栏，默认为no；
location：断是否显示地址栏，默认为no。
关闭自身窗体：window.close（）；
3. 系统对话框：
警告框：alert("XXX");
确认框：confirm("XXX");
输入框：prompt("‘XXX")
4．状态栏
window.defaultStatus=”XXXXXX”
wingdow.status=”XXXXXX”
5. 时间间隔和暂停：
setTimeout();等待XX毫秒后执行.
clearTimeout();取消
setInterval(); 等待XX毫秒后执行
clearInterval();取消
6. 历史：
后退一页：window.history.go(-1);或history.back()
前进一页：window.history.go(1); 或history.forward()
二、document对象：
document对象的一些通用属性：
1. lastModified：最后修改的日期，是字符串；
2. referrer：浏览器历史中后退一个位置的URL；
3. title：标签中显示文本；
4.URL：当前载入的页面的URL。
改变框架标题：top.document.title=”新的页面标题”；
如把窗口导航到新页面：
document.URL = "http://www.baidu.com";
3.Contents:
Document对象：该对象代表浏览器窗口中所加载的文档。使用Document对象可以操作文档中的内容。在整个BOM中，只有Document对象是与HTML文档的内容相关的。
Frames数组：该数组代表浏览器窗口中的框架。HTML中允许将一个浏览器窗口分为多个框架，每个框架中可以加载一个HTML文档。在这种框架页中，每一个框架都是Frames数组中的一个元素。而Frames数组中的每一个元素都是一个Window对象。
History对象：该对象代表当前浏览器窗口的浏览历史。通过该对象可以将当前浏览器窗口中的文档前进或后退到某一个已经访问过的URL（统一资源定位符）。
Location对象：该对象代表当前文档的URL。URL分为几个部分，如协议部分、主机部分、端口部分等。使用Location对象可以分别获得这些部分，并且可以通过修改这些部分的值来加载一个新文档。
Navigator对象：该对象是浏览器对象，代表了浏览器的信息。该对象与Window对象不同，Window对象可以用于控制浏览器窗口的一些属性，如浏览器窗口大小、位置等。而Navigator对象包含的是浏览器的信息，如浏览器的名称、版本号等。
Screen对象：该对象代表当前显示器的信息。使用Screen对象可以获得用户显示器的分辨率、可用颜色数量等信息。
Document对象代表HTML文档，而HTML文档中包括了有很多元素，BOM也将这些元素看成了不同的对象。
Anchors数组：该数组代表了文档中的所有锚。数组中的每一个元素都是一个锚对象。每一个锚对象都对应着HTML文档中的一个包含name属性的标签，通过锚对象可以获得锚的命名，以及超链接中的文字。
Applets数组：该数组代表了嵌在网页中的所有小程序。数组中的每一个元素都是一个Applet对象，通过Applet对象可以获得Java小程序的公有字段。
Embeds数组：与Applets类似，但建议使用Embeds数组。
BOM体系结构Forms数组：该数组代表文档中的所有表单。数组中的每一个元素都是一个Form对象。每一个Form对象都对应着HTML文档中的一个<form>标签。通过Form对象可以获得表单中的各种信息，也可以提交或重置表单。由于表单中还包括了很多表单元素，因此，Form对象的子对象还可以对这些表单元素进行引用，以完成更具体的应用。
Images数组：该数组代表文档中的所有图片。数组中的每一个元素都是一个Image对象。每一个Image对象都对应着HTML文档中的一个<img>标签。通过Image对象可以获得图片的各种信息。
Links数组：该数组代表文档中的所有超链接。数组中的每一个元素都是一个Link对象。每一个Link对象都对应着HTML文档中的一个包含href属性的<a>标签，通过Link对象可以获得超链接中URL的各部分信息。
Location对象：该对象与Window对象中的Location对象完全相同。由于该对象与HTML文档并没有太大关系，因此，该对象是反对使用的对象，建议使用Window对象的Location子对象。
4.Application:
BOM（应用）：BOM是browser object model的缩写，简称浏览器对象模型，它的作用有：
1. 弹出新的浏览器窗口、移动、关闭浏览器窗口及调整窗口大小；
2. 提供WEB浏览器详细信息的导航对象；
3. 提供装载到浏览器中页面的详细信息的定位对象；
4. 提供用户屏幕分辩率详细信息的屏幕对象；
5. 对cookie的支持
原文：https://www.cnblogs.com/yangjianyu/p/9837586.html