JS参考手册

一、JavaScript Core API

词法结构

字符集

使用Unicode字符集

注释

单行注释

//或HTML风格的<!--

多行注释

/**/

标识符

大小写

区分大小写

空格、换行、格式控制

转义序列

字面值、类型、变量、常量

字面值

类型（字面值或量的类型）

类型种类

原始类型	布
	符	无符号16位序列（utf-16，内码） ES3中必须一行，ES5可以多行，行后加\ 单双引号交叉同用 转义字符
	数	所有数字均为IEEE 754 64位浮点数 整数：十进制\十六进制0x、0X\八进制0 小数：普通表示法\指数表示法
	u	变量未初始化为u 对象属性或数组元素不存在 函数默认返回u（如果函数没有显式返回） 函数形参为u 预定义的全局变量，非关键字 typeof返回undefined 系统级、出乎意料或类似错误的值得空缺
	n	关键字 typeof返回object 正常、意料之中或正常的值的空缺
引用类型	数组
	对象

类型转换

布	布-->其它		布 符：toString() 整数 小数 u n 数组 对象
	其它-->布	隐式转换（系统默认）	falsy value:false\""(空字符串)\0、-0、NaN\un truthy value:除上面外全转换成true
		显示转换（强制转换）
符	符-->其它
	其它-->符

变量

常量

表达式

语句

二、Web浏览器API（客户端API）

Web浏览器中JS的运行

引入（四种方式）

内联（执行一次）

script元素属性表：

属性及默认值	说明	备注
language="javascript"	老式浏览器代替type，已废弃
type="text/javascript"	脚本的MIME类型	当包含不被浏览器识别的type属性值时， 在内联下:会解析这个元素但不会显示或执行其中内容，可使用script元素的HTMLElement的text属性读取。 在外部下：src指定的文件不会被下载，会忽略该脚本
src="url"	.js文件URL
defer	延迟执行	布尔属性，插入script标签即可 存在兼容性，H5中必须联合src使用才有效 当defer和async同时存在，且浏览器均支持，则会支持async，忽略defer 延迟脚本执行，直到文档载入、解析、可操作。 多个延迟脚本按照在文档出现顺序执行
async	异步执行	布尔属性，插入script标签即可， 存在兼容性，H5中必须联合src使用才有效 当defer和async同时存在，且浏览器均支持，则会支持async，忽略defer 异步脚本执行，尽快执行脚本，避免下载脚本阻塞解析。（如100M的脚本可以先异步执行而不必先下载完成） 多个异步脚本载入后执行，意味着可能无序执行

