DOM编程

5.1 DOM、DHTML介绍
DOM (Document Object Model)
DHTML (Dynamic HTML)
JavaScript可以使用3种方式将HTML对象事件与处理程序代码进行关联：
1) 在事件源对象对应的HTML标签上增加要处理的事件属性，例如 oncontextmenu="myFun()"
2) 直接在JavaScript代码中设置元素对象的事件属性，例如 document.oncontextmenu = myFun;
3) 在一个专门的<script>标签对中编写事件处理代码，例如 <script language="javascript" for="document" event="oncontextmenu">

5.2 window对象
（引用window对象的属性和方法时，可以省略window这个前缀）
方法：
  alert 具有OK按钮的提示对话框
  confirm 具有OK、Cancel按钮的对话框
  prompt 输入信息的对话框，例如 prompt("提示信息", "默认值")
  close 关闭窗口（如果是open方式打开的子窗口，则关闭；如果是用户Get方式打开的，则提示是否关闭）
  navigate 导航到指定URL
  setInterval 设置浏览器每隔时间（单位：毫秒）调用指定代码，例如 setInterval("myFun()", 5000)
  setTimeout 设置浏览器经过时间（单位：毫秒）执行指定代码，例如 setTimeout("myFun()", 5000)
  clearInterval 取消setInterval
  clearTimeout 取消setTimeout
  moveTo 移动窗口位置（有的浏览器不理睬）
  resizeTo 改变窗口大小
  open 打开一个新窗口，例如 window.open("url.html", "_blank", "top=0,left=0,width=200,height=200,toolbar=no");
  showModalDialog 产生模式对话框窗口（不能改变窗口大小，没有菜单、工具条、状态栏等）
  showModelessDialog 产生非模式对话框窗口
属性：
  closed 返回对应窗口是否关闭（一般用于检测子窗口，open返回值为子窗口window对象）
  opener 返回父窗口（打开本窗口的window对象）
  defaultstatus 设置/返回状态栏默认显示文本内容
  status 设置/返回状态栏当前文本内容
  screenTop 返回窗口左上角顶点在屏幕垂直位置
  screenLeft 返回窗口左上角顶点在屏幕水平位置
事件：（window对象事件处理器需要作为<body>标签的事件属性设置）
  onload 装载完网页文档时。该属性还可用于<frameset>、<frame>、<iframe>、<img>、<applet>等，程序应放在对应标签之前
  onunload 卸载网页文档之后
  onbeforeunload 准备卸载网页文档之前。
    可在此处设置 window.event.returnValue="某字符串"，浏览器将弹出一个对话框提示用户是否真的要关闭、离开网页。
 通用事件：（大多数HTML元素都能触发的事件）
  onclick 单击
  onmousemove 鼠标移动
  onmouseover 鼠标移入
  onmouseout 鼠标移出
  onmousedown 鼠标按键按下
  onmouseup 鼠标按键弹起
  onkeydown 键盘按键按下
  onkeyup 键盘按键弹起
  onkeypress 键盘击键（按下后弹起）
