BOM与DOM编程
BOM和DOM模型
BOM模型
浏览器对象模型(Browser Object Model)
用于描述浏览器中对象与对象之间层次关系的模型
- window对象,最高层,通过属性和方法实现对浏览器窗口的操作
- document对象,BOM中的核心对象,提供了访问HTML文档对象的属性,方法,事件处理
- location对象, 当前页面的URL地址信息,如协议,主机名,端口号,路径
- navigator对象, 浏览器相关的信息, 如浏览器类型,版本
- history对象, 浏览器的历史访问记录, 如访问过的URL,访问数量
DOM模型
文档对象模型(Document Object Model)
是一种与平台,语言无关的接口,允许程序和脚本动态地访问或更新HTML的内容,结构和样式,且提供了一系列函数和对象 来实现 访问,添加,修改,删除 操作
事件机构
Javascript采用事件驱动的响应机制:
- 用户在页面上交互会触发相应的事件
- 系统调用指定的事件处理函数进行处理
事件分类:
- 操作事件:用户在浏览器上操作产生的事件
- 文档事件:文档本身产生的事件,如文件加载完毕,文档窗口改变
对HTML元素绑定事件的方式:
-
HTML元素的属性绑定事件
在HTML标签内,以on开头的某一属性
-
Javascript脚本动态绑定
通过object.onXXXX方式绑定事件处理函数
window对象
window对象的属性
属性 | 描述 |
---|---|
closed | 只读,返回窗口是否已被关闭 |
defaultStatus | 返回或设置窗口状态栏中的缺省内容 |
innerWidth | 只读,窗口的文档显示区的宽度(单位像素) |
innerHeight | 只读,窗口的文档显示去的高度(单位像素) |
name | 当前窗口的名称 |
opener | 可返回创建该窗口的window对象的引用,只要顶层的window对象有效 |
parent | 如果当前窗口有父窗口,表示当前窗口的父窗口对象 |
self | 只读,对窗自身的引用 |
top | 当前窗口的最顶层窗口的对象 |
status | 可返回或设置窗口状态栏中显示的内容 |
window对象的方法
方法 | 描述 |
---|---|
alert() | 显示带有一段消息和一个确认按钮的对话框 |
prompt() | 显示可提示用户输入的对话框 |
confirm() | 显示带有一段消息以及确认和取消按钮的对话框 |
close() | 关闭浏览器窗口 |
open() | 打开一个新的浏览器窗口或查找一个已命名的窗口 |
createPopup() | 创建一个pop-up窗口 |
focus() | 可把键盘的焦点给予一个窗口 |
blur() | 可把键盘焦点从顶层窗口移开 |
moveBy(x,y) | 可相对窗口的当前坐标把他移动指定的像素 |
moveTo(x,y) | 可把窗口的左上角移动到一个指定的坐标(x,y),不能移出屏幕 |
resizeBy(w,h) | 指定像素来调整窗口的大小 |
resizeTo(w,h) | 把窗口大小调整为指定的宽度和高度 |
scrollBy(x,y) | 把内容滚动指定的像素 |
scrollTo(x,y) | 把内容滚动到指定的坐标 |
setTimeout(code,millisec) | 在指定的毫秒数后调用函数或计算表达式,仅执行一次 |
setInterval(code,millisec) | 按照指定的周期(毫秒)来调用函数或计算表达式 |
clearTimeout() | 取消setTimeout计时器 |
clearInterval() | 取消setInterval计时器 |
常用:open(),close(),setTimeou(),setInterval(),clearTimeout()
-
open()方法
打卡一个新窗口
var targetWindow=window.open(url,name,features,replace)
-
url,可选,新窗口显示的文档的URL
-
name,可选,新窗口的名字,可以用于<a>和<form>标签的target属性;
name存在时,不再创建新窗口,返回该窗口的引用,此时features属性被忽略
-
features,可选,新窗口的特征
-
replace,可选布尔值,设置新窗口中操作历史的保存方式
true,创建新历史记录
false,替换旧的历史记录
-
返回一个窗口对象
窗口特征(features) 描述 channelmode 是否使用channel模式显示窗口,取值为yes,no,1,0,默认为no directories 是否添加目录按钮,取值为yes,no,1,0,默认为yes fullscreen 是否使用全屏,取值为yes,no,1,0,默认为no location 是否显示地址栏,取值为yes,no,1,0,默认为yes menubar 是否显示菜单栏,取值为yes,no,1,0,默认为yes resizable 窗口是否可调节尺寸,取值为yes,no,1,0,默认为yes scrollbars 是否显示滚动条,取值为yes,no,1,0,默认为yes status 是否添加状态栏,取值为yes,no,1,0,默认为yes titlebar 是否显示标题栏,取值为yes,no,1,0,默认为yes toolbar 是否显示浏览器的工具栏,取值为yes,no,1,0,默认为yes width 窗口显示区的宽度,单位为像素 height 窗口显示区的高度,单位为像素 left 窗口的y坐标,单位为像素 top 窗口的x坐标,单位为像素
-
-
close()方法
关闭指定的浏览器窗口
targetWindow.close()
- 关闭当前页面,参数targetWindow对象,也可以window对象
- 关闭当前页面所打开的其他页面
-
setTimeout()
设置一个计时器,指定的时间间隔后调用函数或计算表达式,且执行一次
var id_Of_timeout=setTimeout(code,millisec)
- code,必需,表示被调用的函数或需要执行的Javascript代码串
- millisec,必需,等待的时间
- code 仅被执行一次,(可以调用自己执行多次)
- 返回一个计时器的ID
-
clearTimeout()方法
取消setTimeout()方法设置的计时器
clearTimeout(id_Of_time)
-
setInterval()方法
设置一个定时器,周期性调用函数或计算公式
var id_Of_Interval=setInterval(code,millisec)
- code,必需,函数名或Javascript代码
- millisec,必需,时间间隔
- 返回一个定时器ID
- 不停调用clearInterval(),直到被clearInterval()方法取消或窗口被关闭
-
clearInterval()方法
取消setInterval()方法设置的定时器
clearInterval(id_Of_Interval)
location对象
location对象是window的子对象,用于提供当前窗口或指定框架的URL
-
location对象的属性
属性列表 描述 protocol 设置或返回当前URL的协议 host 设置或返回当前URL的主机名称和端口号 hostname 设置或返回当前URL的主机名 port 设置或返回当前URL的端口部分 pathname 设置或返回当前URL的路径部分 href 设置或返回当前显示的文档的完整URL hash URL的锚部分(#后面) search 设置或返回当前URL的查询部分(?后面) -
location对象的方法
提供了三种方法,用于加载或重新加载页面中的内容
方法 描述 assign(url) 可加载一个新的文档,与location.href实现的页面导航效果相同 reload(force) 重新加载当前文档。force默认为false
force为false,文档内容改变时,从服务器重新加载文档
force为false,文档内容不改变,从缓冲区装载文档
force为true,每次都从服务器重新加载文档replace(url) 使用一个新文档取代当前文档,且不会在history对象中生成新的记录
history对象
用于保存用户访问过的URL地址
length,属性,表示访问历史记录列表中URL的数量
Javascript不允许通过history对象获取已经访问过的URL地址
方法 | 描述 |
---|---|
back() | 可加载历史列表中的前一个URL |
forward() | 可加载历史列表中的后一个URL |
go(n|url) | 可加载历史列表的某个具体的页面。 url,要访问的相对或绝对URL n>0,前进n个地址,n<0,后退n个地址,n=0,刷新页面 |
navigator对象
包含浏览器的相关信息
属性 | 描述 |
---|---|
appName | 浏览器的名称 |
appVersion | 浏览器的平台和版本信息 |
platform | 声明了运行浏览器的操作系统和硬件新 |
userAgent | 声明了浏览器用于HTTP请求的用户代理头的值 |
onLine | 声明了系统是否脱机状态 |
cookieEnabled | 浏览器启用了cookie,返回true,否则返回false |
document对象
window子对象,指浏览器窗口中显示内容部分
document对象的属性
常见的属性:body,title,cookie,URL,all[],forms[],images[]
属性 | 描述 |
---|---|
body | 提供对body元素的直接访问 |
cookie | 设置或查询与当前文档相关的所有cookie |
referrer | 返回载入当前文档的文档URL |
URL | 返回当前文档的URL |
lastModified | 返回文档最后被修改的日期和时间 |
domain | 返回下载当前文档的服务器域名 |
all[] | 返回对文档中所有HTML元素的引用,被getElementById()方法代替 |
forms[] | 返回对文档中所有的form对象集合 |
images[] | 返回对文档中所有的image对象集合,不包括<object>标签内定义的图像 |
-
referrer属性
返回指定文档的URL
a.html跳转到b.html
在页面b.html中通过document.referrer,得到a.html的URL地址
-
cookie属性
cookie是浏览器在客户端保存用户访问服务器的会话信息
document.cookie=cookieStr;
注意:
- 每个cookie存放的数据不能超过4k
- 由键值对构成
- expires,过期时间,UTC格式,通过Date.toGMTString()生成,过期就删除,默认,浏览器关闭就删除
- path,允许访问cookie路径,只有在这个路径才能读写cookie,一般情况下为"/"
- domain,域,可以使浏览器确定哪些cookie能够被提交
- 一般,cookie信息不编码,当包含空格,分号,逗号等特殊符号时,用escape()编码,unescape()解码
document对象的方法
分两类:
- 对文档流的操作
- 对文档元素的操作
方法 | 描述 |
---|---|
open() | 打开一个新文档,并擦除当前的文档 |
write() | 向文档写入HTML或JavaScript代码 |
writeln() | 与write()方法基本相同,每次输入内容后额外加一个换行符(\n)), 在用<pre>标签比较好用 |
close() | 关闭一个由document.open()方法打开的输出流,并显示选定的数据 |
getElementById() | 返回指定id的第一个对象 |
getElementByName() | 返回指定名称的对象的集合 |
getElementByTagName() | 返回指定标签名的对象 |
getElementByClassName() | 返回指定class属性的对象集合,属于HTML5DOM |
querySelector() | 返回第一个满足条件的单个元素, |
querySelectorAll() | 返回满足条件的元素集合 |
-
文档流操作:
open(),write(),writeln(),close(),实现文档流的打开,写入,关闭
-
文档元素操作:
getElementById(),getElementByName(),getElementByTagName(),getElementClassName(),操作文档中的元素
-
write()和writeln()方法
用于向文档流中输入内容。
内容为纯文本时,在页面中直接显示
内容为HTML标签时,由浏览器解析后显示
writeln()m每次输出结果后,额外加一个换行符(\n)。页面中的换行符通常用(<br/>),所以换行符仅在<pre>中起作用。
-
getElementById()方法
用于返回指定的ID的元素,有多个ID相同的元素时,返回第一个符合条件的元素
-
getElementByName()方法
返回指定name属性的元素集合,多用于单行文本框和复选框等具有name属性的元素。
-
getElementByTagName()方法
返回指定签名的元素集合,集合的顺序是文档中的顺序。当参数为(*)时,返回所有的标签元素
-
getElementByClassName()方法
返回指定class属性的元素集合
-
querySelector()方法
返回指定CSS选择器的元素,多个时,返回第一个
var span = document.querySelector("#menuDiv") //返回ID为menuDiv的元素 var span = document.querySelector(".fileClass") //返回一个元素
-
querySelectorAll()方法
返回所有指定CSS选择器的元素的集合
var span=document.querySelectorAll(".baseClass") //返回三个元素
Form对象
document的子对象,实现表单的验证
通过Form对象访问表单对象的属性及方法
document.表单名称.属性
document.表单名称.方法(参数)
document.forms[索引].属性
document.forms[索引].方法(参数)
属性 | 描述 |
---|---|
elements[] | 返回包含表单中所有元素的数组。数组的顺序与表单出现的顺序相同,每个元素都有type属性 |
enctype | 设置或返回用于编码表单内容的MIME类型。默认为"application/x-www-form-urlencoded",当上传文件时,enctype属性应设为"multipart/form-data" |
target | 设置或返回在何处打开表单的action-URL。可以是_blank(新窗口打开),_self(当前窗口打开),_parent(父窗口打开),_top(当前窗口打开,并替换当前整个窗口(框架页)) |
method | 设置或返回表单提交的HTTP方法 |
length | 用于返回表单中元素的数量 |
action | 设置或返回表单的action属性 |
name | 返回表单的名称 |
方法 | 描述 |
---|---|
submit() | 表单数据提交到web服务器 |
reset() | 对表单中的元素进行重置 |
Table对象
对表格进行操作
属性 | 描述 |
---|---|
row[] | 返回所有行(TableRow对象)(数组),包括<thead>,<tfoot>,<tbody>中的所有行 |
cells[] | 返回表格中所有单元格(TableCell对象)(数组) |
border | 设置或返回表格边框的宽度(以像素为单位) |
caption | 设置或返回表格的caption元素 |
width | 设置或返回表格的宽度 |
cellPadding | 设置或返回边框与内容之间的距离(填充) |
cellSpacing | 设置或返回单元格之间的距离 |
方法 | 描述 |
---|---|
createCaption() | 表格中获取或创建<caption>元素 |
createTFoot() | 表格中获取或创建<tfoot> |
createTHead() | 表格中获取或创建<head> |
insertRow() | 指定位置插入一个新行,在index之前插入,index小于0或大于等于表中的行数,抛出异常 |
deleteRow() | 从表格删除指定的行 |
deleteCaption() | 删除表格的caption元素及其内容 |
deleteTHead() | 从表格中删除<thead>元素 |
deleteTFoot() | 从表格中删除<tfoot>元素 |
TableRow对象
属性 | 描述/ |
---|---|
cell[] | 返回当前行所包含的单元格数组 |
sectionRowIndex | 返回某一行在tBody,tHead或tFoot中的位置 |
rowIndex | 返回表格的行集合中的位置 |
innerHTML | 设置或返回表格行的开始和结束标签之间的HTML内容 |
方法 | 描述 |
---|---|
InsertCell() | 在HTML表的一行的指定位置插入一个空的<td>元素 |
deleteCell() | 删除表格行中的单元格 |
TableCell对象
属性 | 描述 |
---|---|
width | 设置或返回表元的宽度 |
rowSpan | 设置或返回表元横跨的行数 |
rowSpan | 设置或返回表元横跨的列数 |
collIndex | 返回行的单元格集合中单元格的位置 |
innerHTML | 设置或返回单元格的开始和结束标签之间的HTML内容 |
DOM节点
节点统称Node对象,通过Node对象的属性和方法可以遍历整个文档树
Node对象的nodeType属性用于获得该节点的类型
节点类型 | nodeType值 | 描述 | 示例 |
---|---|---|---|
元素(element) | 1 | HTML标签 | <div> </div> |
属性(Attribute) | 2 | HTML标签的属性 | type=“text” |
文本(text) | 3 | 文本内容 | Hello HTML! |
注释(Comment) | 8 | HTML注释段 | <!-- 注释 --> |
文档(Document) | 9 | HTML文档根节点 | <html> |
文档类型(Document Type) | 10 | 文档类型 | <!DOCTYPE HTML…> |
Element对象继承了Node对象,也是Node对象的一种
属性 | 描述 |
---|---|
attributes | 返回指定节点的属性集合 |
childNodes | 标准属性,返回直接后代的元素节点和文本节点的集合, |
children | 非标准属性,返回直接后代元素节点的集合,类型为Array |
innerHTML | 设置或返回元素的内部HTML |
className | 设置或返回元素的class属性 |
firstChild | 返回指定节点的首个子节点 |
lastChild | 返回指定节点的最后一个子节点 |
nextSibling | 返回同一父节点的指点节点之后紧跟的节点 |
previousSibling | 返回同一父节点的指定节点的前一个节点 |
parentNode | 返回指定节点的父节点,没有父节点,返回null |
nodeType | 返回指定节点的节点类型(数值) |
nodeValue | 设置或返回指定节点的节点值 |
tagName | 返回元素的标签名(始终是大写形式) |
方法 | 描述 |
---|---|
getAttrubute() | 返回指定属性对应的属性值 |
getElementByTagName() | 返回具有指定标签名的元素子元素集合,类型为NodeList |
hasAttribute() | 指定属性存在时,返回true,否则返回false |
hasChildNodes() | 检查元素是否有子节点 |
removeAttribute() | 删除指定的属性 |
removeChild() | 删除某个指定的子节点,返回该节点 |
replaceChild() | 用新节点代替某个子节点 |
setAttribute() | 为节点添加属性,当属性存在,则进行替换 |
事件处理
事件流和事件对象
DOM结构是一个树型结构
DOM事件流:当一个HTML元素产生一个事件时,该事件会在元素节点与根节点之间按特定的顺序传播,路径所经过的节点都会收到该事件
事件流类型:
- 事件冒泡:叶子节点沿祖先节点,一直向上传递直到根节点
- 事件捕获:由DOM树的最顶层元素,一直传递到叶子节点
事件中需要传递的信息都是通过事件(Event)对象来完成的
大部分event对象的属性是只读的
属性 | 描述 |
---|---|
screenX | 返回事件发生时鼠标指针相对于屏幕的水平坐标 |
screenY | 返回事件发生时鼠标指针相对于屏幕的垂直坐标 |
clientX | 返回当事件被触发时,鼠标指针相对于当前窗口的水平坐标 |
clientY | 返回当事件被触发时,鼠标指正相对于当前窗口的垂直坐标 |
button | 返回一个整数,指示用鼠标的哪一个按钮单击,0(左键),1(中键),2(右键) |
altKey | 返回一个布尔值,表示Alt是否被一直按住 |
ctrlKey | 返回一个布尔值,表示Ctrl是否被一直按住 |
shiftKey | 返回一个布尔值,表示shift是否被一直按住 |
type | 返回触发事件的类型,如submit,load,click |
target | 返回触发事件的目标元素 |
Event对象提供了
- preventDefault()方法用于通知浏览器不再执行与事件关联的默认动作
- stopPropagation()方法用于终止事件的进一步传播
鼠标事件
事件 | 描述 |
---|---|
onclick | 单击,触发事件 |
ondbclick | 双击,触发事件 |
onmouseover | 鼠标指针移动到指定对象,触发事件 |
onmouseout | 鼠标指针移处指定对象,触发事件 |
onmousemove | 鼠标指针移动,触发事件 |
onmousedown | 按下,执行脚本 |
onmouseup | 松开,执行脚本 |
键盘事件
事件 | 描述 |
---|---|
onkeydown | 按下一个键盘按键时,触发事件 |
onkeyup | 松开,触发按键 |
onkeypress | 按下,并释放一个键,触发事件 |
文档事件
事件 | 描述 |
---|---|
onload | 页面或者图像加载完成后,立即触发事件 |
onunload | 用户退出页面时,触发事件 |
onresize | 在窗口或框架被调整大小时,触发事件 |
表单及表单元素事件
类型 | 事件 | 描述 |
---|---|---|
表单元素事件 | onblur | 对象失去焦点时,触发事件 |
onfocus | 获得焦点时,触发事件 | |
onchange | 域的内容改变时,触发事件 | |
onselect | 在文本框中的文本被选中时,触发事件 | |
表单事件 | onreset | 表单中重置按钮,单击,触发事件 |
onsubmit | 表单中确认按钮,单击,触发事件 |