XHTML中，“<”,“&”会解释成xml，可用CDATA包围：<![CDATA[ //JS code ]]>。

外部（执行一次）

使用src后，script标签的之间的内容会被忽略。

事件属性（执行多次）

• 属性值包含多条语句，以;分割，构成一个函数体。
• 单行注释不可用。

URL资源（执行多次）

• <a href="javascript:" />
• <form action="javascript:" />
• window.open()方法的参数
• 超链接里的URL（bookmarklet）
• 单行注释不可用

javascript:url执行后会将返回值覆盖当前文档，可以：

• void操作符强制函数调用或
• 给表达式赋予undefined

避免覆盖

执行（单线程模型，无并发，脚本和事件处理程序同一时间只能执行一个）

同步执行阶段（脚本执行阶段）

1. 默认执行方式（内联和外部脚本默认情况下同步阻塞执行，阻塞文档解析和渲染）
2. 可改变的执行方式：

• defer延迟脚本
• async异步脚本
• 动态创建script标签插入文档实现异步载入和执行。

异步执行阶段（事件处理阶段，事件驱动）

第一个事件：onload事件

执行时间线

1. document.readystate="loading"阶段。web浏览器创建Document对象，解析web页面，解析HTML元素和文本内容添加Element对象和Text节点到文档中。
   • 无async和defer的script元素时：
   • 暂停解析（暂停解析文档，将元素添加入文档并同步执行，下载和执行时解析器会暂停解析。）
   • 可以使用document.write()方法将文本插入输入流。解析器恢复时，这些文本成为文档的一部分。
   • 可以访问自身的script元素及之前的文档内容。
   • 含async的script元素时：
   • 继续解析（继续解析文档，同时异步下载脚本文本并尽快执行）
   • 禁止使用documnet.write()方法。
   • 可能也不可能（取决于尽快的程度）访问自身的script元素及之前的文档内容。
   • 含defer的script元素时：
   • 继续解析，暂停脚本执行直到文档完成解析。
2. 解析文档完成后，document.readystate="interactive"。
   • 由于文档解析完成，含defer的script元素顺序执行
   • 禁止使用document.write()方法
   • 可以访问完整文档树
3. 浏览器在Document上触发DOMContentLoaded事件。此时异步脚本可能没有执行。
4. 载入图片，执行未执行的异步脚本后，document.readystate="complete"，然后web浏览器会触发window的load事件。

Web浏览器中JS的兼容性、安全性、可访问性

兼容性

兼容性的原因（演化、未实现、Bug）

兼容性的解决

• 类库
• 分级支持
• 功能测试
• 浏览器测试
• 怪异模式和标准模式
• IE条件注释

HTML中的条件注释

单独的条件前后缀 <!--[if !|lt|gt|lte|gte IE|IE 5|IE 6|IE 7|IE 8|IE 9]> IE5~IE9能识别前后缀并解释渲染内容 其他浏览器不能识别前后缀仅当做注释 <![endif]--> 注释的条件前后缀 <!--[if !|lt|gt|lte|gte IE|IE 5|IE 6|IE 7|IE 8|IE 9]>-->（或<---->） IE5~IE9能识别前后缀但同时将里面的内容当做注释并不展示 其他浏览器不能识别前后缀仅当做注释，但此时前后缀也被注释掉，所以可以识别里面的内容。 <!--（或<!---->）<![endif]-->

JS中的条件注释（IE的js解释器支持条件注释）

/*@cc_on
@if(@_jscript)
@else
　@end
@*/

安全性

同源策略

不严格同源策略

• Document对象的domain属性
• CORS跨域资源共享
• CDM跨文档消息

IE的Active控件和非IE的插件

XSS跨站脚本

拒绝服务攻击

可访问性(JS增强信息访问，WAI-ARIA)

BOM（宿主API）

Window

属性

　　　　 普通属性

事件属性

方法

DOM（宿主下文档API）

Document对象

属性

方法

节点树的操作（增删改查）

元素节点的操作

查（访问）
遍历方式
节点属性	nodeType nodeName nodeValue
根节点	document.documentElement
子节点	hasChildNodes() childNodes/children firstChild/firstElementChild lastChild/lasrElementChild childElementCount
父节点	parentNode
兄弟节点	previousSibling/previousElementSibling nextSibling/nextElementSibling
快捷方式
属性	id	document.getElementById()	Element对象	IE8以下，该方法入参不区分大小写，且返回匹配的name属性的元素
	name	document.getElementsByName()	NodeList对象（包含若干Element对象的数组）	IE中该方法也返回匹配的id属性的元素 定义在HTMLDocument类中，不在Document类中，故在HTML文档可用，XML文档中不可用 为HTML元素设置id后，自动为window对象创建对应属性 为<form>\<img>\<applet>\<embed>\<object>\<iframe>设置name后，自动为Document对象创建对应属性（其中<iframe>指代window对象）
	class	document.getElementsByClassName()
元素	Tag	document.getElementsByTagName()
CSS选择器	Selector	document.querySelector()
		document.querySelectorAll()
document.all
增
创建	元素节点	document.createElement('element')/document.createElementNS('url','element')(在使用了XML命名空间的文档中，同时指定命名空间的url和标签名)
	文本节点	document.createTextNode('text node content')
	注释节点	document.createComment()
	文档碎片	document.createDocumentFragment()		DocumentFragment和Document一样独立不属于文档一部分，且把一组节点当中一个节点
	克隆节点	Node.cloneNode(true|false)（true：深拷贝|false：浅拷贝）
	导入节点	document.importNode(node,true|false)（true：深拷贝|false：浅拷贝）		除IE外
插入节点	appendChild() insertBefore()	Node.appendChild(newNode) Node.insertBefore(newNode,exitNode)(若exitNode参数为null，等于apendChild()方法，相当于在最后一个插入)		若插入已存在的节点，则会删除已存在重新插入
删
删除和替换节点	Node.removeChild(exitNode) Node.replaceChild(newNode,exitNode)
改

属性节点的操作

Node节点属性	Node.attributes[index|name]	非Element的任何节点属性值为null Element的节点属性值为实时只读类数组 实时只读类数组索引后返回的是特殊的属性节点Attr对象 Attr对象可访问name和value
标准属性	Element.property	HTMLElement定义了通用的属性（id、lang、dir）及事件属性 特定的Element子类型定义各自的属性 驼峰命名法，保留字属性采用前缀HTML（htmlFor），class变为className 字符串、布尔、数值属性值为字符串、布尔、数值 事件属性值为Function对象（或null） style属性值为CSSStyleDeclaration对象
非标准属性	Element.getAttribute('property') Element.setAttribute('property','value') Element.hasAttribute() Element.removeAttribute('property')	属性值返回字符串 保留字属性不转换 布尔属性可用hasAttribute()判断 四个方法的命名空间版本加后缀NS
数据集属性	Element.dataset	dataset属性指代一个对象，该对象的各个属性值为去掉data-前缀且驼峰表示后的属性值

文本节点的操作

Node节点文本	Node.nodeValue
	Node.data
纯文本	Node.textContent	除IE外都支持
	Element.innerText	除FF外都支持
	document.getElementsByTagName('script')[0].text(script元素text属性)
HTML文本	document./element.innerHtml	单独设置时效率高，使用+=拼接效率低，因为既要序列化又要解析
	element.outerHtml	除FF外都支持
	element.insertAdjacentHTML('beforebegin|afterbegin|beforeend|afterend','element')

CSSOM（宿主下文档样式API）

内联样式 style	e.style.property	(将样式作为对象的属性) 只返回内联样式,对于元素真正应用的样式（计算样式）无能为力 e.style返回CSSStyleDeclaration对象 CSSStyleDeclaration对象的属性名字为驼峰命名并且保留字属性加前缀 数值属性加单位 复合属性有对应
	e.style.cssText e.getAttribute('style') e.setAttrbute('style','value')	(将样式作为单个的字符串)
计算样式 getComputedStyle()	window.getComputedStyle(e,null|''|':before(css伪对象字符串)')	IE8及以下不支持 返回CSSSstyleDeclaration对象 只读 其cssText属性为未定义 百分比、pt属性值返回绝对值，颜色属性转换rgb(a) 不计算复合属性，只计算基础属性
	e.currentStyle	IE中每个e都有自己的currentStyle属性 百分比、pt属性值返回相对值,颜色属性不转换rgb(a)
class类	e.className
	e.classList	H5中定义 属性值为实时只读类数组对象DOMTokenList DOMTokenList的方法add()\remove()\toggle()\contains()
样式表	style元素 link元素	disabled属性开启和关闭样式表
	d.styleSheets	disabled属性开启和关闭样式表 属性值为只读类数组对象，包含CSSStyleSheets对象 cssRules[](标准API，包含所有规则，包括@指令) rules[](IE，只包含样式表中实际存在的规则),元素为CSSRule对象 insertRule()\deleteRule() addRule()\removeRule()
	DOM创建style，设置innerHtml d.createStyleSheet(),设置cssText属性

事件

异步事件驱动模型

事件类型

事件目标

事件处理程序

注册

属性注册	元素属性注册	on-	如果事件目标为window则注册在body元素的属性上
	JavaScript对象属性注册	Object.on-	只能注册一个属性
方法注册	非IE，标准API	addEventListener('type',function,boolear) removeEventListener('type',function,boolear)	第三个参数默认false，可省略，当为true注册为捕获型事件处理程序 事件类型参数type不带前缀on- 允许注册多个不同的事件处理程序函数的事件，但不允许注册多个相同事件处理程序函数的事件
	IE9以下	attachEvent('type',function) detachEvent('type',function)	不支持事件捕获，只有两个参数 事件类型参数type为带前缀的on- 允许相同的事件处理程序函数注册多次

调用

参数	event IE8及以前中window.event
运行环境	addEventListener()中this指代事件目标 attachEvent()中this指代window
作用域	HTML属性注册的事件处理函数被转换为能存取全局变量的顶级函数，而非本地变量
返回值	对属性注册的处理程序 返回false取消默认操作 onbeforeunload事件处理程序返回字符串，将出现在提示框 对通过方法注册的处理程序 preventDefault() 设置returnValue属性
调用顺序	属性注册优先 addEventListener()方法注册的按注册顺序调用 attachEvent()方法注册的不保证按注册顺序调用

事件对象

事件传播

HTML5相关API