对象属性：
  1) location对象：设置/返回当前网页URL信息
    href属性：可使用window.location.href="url";载入新文档，与window.navigate("url");作业一样
    replace方法：也可用于载入新网页
    reload方法：重新载入（刷新）当前网页，例如 opener.location.reload();
  2) event对象：设置/返回当前事件有关信息
    altKey属性：事件发生时Alt键是否被按下
    ctrlKey属性：事件发生时Ctrl键是否被按下
    shiftKey属性：事件发生时Shift键是否被按下
    clientX、clientY属性：设置/返回鼠标相对窗口客户区顶点x、y坐标
    screenX、screenY属性：设置/返回鼠标相对屏幕顶点x、y坐标
    offsetX、offsetY属性：设置/返回鼠标相对事件源顶点x、y坐标
    x、y属性：设置/返回鼠标相对事件源的父元素顶点x、y坐标
    returnValue：设置/返回事件的返回值
    cancelBubble：设置/返回当前事件是否继续向下传递
    srcElement：设置/返回事件源对象
    keyCode：设置/返回键盘按下/弹起时那个按键的Unicode码
    button：检索鼠标按键情况：1代表左键，2代表右键，3代表左右同时按下
  注：HTML元素对象的tagName属性值中每个字母都是大写，例如 window.event.srcElement.tagName=="IMG"，若用小写判断则必不等，
      但可转换为小写再判断，例如 window.event.srcElement.tagName.toLowerCase()=="img"
  3) frames数组：它与window对象的parent、top等对象属性，都是用于HTML的<frameset>或<iframe>进行编程的JavaScript对象
    parent属性：父窗口
    top属性：最顶层的窗口
    用法举例：window.parent.frames[1].location
              parent.frame.bottom.location
              parent.frames['bottom'].location
              parent.frames.item(1)
              parent.frames.item('bottom')
              parent.bottom.location
              parent['bottom']
              top.frame_a.document.write("...")
  4) screen对象：提供显示器分辨率、色彩度等信息
  5) clipboardData对象：读写剪贴板内容
  6) history对象：重新装载浏览器曾经访问过的URL列表的某个URL的方法
  7) navigator对象：提供浏览器名称、版本号、所用操作系统、CPU类型、浏览器的国家语言等属性信息
  8) document对象：代表整个网页文档

5.3 document对象
方法：
  write 向HTML文档动态写入内容，会覆盖之前完整写入（完全解析HTML文档或调用close方法）的内容
  writeln 与write方法类似，多加一换行符
  open 打开新文档，与window.open方法类似，建议使用后者
  close 写完内容后，一定调用该方法关闭文档流
  clear 清除文档所有内容，目前未得到完全支持，可用document.close();document.write("");document.close();代替实现
  getElementByID 返回id属性值指定的元素
  getElementByName 返回name属性值指定的元素
  getElementsByTagName 返回标签名指定的所有元素
  createElement 产生一个代表某元素的对象，随后可使用其他方法插入文档
  createStyleSheet 产生一个样式表或增加一条样式规则
属性：包括对应<body>标签的一些属性和描述网页文档自身信息的一些属性
 与<body>标签相关的：
  alinkColor 超链接被选中时的颜色
  linkColor 超链接正常状态的颜色
  vlinkColor 访问过的超链接的颜色
  bgColor 文档背景颜色
  fgColor 文本默认前景色
 注：<a href="#">指向当前文档自身
 描述网页文档自身信息的：
  charset 设置/返回浏览器显示网页内容所使用的当前编码字符集
  defaultCharset 返回浏览器的默认编码字符集内容
  cookie 设置/返回Cookie字符串。
  fileCreatedDate 返回该网页文档的创建时间的字符串格式
  fileModifiedDate 返回该网页文档的修改时间的字符串格式
  fileSize 返回当前网页文档的大小
  lastModified 返回Web服务器向浏览器传递当前文档内容时，伴随发送的Last-Modified头所表示的日期的字符串格式。
  URL 设置/返回浏览器访问当前网页时所采用的URL地址。大小写敏感；document.URL等同于location.href
  URLUnencoded 返回浏览器访问当前网页所采用的URL地址的URL解码后的字符串
  referrer 返回导航到当前网页的超链接源的URL地址。注意：由于HTTP协议作者拼写错误，HTTP协议头写成了Referer；但document.referrer中的拼写正确。
