BOM

• BOM（Browser Object Model），浏览器对象模型，操作浏览器对象的 API

• 表示浏览器中打开的窗口
• 如果文档包含框架（ 或

• 所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员

• 常用属性：opener：返回对创建此窗口的窗口的引用parent：返回父窗口top：返回最顶层的父窗口navigator：对 Navigator 对象的只读引用frames：返回窗口中所有命名的框架location：用于窗口或框架的 Location 对象history：对 History 对象的只读引用document：对 Document 对象的只读引用screen：对 Screen 对象的只读引用

• 常用方法alert(message)：消息框confirm(message)：确认框，返回一个 boolean 值prompt(msg, defaultText)：输入框，返回用户输入的内容open(url, name, specs, replace)：打开新窗口close()：关闭当前窗口setTimeout(function, time)：设置在 time 毫秒后异步调用 fn 函数，返回 timersetInterval(function, time)：设置每隔 time 毫秒异步调用 fn 函数，返回 timerrequestAnimationFrame(function)：设置浏览器在下次重绘之前调用指定的回调函数更新动画（回调函数执行次数通常是每秒 60 次）clearTimeout(timer)：清除由 setTimeout 创建的定时器clearInterval(timer)：清除由 setInterval 创建的定时器getComputedStyle(element)：获取 element 对象的 CSS 样式声明对象

navigator 对象

• 浏览器信息
• userAgent：返回由客户机发送服务器的 user-agent 头部的值
• platform：返回运行浏览器的操作系统平台
• cookieEnabled：返回指明浏览器中是否启用 cookie 的布尔值
• language：返回当前的浏览器语言

location 对象

• 浏览器定位和导航
• href：文档所在地址的 URL 地址
• protocol
• hostname
• host
• pathname
• search
• hash：文档所在地址的 URL 的锚部分（从 # 号开始的部分）
• ：重新载入当前文档
• assign(url)：载入新的 URL，记录浏览历史

• replace(url)：载入新的 URL，不记录浏览历史

  
  图 1 URL构成

history 对象

• 浏览器当前窗口的浏览历史
• length：返回浏览器历史列表中的 URL 数量
• back()：加载 history 列表中的前一个 URL
• forward()：加载 history 列表中的下一个 URL
• go(number|url)：加载 history 列表中的某个具体页面

screen 对象

• 屏幕信息

• localStorage 用于长久保存整个网站的数据，保存的数据没有过期时间，直到手动去除

• sessionStorage 用于临时保存同一窗口（或标签页）的数据，在关闭窗口或标签页之后将会删除这些数据

• 属性length：返回存储对象中包含多少条数据

• 方法getItem(keyname)：返回指定键的值key(n)：返回存储对象中第 n 个键的名称setItem(keyname, value)：添加键和值，如果对应的值存在，则更新该键对应的值removeItem(keyname)：移除键clear()：清除存储对象中所有的键

document 对象

• HTML 文档的根节点
• 属性
  • links、forms、images
  • title、URL、domain、documentElement、body、bgColor、fgColor、readyState（文档的加载状态：loading、interactive、complete）
  • cookie
• 方法write()：在页面中输出文本writeln()：在页面中输出文本，输完后换行getElementById(idVal)：返回文档中 id 属性值为 idVal 的 HTML 元素createElement(tagName)：创建 Tag 标签对应的节点

DOM

• DOM（Document Object Model），文档对象模型，操作文档对象的 API

• 
  图 2 DOM_Tree模型

节点对象

• 对于 HTML 页面而言，浏览器会将页面中的"空白"也当成文本节点

• 属性childNodes：返回当前节点的子节点的节点列表（包括文本节点）children：返回当前节点的子节点的节点列表（不包括文本节点）firstChild、lastChild、parentNodepreviousSibling：返回节点之前紧跟的同级节点nextSibling：返回节点之后紧跟的同级节点

