BOM、DOM
BOM
BOM模型中常用对象
BOM(Browser Object Model)浏览器对象模型，提供了一系列对象用于和浏览器窗口进行交互，这些对象主要包括window、document、location、navigator和screen。
A. window对象
1.window对象的常用属性
window对象是整个JavaScript脚本运行的顶层对象，它的常用属性有：
| document | 返回该窗口内装载的HTML文档 |
| location | 返回该窗口装载的HTML文档的URL |
| navigator | 返回浏览当前页面的浏览器，包含一系列浏览器属性(名称、版本号、平台等)。 |
| screen | 返回当前者屏幕对象 |
| history | 返回该浏览器窗口的历史 |
注：这些属性都属于window对象的自对象，每个子对象内部也提供了各自的属性和方法，来进行对浏览器的操作。
2.window对象的常用方法
| alert()、confirm()、prompt() | 分别用于弹出警告窗口，确认对话框和提示输入对话框 |
| close() | 关闭窗口 |
| moveBy()、moveTo() | 移动窗口 |
| resizeBy()、resizeTo() | 重设窗口大小 |
| scrollBy()、scrollTo() | 滚动当前窗口的HTML文档 |
| open(url,name,property) | 打开一个新窗口加载新URL所指向的地址，并可指定新属性 |
| setInterval()、clearInterval() | 设置，删除定时器 |
注：moveBy()、moveTo()、resizeBy()、resizeTo()谷歌火狐浏览器不兼容。open方法中property对于不同浏览器有兼容问题。
B. history对象
history对象常用方法
| back() | 后退到上一个浏览的页面。该页面为第一个打开时，无效 |
| forward() | 前进到上一个浏览的页面。该页面为第一个打开时，无效 |
| go(intValue) | 指定前进或后退多少页面。正前进，负后退 |
例如：go(-1)=back(),go(1)=forward()
C. location对象
location对象常用属性
| hostname | 文档所在地址的主机名 |
| href | 文档所在地址的URL地址 |
| host | 文档所在地址的主机地址 |
| port | 文档所在地址的服务端口 |
| pathname | 文档所在地址的文件地址 |
| protocol | 装载文档所使用的协议，如HTTP |
D. screen对象
screen对象常用属性
| availHeight | 窗口可以使用的屏幕高度，单位px |
| availWidth | 窗口可以使用的屏幕宽度，单位px |
| colorDepth | 用户浏览器表示的颜色位数，通常为32位（每像素的位数） |
E. navigator对象
navigator常用属性
| appCodeName | 浏览器代码名的字符串表示 |
| appName | 官方浏览器名的字符串表示 |
| appVersion | 浏览器版本信息的字符串表示 |
| platform | 浏览器所在计算机平台的字符串表示 |
| userAgent | 用户代理头的字符串表示 |
| cookieEnabled | 启用cookie，返回true。否则返回false |
DOM
DOM（Document Object Model,文档对象模型），是表示文档（如HTML文档）和访问、操作构成文档的各种元素（如HTML标记和文本串）的应用程序接口（API）。它提供了文档中独立元素的结构化、面向对象的表示方法，并允许通过对象的属性和方法访问这些对象。另外，文档对象模型还提供了添加和删除文档对象的方法，这样能够创建动态的文档内容。
DOM对HTML元素访问操作
A. HTML DOM树
小结：简单来说DOM并不是一种技术，而是一种访问结构化文档的一种思想。借助DOM模型，我们可以对DOM树进行修改、删除、新增等操作，让结构化文档动态化。
B. DOM模型中的节点
DOM模型中的节点---文档可以说是由节点构成的集合。在DOM模型中有以下三种节点
- 元素节点：各种标签就是这些元素节点的名称，例<p>,<ul>
- 文本节点：文本节点总是被包含在元素节点的内部。
- 属性节点：一般用来修饰元素节点
例：<a title="JS" href="http://www.baidu.com" >百度</a>
C. DOM访问HTML元素
- 根据ID访问：document.getElementById(id)方法
- 利用节点关系访问：常用属性和方法如下表
| parentNode | 返回当前节点的父节点 |
| previousSibling | 返回当前节点的前一个兄弟节点 |
| nextSibling | 返回当前节点的后一个兄弟节点 |
| childNodes | 返回当前节点的所有子节点 |
| firstChild | 返回当前节点的第一个子节点 |
| lastChild | 返回当前节点的最后一个子节点 |
| getElementByTagName(tagName) | 返回当前节点的具有指定标签名的所有子节点 |
注：回车也是一个节点。
D. DOM访问表单控件
常用属性和方法
| action | 返回表单的提交地址 |
| elements | 返回表单控件所组成的数组，通过数组可当问表单内任何表单控件 |
| length | 返回表单内表单域的个数 |
| method | 返回表单内method属性，主要由get和post两个值 |
| target | 确定提交表单内的结果窗口，主要由_self、_blank、_top等 |
| reset()、subrit() | 重置表单和确定表单方法 |
在elements返回的数组中访问具体的表单控件语法
| .elements[index] | 返回该表单中第index个表单控件 |
| .elements[elementName] | 返回该表单内id或name为elementName的表单控件 |
| .elementName | 返回该表单内id或name为elementName的表单控件 |
E. DOM访问列表框，下拉菜单
常用属性
| form | 返回列表框，下拉菜单所在的表单对象 |
| length | 返回列表框，下拉菜单选项个数 |
| options | 返回列表框，下拉菜单所有选项组组成的数组 |
| selectedIndex | 返回下拉列表中选中选项的索引 |
| type | 返回下拉列表类型，多选返回select-multiple，单选返回select-one |
使用options[index]返回具体选项所对应的常用属性
| defaultSelected | 返回该选型默认是否选中 |
| index | 返回该选项在列表框，下拉菜单中的索引 |
| selected | 返回该选项是否被选中 |
| text | 返回该选项呈现的文本 |
| value | 返回该选项value属性值 |
F. DOM访问表格子元素
常用属性和方法
| caption | 返回表格的标题对象 |
| rows | 返回表格的所有表格行 |
| tbodies | 返回表格的所有tbody元素组成的数组 |
| tfoot | 返回表格的tfoot元素 |
| thead | 返回表格的thead元素 |
通过rows[index]返回表格指定的行所对应的属性
| cells | 返回表格行内所有的单元格组成的数组 |
| rowIndex | 返回表格行在表格内的索引值 |
| sectionRowIndex | 返回表格行在其所在元素(tbody,thead)的索引值 |
通过cells[index]返回单元格在表格行内的索引值
| cellsIndex | 返回该单元格在表格行内的索引值 |
DOM对HTML元素的增删改操作
A. DOM创建节点
document.createElement(Tag)，Tag必须是合法的HTML元素
B. DOM复制节点
节点.clomeNode(boolean deep),deep为true时，复制当前节点及其全部后代节点，为false时，只复制当前节点。
C. DOM添加、删除节点
| appendChild(newNode) | 将newNode添加称为当前节点的最后一个子节点 |
| insertBefore(newNode,refNode) | 将refNode节点之前插入newNode节点 |
| replaceChild(newNode,oldNode) | 将oldNode节点替换成newNode节点 |
| removeChild(oldNode) | 将oldNode子节点删除 |
D. DOM创建列表框、下拉菜单选项
- document.createElement(Tag)
- 专门的构造器格式：new Option(text,value,defaultSelected,selected);
| text | 该选项的文本，即该选项所呈现的内容 |
| value | 所选选项的值 |
| defaultSelected | 设置默认是否显示该选项 |
| selected | 设置该选项当前是否被选中 |
注：4个参数可按顺序指明，如一个参数是text，两个参数是text，value。
E. DOM添加创建好的列表框、下拉菜单选项
直接为select元素的指定选项赋值
格式：列表框、下拉菜单对象.option[i]=创建好的option对象
F. DOM删除列表框、下拉菜单选项
- 直接使用列表框、下拉菜单对象.remove(index)方法
- 直接将指定选项赋值为null
格式：列表框或下拉菜单对象.remove(index)或对象.options[index]=null
G. DOM动态添加删除表格内容方法
| insertRow(index) | 在指定索引位置插入一行 |
| createCaption() | 为该表格创建标题 |
| createTFoot() | 为该表格创建<tfoot.../>，加入已存在，返回现有的 |
| createTHead() | 为该表格创建<thead.../>，加入已存在，返回现有的 |
| deleteRowIndex() | 删除表格中index索引处的行 |
| deleteCaption() | 删除表格标题 |
| deleteTFoot() | 从表格删除tFoot元素及其内容 |
| deleteTHead() | 从表格删除tHead元素及其内容 |
H. DOM创建删除表格单元格方法
| insertCell(index) | 在index处创建一个单元格，返回新创建的单元格 |
| seleteCell(index) | 删除某行index索引处的单元格 |