事件：无特别事件，支持的事件都是通用的
对象属性：
  forms数组：代表HTML文档中所有<form></form>标签对的集合
  anchors数组：代表HTML文档中所有指定了name属性或id属性的<a></a>标签对的集合
  links数组：代表HTML文档中所有指定了href属性的<a></a>标签对的集合
  images数组：代表HTML文档中所有<img>标签的集合
  scripts数组：代表HTML文档中所有<script></script>标签对的集合
  applets数组：代表HTML文档中所有<applet></applet>标签对的集合
  all数组：代表HTML文档中所有指定标签对象的集合。不论HTML文档中是否存在<html>、<head>、<title>标签，all集合中都会包含这些标签相关的对象；若有<html>标签，则不论是否存在<body>标签，all集合中都会包含body对象
  styleSheets数组：代表HTML文档中所有使用<style>、<link>或@import语句定义或引入的样式表的集合
  body对象：代表HTML文档中<body></body>标签对；嵌套在<body></body>标签对里层的HTML子元素，可以作为body对象的属性来引用
  title对象：代表HTML文档中<title></title>标签对；可以使用这个对象设置标题栏上的内容
 数组的引用举例：document.all[7].src
                 document.all.img1.src
                 document.all["img1"].src
                 document.all.item("img1").src
                 document.all.item(7).src
                 document.images[0].src
                 document.images.img1.src
                 document.images["img1"].src
                 document.images.item("img1").src
                 document.images.item(0).src
 HTML元素的name和id属性值都可以作为数组所有字符串或item方法的参数来返回某个HTML标签对象。
  在HTML中，不允许有两个id属性值相同的HTML元素，但可以有多个name属性值相同的HTML元素。
  如果在HTML文档中，有多个name属性值相同的元素，那么使用该name属性值作为item方法的参数，返回值是一个包含所有同名元素所对应的元素的对象的数组。
  由于使用name属性值作为参数的item方法返回的对象可能是一个数组，所以程序应检查这个返回对象的length属性，来判断返回的对象是否是一个数组。
    可以用if(obj.length!=null)、if(typeof(obj.length)!="undefined")或if(obj.length)中的任何一种形式，确定是否存在obj.length属性。
  如果有多个name属性值相同的HTML元素，将name属性值作为数组索引，返回的是具有该name属性值的最后一个元素所对应的对象，而不是所有对应对象的数组。
  当使用name属性值作为数组索引字符串时，可以在这个字符串后面再传递一个整数索引号，称为子索引，代表在同组元素中的顺序号，例如 document.images["sample", 0]
  一些HTML元素的name属性值和id属性值也可以作为document对象的一个属性值直接引用；这些HTML元素通常都是document的forms、images、anchors等数组属性的成员，例如 document.img1.src、document.sample[0].src（注意：由于有两个元素的name属性等于sample，所以sample属性本身又成了一个数组对象）
  一些HTML元素的id属性值还可以作为window对象的属性来引用该元素对象，例如 window.sample[0].src、sample[0].src、window.img1.src、img1.src
<script>标签的专用的属性：
  defer 告诉浏览器在装载过程不用去分析和执行该<script></script>标签对中的脚本代码，而在下载并分析完整个HTML部分的内容后，才执行该标签对中的脚本代码，这样能提供浏览器下载网页的性能
      如果标签中无该属性，则标签对中的函数外代码在浏览器读到此处即运行；如果标签中设置了defer，则标签对中函数外代码在浏览器解析处理完网页文档中的所有其他内容后才开始执行
  type  最近HTML和XHTML标准中，要求使用type属性代替language属性，使用格式例如 <script type="text/javascript">
      HTML 4.01标准建议再<head>内放置一个<meta>标签，来说明HTML文档中所有脚本语言使用的默认语言类型，格式例如 <meta http-equiv="Content-Script-Type" content="text/javascript">
  language  指定脚本语言的类型；在最近的HTML和XHTML标准中已不再使用，最近的浏览器同时支持language和type属性
  src  用于在HTML文档中引用一个单独保存JavaScript代码的.js文件
