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

<p>

<ul>

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对象;

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

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