元素 <option>元素表示下拉框（<select>，<optgroup>或<datalist>）里面的一个选项。它是 HTMLOptionElement 接口的实例。 属性 除了继承 HTMLElement 接口的属性和方法，HTMLOptionElement 接口具有下面的属性。 disabled：布尔值，表示该项是否可选择。 defaultSelected：布尔值，表示该项是否默认选中。一旦设为true，该项的值就是<select>的默认值。 form：返回<option>所在的表单元素。如果不属于任何表单，则返回null。该属性只读。 index：整数，表示该选项在整个下拉列表里面的位置。该属性只读。 label：字符串，表示对该选项的说明。如果该属性未设置，则返回该选项的文本内容。 selected：布尔值，表示该选项是否选中。 text：字符串，该选项的文本内容。 value：字符串，该选项的值。表单提交时，上传的就是选中项的这个属性。 Option() 构造函数 浏览器原生提供Option()构 ...

<button> 元素 <button>元素继承了HTMLButtonElement接口。它有以下的实例属性。 （1）HTMLButtonElement.accessKey HTMLButtonElement.accessKey属性返回一个字符串，表示键盘上对应的键，通过Alt + 这个键可以让按钮获得焦点。该属性可读写。 （2）HTMLButtonElement.autofocus HTMLButtonElement.autofocus属性是一个布尔值，表示页面加载过程中，按钮是否会自动获得焦点。该属性可读写。 （3）HTMLButtonElement.disabled HTMLButtonElement.disabled属性是一个布尔值，表示该按钮是否禁止点击。该属性可读写。 （4）HTMLButtonElement.form HTMLButtonElement.form属性是一个表单元素，返回该按钮所在的表单。该属性只读。如果按钮不属于任何表单，该属性返回null。 （5）HTMLButtonElement.formAction HTMLButtonEle ...

<input> 元素 <input>元素主要用于表单组件，它继承了 HTMLInputElement 接口。 HTMLInputElement 的实例属性 特征属性 name：字符串，表示<input>节点的名称。该属性可读写。 type：字符串，表示<input>节点的类型。该属性可读写。 disabled：布尔值，表示<input>节点是否禁止使用。一旦被禁止使用，表单提交时不会包含该<input>节点。该属性可读写。 autofocus：布尔值，表示页面加载时，该元素是否会自动获得焦点。该属性可读写。 required：布尔值，表示表单提交时，该<input>元素是否必填。该属性可读写。 value：字符串，表示该<input>节点的值。该属性可读写。 validity：返回一个ValidityState对象，表示<input>节点的校验状态。该属性只读。 validationMessage：字符串，表示该<input>节点的校验失败时，用户看到的报错信息。如 ...

<form> 元素 <form>元素代表了表单，继承了 HTMLFormElement 接口。 HTMLFormElement 的实例属性 elements：返回一个类似数组的对象，成员是属于该表单的所有控件元素。该属性只读。 length：返回一个整数，表示属于该表单的控件数量。该属性只读。 name：字符串，表示该表单的名称。 method：字符串，表示提交给服务器时所使用的 HTTP 方法。 target：字符串，表示表单提交后，服务器返回的数据的展示位置。 action：字符串，表示表单提交数据的 URL。 enctype（或encoding）：字符串，表示表单提交数据的编码方法，可能的值有application/x-www-form-urlencoded、multipart/form-data和text/plain。 acceptCharset：字符串，表示服务器所能接受的字符编码，多个编码格式之间使用逗号或空格分隔。 autocomplete：字符串on或off，表示浏览器是否要对<input>控件提供自动补全。 noValidate： ...