Cookie属性：
  每个Cookie必须有一个标识名称（NAME）和设置值（VALUE）
  设置给document.cookie属性的值与其返回值不一样；设置是增加/覆盖的过程，不能在一次document.cookie属性设置语句中增加多个Cookie；读取document.cookie属性时，它返回的是浏览器当前所有可用的Cookie信息组合成的字符串
  设置给document.cookie属性的字符串，必须以Cookie的名称和设置值（NAME=VALUE;）所组成的字段开头，后面可加上下列可选字段内容，后面的字段与前面的字段之间都用分号加空格分隔
    expires=date; 设置Cookie在浏览器端保持有效的时间，date部分是GMT格式的字符串，例如 "Fri, 31 Dec 1999 23:59:59 GMT"
      如果设置成以前的时间，浏览器立即删除这个Cookie；如果设置成未来的时间，浏览器将在文件系统中保存这个Cookie，直到date指定的时间之前都保持有效；如果没有设置该字段，浏览器将Cookie保存在自身进程的内存中，随浏览器关闭而消失
    domain=domainname; 设置Cookie在哪个域中有效。浏览器访问这个域中的所有主机时，都将传送这个Cookie；如果没有设置该字段，Cookie只在浏览器访问当前主机时有效
    path=path; 设置Cookie在有效域中的服务器上的哪个URL目录及其子目录中有效。如果没有设置该字段，Cookie只对浏览器访问当前请求的URL地址所在目录及其子目录下的所有页面时起作用
    secure; 将Cookie信息设置成安全的，浏览器只有在安全环境下才能访问这个被储存的Cookie
  JavaScript程序通常在设置时使用escape函数对VALUE进行编码，在读取时用unescape函数解码

5.4 body对象
方法：body对象中大多数方法都是许多HTML元素对象所通用的方法
  appendChild 可以将一个对象对应的HTML元素作为<body></body>标签对中的最后一个元素，增加到标签对中。
  例如： var oa = document.createElement("A");  oa.href = "(url)";  oa.innerText = "点击此处";  document.body.appendChild(oa);
属性：body对象除了具有一些自己专用的属性外，还具有大多数HTML元素对象所通用的属性
 专用属性：
  1) background 设置网页背景图片的URL
  2) bgProperties 设置背景图片是否能随网页文档滚动。默认为空字符串，表示随文档滚动；如果设置为"fixed"，则不随网页文档滚动
  3) text 设置/返回文本的显示颜色
  4) topMargin、bottomMargin、leftMargin、rightMargin 分别设置/返回网页文档的上边距、下边距、左边距、右边距
 通用属性：
  1) id 设置/返回HTML元素的id属性值，用于指定唯一标识名
  2) name 设置/返回HTML元素的name属性值
  3) className 设置/返回HTML元素的class属性值
    可以使用JavaScript和CSS，实现HTML元素上的动态效果
  4) innerText 设置/返回HTML元素标签对之间的内容。设置时标签符号将作为普通文本显示；返回时不包含标签符号
  5) innerHTML 设置/返回HTML元素标签对之间的内容。设置时标签符号将按HTML标签意义解释；返回时包含标签符号
  6) outerText 设置/返回HTML元素标签对本身及其中的内容。设置时标签符号将作为普通文本显示；返回时不包含标签符号
  7) outerHTML 设置/返回HTML元素标签对本身及其中的内容。设置时标签符号将按HTML标签意义解释；返回时包含标签符号
  8) offsetTop、offsetLeft 返回对象元素边界左上角顶点相对上层HTML元素边界左上角顶点的垂直、水平位置
  9) offsetWidth、offsetHeight 返回对象元素自身的宽度和高度
  10) clientTop、clientLeft 返回对象上的客户区的左上角顶点相对自身边界左上角顶点的垂直、水平位置
  11) clientWidth、clientHeight 返回对象上的可见客户区的宽度和高度，不包含滚动条、边框部分
  12) scroll 设置/返回HTML元素对象中是否显示滚动条。该属性是字符串类型的，取值可以是yes、no、auto
  13) scrollTop、scrollLeft 设置/返回元素上边界、左边界与当前被显示内容的上边界、左边界之间的距离
  14) scrollWidth、scrollHeight 返回元素中的完整内容的宽度和高度，包含当前没有被显示出来的部分
事件：body对象最常用的两个事件：onselectstart、onscroll
  onselectstart 在用户选取网页文档中的内容时发生。若返回false，可禁止用户在网页中选取内容，从而阻止复制
  onscroll 在用户拖动窗口上的滚动条时发生
    默认情况下，网页上所有内容都会随滚动条移动而移动。要想改变HTML元素的显示位置，必须设置其样式风格的position属性为absolute，再指定元素左上角顶点位置坐标，例如 style="position:absolute; left:0; top:50"
    在JavaScript中能够设置样式风格的HTML元素都有一个style属性对象，用于在JavaScript程序中设置HTML元素的样式风格
