BOM与DOM编程

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()

1. 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坐标，单位为像素

2. close()方法

   关闭指定的浏览器窗口

   targetWindow.close()
   

   • 关闭当前页面，参数targetWindow对象，也可以window对象
   • 关闭当前页面所打开的其他页面

3. setTimeout()

   设置一个计时器，指定的时间间隔后调用函数或计算表达式，且执行一次

   var id_Of_timeout=setTimeout(code,millisec)
   

   • code，必需，表示被调用的函数或需要执行的Javascript代码串
   • millisec，必需，等待的时间
   • code 仅被执行一次，（可以调用自己执行多次）
   • 返回一个计时器的ID

4. clearTimeout()方法

   取消setTimeout()方法设置的计时器

   clearTimeout(id_Of_time)
   

5. setInterval()方法

   设置一个定时器，周期性调用函数或计算公式

   var id_Of_Interval=setInterval(code,millisec)
   

   • code，必需，函数名或Javascript代码
   • millisec，必需，时间间隔
   • 返回一个定时器ID
   • 不停调用clearInterval()，直到被clearInterval()方法取消或窗口被关闭

6. clearInterval()方法

   取消setInterval()方法设置的定时器

   clearInterval(id_Of_Interval)
   

location对象

location对象是window的子对象，用于提供当前窗口或指定框架的URL

1. location对象的属性

   属性列表	描述
   protocol	设置或返回当前URL的协议
   host	设置或返回当前URL的主机名称和端口号
   hostname	设置或返回当前URL的主机名
   port	设置或返回当前URL的端口部分
   pathname	设置或返回当前URL的路径部分
   href	设置或返回当前显示的文档的完整URL
   hash	URL的锚部分（#后面）
   search	设置或返回当前URL的查询部分（？后面）

2. 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>标签内定义的图像

1. referrer属性

   返回指定文档的URL

   a.html跳转到b.html

   在页面b.html中通过document.referrer，得到a.html的URL地址

2. 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()，操作文档中的元素

1. write()和writeln()方法

   用于向文档流中输入内容。

   内容为纯文本时，在页面中直接显示

   内容为HTML标签时，由浏览器解析后显示

   writeln()m每次输出结果后，额外加一个换行符（\n）。页面中的换行符通常用（<br/>），所以换行符仅在<pre>中起作用。

2. getElementById()方法

   用于返回指定的ID的元素，有多个ID相同的元素时，返回第一个符合条件的元素

3. getElementByName()方法

   返回指定name属性的元素集合，多用于单行文本框和复选框等具有name属性的元素。

4. getElementByTagName()方法

   返回指定签名的元素集合，集合的顺序是文档中的顺序。当参数为(*)时，返回所有的标签元素

5. getElementByClassName()方法

   返回指定class属性的元素集合

6. querySelector()方法

   返回指定CSS选择器的元素，多个时，返回第一个

   var span = document.querySelector("#menuDiv")   //返回ID为menuDiv的元素
   var span = document.querySelector(".fileClass") //返回一个元素
   

7. 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	表单中确认按钮，单击，触发事件