BOM

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

window 对象

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

    navigator 对象

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

    location 对象

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

    • replace(url)：载入新的 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

    • 在 HTML DOM 中，每一个元素都是节点：文档节点（document 对象）、元素节点、属性节点、文本节点、注释节点

      DOM_Tree模型
      图 2 DOM_Tree模型

    节点对象

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

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

    • 方法hasChildNodes()：判断当前节点是否有子节点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 | 属性值 | 文本内容 |

    • 方法getAttributeNode(name)：获取的属性节点getAttribute()：获取指定元素的属性值（获取到的是属性值字符串）setAttribute(name, value)：设置或者改变指定属性并指定值

    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 事件）submit()：提交表单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 后，调用事件绑定方法，对元素添加事件类型、响应函数
    1. // 事件注册
    2. var addEvent = document.addEventListener ?
    3.     function(element, eventType, listener, useCapture) {
    4.         element.addEventListener(eventType, listener, useCapture); // W3C
    5.     } :
    6.     function(element, eventType, listener, useCapture) {
    7.         element.attachEvent('on' + eventType, listener); // IE
    8.     };
    10. // 取消事件注册
    11. var delEvent = document.removeEventListener ?
    12.     function(element, eventType, listener, useCapture) {
    13.         element.removeEventListener(eventType, listener, useCapture); // W3C
    14.     } :
    15.     function(element, eventType, listener, useCapture) {
    16.     element.detachEvent('on' + eventType, listener); // IE
    17.     };
    19. // 事件触发
    20. element.dispatchEvent(eventType); // W3C
    21. element.fireEvent('on' + eventType); // IE

    事件对象 event

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

    • 阻止事件传播event.stopPropagation()（W3C）event.cancelBubble = true（IE）event.stopImmediatePropagation()（W3C）

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

    事件类型

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

    常见的事件类型

    • 事件参考
    • 资源事件：load（资源及其依赖资源已完成加载）、beforeunload（资源将要被卸载时）、unload（文档或一个依赖资源正在被卸载）、error（资源加载失败时）、abort（正在加载资源已经被中止时）
    • 焦点事件：focus（元素获得焦点）、blur（元素失去焦点）
    • 表单事件：submit（点击提交按钮）、reset（点击重置按钮时）、invalid（表单元素验证不通过）
    • 值变化事件：input（,
      事件类型
      图 3 事件类型
    1. $(function () {
    2.     // 按回车键登陆
    3.     $(document).keyup(function (event) {
    4.         if ((event.keyCode || event.which) === 13) {
    5.             $("#loginForm").submit();
    6.         }
    7.     });
    8. });