JS參考手冊

1、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
		顯示轉換（強制轉換）
符	符-->其它
	其它-->符

 

變量

常量

表達式

語句

2、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