一、DOM
1. 什么是DOM
文档对象模型 Document Object Model
文档对象模型 是表示和操作 HTML和XML文档内容的基础API
文档对象模型，是W3C组织推荐的处理可扩展标记语言的标准编程接口
2. DOM分类
核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型
二、节点
2.1 什么是节点
文档中的每一个部分都是节点,包括document 元素 属性 文本...
2.2 节点的分类
Doctype 文档类型
Document 文档 Element 元素 Attr 属性
Text 文本
Comment 注释
2.3 节点属性
nodeName 节点名字
nodeValue 节点值
nodeType 节点类型
三、获取元素对象
3.1 通过js选择器
getElement系列
querySelector系列
四、 文档结构和遍历文档
4.1 节点关系
父节点 父元素
子节点 子元素
同辈节点 同辈元素
祖先节点 祖先元素
后代节点 后代元素
4.2 作为节点树的文档
parentNode 父节点childNodes 所有子节点的集合 firstChild 第一个子节点 lastChild 最后一个子节点 nextSibling 下一个兄弟节点 previousSibling 上一个兄弟节点
4.3 作为元素树的文档
parentElement 父元素（大部分情况下 parentElement 等同于 parentNode）children 所有子元素的集合
firstElementChild 第一个子元素lastElementChild 最后一个子元素 nextElementSibling 下一个兄弟元素 previousElementSibling 上一个兄弟元素
五、 属性
5.1 HTML标签的属性和元素对象的属性
HTMLElement对象映射了元素的HTML属性
5.2 获取和设置非标准的HTML属性
getAttribute(attrname) 获取自定义或内置属性的值setAttribute(attrnane, value) 设置自定义或内置属性 hasAttribute(attrname) 判断是否存在该属性 removeAttribute() 移出自定义或内置的属性
5.3 作为Attr节点的
setAttributeNode()
getAttributeNode()document.createAttribute() 创建属性节点
var attr = document.createAttribute('class');
attr.value = 'active';
box.setAttributeNode(attr);
六、 元素的内容
6.1 作为HTML的元素内容
innerHTML
outerHTML
6.2 作为纯文本的元素内容
innerText 会忽略多余空白
6.3 作为Text节点的元素内容
文本节点的方法
appendData() 向文本节点追加内容
deleteData() 删除文本节点的一部分内容
insertData() 向文本节点中插入内容
replaceData() 替换内容
substringData() 截取内容
创建文本节点
document.createTextNode()
七、 创建、插入、删除 元素节点
7.1 创建节点
document.createElement()
7.2 插入节点
appendChild() 在元素的最后追加一个子元素
insertBefore() 在元素指定的位置插入一个子元素
7.3 删除节点
removeChild()
7.4 替换节点
replaceChild(new_node, old_node)
7.5 克隆节点
cloneNode()
参数
true 克隆元素以及所有的厚点节点
false 仅仅克隆节点本身
八、Document对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
8.1 属性
URL 获取当前页面的url 只读
domain 获取域名
referrer 获取上一个页面的地址 只读
title 标签标题
location 网站地址信息
lastModified 最后一次修改事件
cookie
8.2 方法
write()
writeln()
浏览器对象模型BOM
1. 浏览器对象模型介绍
BOM(Browser Object Model) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。
BOM的左右
弹出新浏览器窗口的能力；
移动、关闭和更改浏览器窗口大小的能力；
可提供WEB浏览器详细信息的导航对象；
可提供浏览器载入页面详细信息的本地对象；
可提供用户屏幕分辨率详细信息的屏幕对象；
支持Cookies；
2. 各对象详解
3.1 window
window对象是客户端JavaScript的全局对象是所有客户端JavaScript特性和API的主要接入点它表示Web浏览器的一个窗口或窗体,并且用标识符window来引用它
window 对象属性
| 属性 | 描述 |
|---|---|
| document | 对 Document 对象的只读引用。 |
| history | 对 History 对象的只读引用。 |
| location | 用于窗口或框架的 Location 对象。 |
| navigator | 对 Navigator 对象的只读引用。 |
| screen | 对 Screen 对象的只读引用。 |
| frames | 返回窗口中所有命名的框架。该集合是 Window 对象的数组，每个 Window 对象在窗口中含有一个框架。 |
| length | 设置或返回窗口中的框架数量。 |
| parent | 返回父窗口。 |
| top | 返回最顶层的父窗口。 |
| name | 设置或返回窗口的名称。 |
| opener | 返回对创建此窗口的窗口的引用。 |
| closed | 返回窗口是否已被关闭。 |
| defaultStatus | 设置或返回窗口状态栏中的默认文本。 |
| status | 设置窗口状态栏的文本。 |
| self | 返回对当前窗口的引用。等价于 Window 属性。 |
| innerHeight | 返回窗口的文档显示区的高度。 |
| innerWidth | 返回窗口的文档显示区的宽度。 |
| outerHeight | 返回窗口的外部高度，包含工具条与滚动条。 |
| outerWidth | 返回窗口的外部宽度，包含工具条与滚动条。 |
| pageXOffset | 设置或返回当前页面相对于窗口显示区左上角的 X 位置。 |
| pageYOffset | 设置或返回当前页面相对于窗口显示区左上角的 Y 位置。 |
| screenLeft | 返回相对于屏幕窗口的x坐标 |
| screenTop | 返回相对于屏幕窗口的y坐标 |
| screenX | 返回相对于屏幕窗口的x坐标 |
| screenY | 返回相对于屏幕窗口的y坐标 |
| scrollX | 返回窗口水平滑动的距离 |
| scrollY | 返回窗口垂直滑动的距离 |
window对象方法
| 方法 | 描述 |
|---|---|
| alert() | 显示带有一段消息和一个确认按钮的警告框。 |
| confirm() | 显示带有一段消息以及确认按钮和取消按钮的对话框。 |
| prompt() | 显示可提示用户输入的对话框。 |
| focus() | 把键盘焦点给予一个窗口。 |
| blur() | 把键盘焦点从顶层窗口移开。 |
| open() | 打开一个新的浏览器窗口或查找一个已命名的窗口。 |
| close() | 关闭浏览器窗口。 |
| print() | 打印当前窗口的内容。 |
| createPopup() | 创建一个 pop-up 窗口。 |
| setInterval() | 按照指定的周期（以毫秒计）来调用函数或计算表达式。 |
| setTimeout() | 在指定的毫秒数后调用函数或计算表达式。 |
| clearInterval() | 取消由 setInterval() 设置的 timeout。 |
| clearTimeout() | 取消由 setTimeout() 方法设置的 timeout。 |
| moveBy() | 可相对窗口的当前坐标把它移动指定的像素。(仅IE) |
| moveTo() | 把窗口的左上角移动到一个指定的坐标。（仅IE） |
| resizeBy() | 按照指定的像素调整窗口的大小。(仅IE) |
| resizeTo() | 把窗口的大小调整到指定的宽度和高度。(仅IE) |
| scrollBy() | 按照指定的像素值来滚动内容。 |
| scrollTo() | 把内容滚动到指定的坐标。 |
3.2 Localtion
Location 对象包含有关当前 URL 的信息。
Location 对象是 window 对象的一部分，可通过 window.Location 属性对其进行访问。
Location 对象属性
| 属性 | 描述 |
|---|---|
| href | 返回完整的URL |
| protocol | 返回一个URL协议 |
| host | 返回一个URL的主机名和端口 |
| hostname | 返回URL的主机名 |
| port | 返回一个URL服务器使用的端口号 |
| pathname | 返回的URL路径名。 |
| search | 返回一个URL的查询部分 |
| hash | 返回一个URL的锚部分 |
Location 对象方法
| 方法 | 说明 |
|---|---|
| assign() | 载入一个新的文档 |
| reload() | 重新载入当前文档 |
| replace() | 用新的文档替换当前文档 |
3.3 History
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
History 对象属性
| 属性 | 说明 |
|---|---|
| length | 返回历史列表中的网址数 |
History 对象方法
| 方法 | 说明 |
|---|---|
| back() | 加载 history 列表中的前一个 URL |
| forward() | 加载 history 列表中的下一个 URL |
| go() | 加载 history 列表中的某个具体页面 |
3.4 Navigator
Navigator 对象属性
| 属性 | 说明 |
|---|---|
| appCodeName | 返回浏览器的代码名 |
| appName | 返回浏览器的名称 |
| appVersion | 返回浏览器的平台和版本信息 |
| cookieEnabled | 返回指明浏览器中是否启用 cookie 的布尔值 |
| platform | 返回运行浏览器的操作系统平台 |
| userAgent | 返回浏览器用于 HTTP 请求的用户代理头的值 |
Navigator 对象方法
| 方法 | 描述 |
|---|---|
| javaEnabled() | 指定是否在浏览器中启用Java |
| taintEnabled() | 规定浏览器是否启用数据污点(data tainting) |
3.5 Screen
Screen 对象包含有关客户端显示屏幕的信息。
Screen 对象属性
| 属性 | 说明 |
|---|---|
| availHeight | 返回屏幕的高度（不包括Windows任务栏） |
| availWidth | 返回屏幕的宽度（不包括Windows任务栏） |
| colorDepth | 返回目标设备或缓冲器上的调色板的比特深度 |
| height | 返回屏幕的总高度 |
| pixelDepth | 返回屏幕的颜色分辨率（每象素的位数） |
| width | 返回屏幕的总宽度 |