对象属性：
  all数组：代表所有HTML子元素对象的集合
  style对象：用于设置对象对应的HTML标签的样式风格
    想隐藏某块内容，可使用 .style.display = "none";  想重新显示，可使用 .style.display = "block";
  注：.style.top、.style.width之类的返回值是末尾具有"px"的字符串，但赋值可以直接使用整数，所以想读取整数时可以考虑使用.offsetTop、.offsetWidth之类的

5.5 form对象
方法：
  submit （form对象的专用方法）提交表单，但不引发onsubmit事件
  item 返回表单中的某个表单字段元素对应的对象；不能返回<input type="image" ...>类型的表单字段元素
属性：
  <form>标签的name、target、title、enctype、method、action等属性均可由form对象访问
  除此之外还有encoding属性可以访问<form>标签的enctype属性，属JavaScript设计人员的失误，现渐渐改用enctype属性
  注：在超链接标签<a>的href属性中也可以使用javascript协议，例如 <a href="javascript:history.go(-1)">；也可在form表单的action属性中使用javascript协议
  注：设置HTML元素的name和id属性值，定义JavaScript中的变量名、函数名等时，都要特别注意不能与DOM对象模型中定义的对象名、属性名、方法名相冲突
事件：
  onsubmit （form对象专有的事件）当用户单击提交按钮，或在表单单行文本输入框中按下回车键后，表单数据提交到Web服务器前发生
  注：若在onsubmit的事件处理函数中使用submit方法提交表单，一般应return false;，否则将会提交两次
对象属性：
  all数组：（通用属性）代表对象对应HTML标签中包含的所有HTML子元素对象的集合
  elements数组 代表<form>标签下除了<input type="image" ...>之外的表单字段元素对象的集合
  children数组 （通用属性）代表对象对应的HTML标签中包含的所有直接的HTML子元素对象的集合

5.6 form表单字段元素对象
方法：
  blur 让表单字段元素失去焦点
  focus 让表单字段元素获得焦点
  click 模仿用户鼠标单击该元素
  setCapture 在某个表单字段元素对象上捕获当前网页文档上的鼠标事件。调用这个方法后，即使鼠标不在该对象对应的HTML元素上，而在另外的HTML元素上移动时，该对象仍然发生鼠标事件；否则，在将鼠标移动到该元素外才释放的情况，便不可能捕获到鼠标释放的事件
  releaseCapture 取消某个表单字段元素对象对当前网页文档鼠标事件的捕获设置。调用该方法前必须已经调用过setCapture方法
  add 为列表框（select）增加一个选择项（option）
属性：
  defaultValue 设置/返回表单字段元素的默认值，即用户使用reset复位表单后的值
  disabled 设置/返回表单字段元素的disabled状态
  form 返回表单字段元素所属于的form表单对象
  readOnly 设置/返回文本输入框的readOnly状态
  title 设置/返回表单字段元素的title属性
  value 设置/返回表单字段元素的当前取值
  checked 设置/返回单选按钮、复选按钮的选中状态
 列表框（select）专有的属性：
  multiple 设置/返回列表框的multiple属性
  selectedIndex 设置/返回列表框中被选中的选择项的索引号。如果设置了multiple，则返回被选中的选择项里第一个选择项的索引号，没什么实际意义
  options数组 是包含列表框中所有选择项对象的数组
 列表框选择项（option）的属性：
  text 设置/返回该选择项显示的文本
  value 设置/返回该选择项对应的取值
  selected 设置/返回该选择项是否被选中
  index 设置/返回该选择项的索引号
 注：可以为HTML元素指定自定义属性
事件：
  onChange 当焦点离开文本输入框且文本输入框中的值改变时，或者改变列表框的选择结果后
  onSelect 当单行或多行文本输入框中的文字被选择加亮后
  onFocus 当表单字段元素获得焦点时
  onBlur 当表单字段元素失去焦点时