元素 概述 <img>元素用于插入图片，主要继承了 HTMLImageElement 接口。 浏览器提供一个原生构造函数Image，用于生成HTMLImageElement实例。 123var img = new Image();img instanceof Image // trueimg instanceof HTMLImageElement // true Image构造函数可以接受两个整数作为参数，分别表示<img>元素的宽度和高度。 12345// 语法Image(width, height)// 用法var myImage = new Image(100, 200); <img>实例的src属性可以定义图像的网址。 12var img = new Image();img.src = 'picture.jpg'; 新生成的<img>实例并不属于文档的一部分。如果想让它显示在文档中，必须手动插入文档。 123var img = new Image();img.src = 'image1.png& ...

<a> 元素 <a>元素用来设置链接。除了网页元素的通用接口（Node接口、Element接口、HTMLElement接口），它还继承了HTMLAnchorElement接口和HTMLHyperlinkElementUtils接口。 属性 URL 相关属性 <a>元素有一系列 URL 相关属性，可以用来操作链接地址。这些属性的含义，可以参见Location对象的实例属性。 hash：片段识别符（以#开头） host：主机和端口（默认端口80和443会省略） hostname：主机名 href：完整的 URL origin：协议、域名和端口 password：主机名前的密码 pathname：路径（以/开头） port：端口 protocol：协议（包含尾部的冒号:） search：查询字符串（以?开头） username：主机名前的用户名 1234567891011121314// HTML 代码如下// <a id="test" href="http://user:passwd@example.com:808 ...

Web Worker 概述 JavaScript 语言采用的是单线程模型，也就是说，所有任务只能在一个线程上完成，一次只能做一件事。前面的任务没做完，后面的任务只能等着。随着电脑计算能力的增强，尤其是多核 CPU 的出现，单线程带来很大的不便，无法充分发挥计算机的计算能力。 Web Worker 的作用，就是为 JavaScript 创造多线程环境，允许主线程创建 Worker 线程，将一些任务分配给后者运行。在主线程运行的同时，Worker 线程在后台运行，两者互不干扰。等到 Worker 线程完成计算任务，再把结果返回给主线程。这样的好处是，一些计算密集型或高延迟的任务可以交由 Worker 线程执行，主线程（通常负责 UI 交互）能够保持流畅，不会被阻塞或拖慢。 Worker 线程一旦新建成功，就会始终运行，不会被主线程上的活动（比如用户点击按钮、提交表单）打断。这样有利于随时响应主线程的通信。但是，这也造成了 Worker 比较耗费资源，不应该过度使用，而且一旦使用完毕，就应该关闭。 Web Worker 有以下几个使用注意点。 （1）同源限制 分配给 Worker 线程运行的 ...

IndexedDB API 概述 随着浏览器的功能不断增强，越来越多的网站开始考虑，将大量数据储存在客户端，这样可以减少从服务器获取数据，直接从本地获取数据。 现有的浏览器数据储存方案，都不适合储存大量数据：Cookie 的大小不超过 4KB，且每次请求都会发送回服务器；LocalStorage 在 2.5MB 到 10MB 之间（各家浏览器不同），而且不提供搜索功能，不能建立自定义的索引。所以，需要一种新的解决方案，这就是 IndexedDB 诞生的背景。 通俗地说，IndexedDB 就是浏览器提供的本地数据库，它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据，提供查找接口，还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言，IndexedDB 不属于关系型数据库（不支持 SQL 查询语句），更接近 NoSQL 数据库。 IndexedDB 具有以下特点。 （1）键值对储存。 IndexedDB 内部采用对象仓库（object store）存放数据。所有类型的数据都可以直接存入，包括 JavaScript 对象。对象仓库中，数据以“键值对 ...

表单，FormData 对象 表单概述 表单（<form>）用来收集用户提交的数据，发送到服务器。比如，用户提交用户名和密码，让服务器验证，就要通过表单。表单提供多种控件，让开发者使用，具体的控件种类和用法请参考 HTML 语言的教程。本章主要介绍 JavaScript 与表单的交互。 12345678910111213<form action="/handling-page" method="post"> <div> <label for="name">用户名：</label> <input type="text" id="name" name="user_name" /> </div> <div> <label for="passwd">密码：</label> <input type=&qu ...