BOM

  • BOM（Browser Object Model），浏览器对象模型，操作浏览器对象的 API
  • 表示浏览器中打开的窗口
  • 如果文档包含框架（ 或 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象</li><li><p>所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员</p> </li><li><p>常用属性：opener：返回对创建此窗口的窗口的引用parent：返回父窗口top：返回最顶层的父窗口navigator：对 Navigator 对象的只读引用frames：返回窗口中所有命名的框架location：用于窗口或框架的 Location 对象history：对 History 对象的只读引用document：对 Document 对象的只读引用screen：对 Screen 对象的只读引用</p> </li><li><p>常用方法<code>alert(message)</code>：消息框<code>confirm(message)</code>：确认框，返回一个 boolean 值<code>prompt(msg, defaultText)</code>：输入框，返回用户输入的内容<code>open(url, name, specs, replace)</code>：打开新窗口<code>close()</code>：关闭当前窗口<code>setTimeout(function, time)</code>：设置在 time 毫秒后<strong>异步</strong>调用 fn 函数，返回 timer<code>setInterval(function, time)</code>：设置每隔 time 毫秒<strong>异步</strong>调用 fn 函数，返回 timer<code>requestAnimationFrame(function)</code>：设置浏览器在下次重绘之前调用指定的回调函数更新动画（回调函数执行次数通常是每秒 60 次）<code>clearTimeout(timer)</code>：清除由 setTimeout 创建的定时器<code>clearInterval(timer)</code>：清除由 setInterval 创建的定时器<code>getComputedStyle(element)</code>：获取 element 对象的 CSS 样式声明对象</p> </li></ul> <p>

    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 事件类型
    1. $(function () {
    2.     // 按回车键登陆
    3.     $(document).keyup(function (event) {
    4.         if ((event.keyCode || event.which) === 13) {
    5.             $("#loginForm").submit();
    6.         }
    7.     });