javascript中BOM和DOM篇

BOM

BOM-JavaScript是运行在浏览器中的，所以提供了一系列对象用于和浏览器窗口进行交互，这些对象主要包括window、document、location、navigator、screen等。通常统称为浏览器对象模型(Brower Object Model)。

window对象是整个js脚本运行的顶层对象

常用属性：
document：返回该窗口内装载的html文档
location：返回该窗口装载的html文档的url
navigator：返回浏览当前页面的浏览器，包含了一系列的浏览器属性，包含名称、版本号和平台等
screen：返回当前浏览者屏幕对象
history：返回该浏览窗口的历史
注：这些属性都是属于window对象的子对象，每个子对象内部也提供了各自的属性和方法来进行对游览器的操作。

常用方法：
alert()、confirm()、prompt()：分别用于弹出警告窗口、确认对话框和提示输入对话框
close()：关闭窗口
moveBy()、moveTo()：移动窗口
resizeBy()、resizeTo()：重设窗口大小
scrollBy()、scrollTo()：滚动当前窗口的`html`文档
open()：打开一个新的浏览器窗口加载新的url所指向的地址，并可指定一系列的属性，包含隐藏菜单等
setInterval()、clearInterval()：设置、删除定时器

history对象常用方法

相当于在栈里进行跳转
back()：后退到上一个浏览的页面
forward()：前进到下一个浏览页面
go(intValue)：该方法可指定前进或后退多少个页面，正前进，负后退

location对象常用属性：

hostname：文档所在地址的主机名
href：文档所在地址的url地址
host：文档所在地址的主机地址
port：文档所在地址的服务端口
pathname：文档所在地址的文件地址
protocal：装载该文档所使用的协议，如http等

DOM

DOM是文档对象模型(Document Object Model)的简称，当网页加载时，可以将结构化文档在内存中转换成对象的树。
简单的说，DOM并不是一种技术，而是一种访问结构化文档的一种思想。借助DOM模型，我们可以对DOM树进行修改、删除、新增等操作，让结构化文档动态化。
DOM模型中的节点–文档可以说是由节点构成的集合。在DOM模型中有以下3种节点：
(1)元素节点：各种标签就是这些元素节点的名称，如<p>、<ul>等
(2)文本节点：文本节点总是被包含在元素节点的内部
(3)属性节点：一般用来修饰元素节点就称为属性节点
注：为了动态地修改html元素，须先访问html元素。

DOM对html元素的访问操作

访问表单控件

action：返回该表单的提交地址
elements：返回表单内全部表单控件所组成的数组，通过数组可以访问表单内的任何表单控件
length：返回表单内表单域的个数
method：返回表单内的method属性，主要有get、post两个值
target：确认提交表单时的结果窗口，主要有_self、_blank、_top等
reset()、submit()：重置表单和确认表单的方法

在elements返回数组中访问具体的表单控件语法如下：
.elements[index]：返回该表单中第index个表单控件
.elements[elementName]：返回表单内id或name为elementName的表单控件
.elementName：返回表单中id或name为elementName的表单控件

访问列表框、下拉菜单

form：返回列表框、下拉菜单所在的表单对象
length：返回列表框、下拉菜单的选项个数
options：返回列表框、下拉菜单里所有选项组成的数组
selectedIndex：返回下拉列表中选中选项的索引
type：返回下拉列表的类型，多选的话返回select-multiple,单选返回select-one

使用options[index]返回具体选项所对象的常用属性：
defaultSelected：返回该选项默认是否被选中
index：返回该选项在列表、下拉菜单中的索引
selected：返回该选项是否被选中
text：返回该选项呈现的文本
value：返回该选项的value属性值

访问表格

caption：返回表格的标题对象
rows：返回该表格里的所有表格行
tbodies：返回该表格里所有<tbody.../>元素组成的数组
tfoot：返回该表格里所有<tfoot../>元素
thead：返回该表格里所有<thead../>元素

使用rows[index]返回表格指定的行所对象的属性：
cells：返回该表格行内所有的单元格组成的数组
rowIndex：返回该表格行在表格内的索引值
sectionRowIndex：返回该表格行在其所在元素(tbody,thead等元素)的索引值

使用cells[index]返回表格指定的列所对象的属性：
cellIndex：返回该单元格在表格行内的索引值

对html的增删改查

DOM创建节点的方法：
document.createElement(Tag)：Tag必须是合法的html元素

DOM复制节点的方法：
节点cloneNode(boolean deep)：当deep为true时，表示复制当前节点以及当前节点的全部后代节点。当为false时，只复制当前节点

DOM添加、删除节点的方法：
appendChild(newNode)：将newNode添加到当前节点的最后一个字节点
insertBefore(newNode, refNode)：在refNode节点之前插入newNode节点
replaceChild(newNode, oldNode)：将oldNode节点替换成newNode节点
removeChild(oldNode)：将oldNode字节点删除

DOM为列表框、下拉菜单添加选项的方式：为列表框、下拉菜单添加选项的方式：
创建选项除了使用前面所示的createElement方法之外，还可以使用专门的构造器来创建一个选项出来，语法如下：

new Option(text, value, defaultSelected, selected)
参数说明：
text：该选项的文本、即该选项所呈现的"内容"
value：该选项的值
defaultSelected：设置默认是否显示该选项
selected：设置该选项当前是否被选中

注：并不是每次构造都需要指明4个参数，可以指明1个或者两个都可以，假如一个的话指明的是text，假如2个的话，第一个参数是text，第二个参数是value

添加创建好的选项至列表框或下拉菜单的方式：

直接为<select.. />的指定选项赋值：
列表框或下拉菜单.options[i] = 创建好的option对象;

删除列表框或下拉菜单的选项的方法：
直接使用列表框或下拉菜单对象.remove(index)删除指定选项或者直接将指定的对象设置为null
列表框或下拉菜单.remove(index)`或 .options[index] = null

列表框或下拉菜单.options.length = 0; //相当于清空数组

DOM动态添加删除表格内容所使用到的常用方法：

insertRow(index)：在指定索引位置插入一行
createCaption()：为该表格创建标题
createTFoot()：在该表格创建<tfoot../>元素，假如已存在就返回现有的
createTHead()：为该表格创建<thead../>元素，假如已存在就返回现有的
deleteRow(index)：删除表格中index索引处的行
deleteCaption()：删除表格标题
deleteTFoot()：从表格删除tFoot元素及其内容
deleteTHead()：从表格删除tHead元素及其内容

给表格行创建、删除单元格的方法：

insertCell(index)：在index处创建一个单元格，返回新创建的单元格
deleteCell(index)：删除某行在index索引处的单元格