• 方法：判断当前节点是否有子节点appendChild(newNode)：将 newNode 添加成当前节点的最后一个子节点insertBefore(newNode, refNode)：在 refNode 节点之前插入 newNode 节点removeChild(node)：删除并返回 node 子节点replaceChild(newChild, oldChild)：将 oldChild 节点替换成 newChild 节点getElementsByName(name)：返回带有指定名称的对象组成的数组getElementsByTagName(tagName)：返回带有指定标签名的对象组成的数组querySelector(selectors)：返回文档中与指定选择器或选择器组匹配的第一个 html 元素，如果找不到匹配项，则返回 nullquerySelectorAll(selectors)：返回与指定的选择器组匹配的文档中的元素列表，返回的对象是 NodeList

元素对象

• 元素可包含属性、其他元素或文本

| | 元素节点 | 属性节点 | 文本节点 || ————- | —— | —— | ——- || nodeType | 1 | 2 | 3 || nodeName | 标签名 | 属性名 | #text || nodeValue | null | 属性值 | 文本内容 |

HTML 元素

• 常用属性（获取到的是属性值转换过的实用对象）innerHTML：获取或设置 HTML 元素内部的代码内容innerText、textContent：获取或设置 HTML 元素的文本内容，即该元素在页面上呈现的内容value：获取或设置表单控件的呈现内容id：获取或设置 HTML 元素的 id 属性值className：获取或设置 HTML 元素的 class 属性值style.CSS 属性名、style.cssText：获取或设置 HTML 元素的内联 CSS 样式，如 style["background-color"] 或 style.backgroundColordataset：获取 HTML 元素上 data- 属性集，data- 属性可用于在元素上保存数据

• 表单name、autocomplete、action、method、elementsreset()：重设表单，将所有表单域的值设置为初始值，可重置元素：input, keygen, output, select, textarea，触发表单 reset 事件（元素重置时不再触发元素上的 change 和 input 事件）：提交表单checkValidity()

• 列表框、下拉菜单：selectedOptions（返回列表框中所有选中选项组成的数组）、value、selectedIndex

• 列表框、下拉菜单的选项：selected

• 单选框、复选框：checked

事件驱动编程

• 核心对象：事件源（各种 DOM 元素）、事件名称、事件响应函数、事件对象 event

事件流

• 事件传递的过程：capture phase、target phase、bubble phase

事件注册、取消与触发

• 对 DOM 元素绑定事件处理函数
• 将事件处理函数绑定到 HTML 元素属性时，可以为函数传入 this、event 等参数
• 方式
  • 绑定到 HTML 元素的属性
  • window.onload 后，绑定到 DOM 对象属性，如 元素.onclick=响应函数引用
  • window.onload 后，调用事件绑定方法，对元素添加事件类型、响应函数

事件对象 event

• 属性target（W3C）、srcElement（IE）：事件源type：事件类型currentTarget

• 阻止默认行为Event.preventDefault()（W3C）Event.returnValue = false（IE）

事件类型

• 事件名称由事件类型前加一个“on”前缀构成

• 资源事件：load（资源及其依赖资源已完成加载）、beforeunload（资源将要被卸载时）、unload（文档或一个依赖资源正在被卸载）、error（资源加载失败时）、abort（正在加载资源已经被中止时）
• 焦点事件：focus（元素获得焦点）、blur（元素失去焦点）
• 表单事件：submit（点击提交按钮）、reset（点击重置按钮时）、invalid（表单元素验证不通过）
• 值变化事件：input（, 或 的元素值被改变）、readystatechange（readyState 的值发生改变）</li><li>存储事件：change（<input>, <select> 或 <textarea> 的元素值被改变，只在用户提交更改时触发）</li><li>视图事件：resize（窗口或框架被重新调整大小）、scroll（页面发生滚动）</li><li>键盘事件：keydown（按下任意按键）、keypress（除 Shift, Fn, CapsLock 外任意键被按住）、keyup（释放任意按键）</li><li>鼠标事件：click、dbclick、mouseenter、mouseleave、contextmenu（右键菜单显示前）<br>
  
  图 3 事件类型

$(function () {
    // 按回车键登陆
    $(document).keyup(function (event) {
        if ((event.keyCode || event.which) === 13) {
            $("#loginForm").submit();
        }
    });