javascript中常用到的方法和事件

一、DOM

 	 // 創建 p 標籤
 	var para = document.createElement("p")
 	 
	// 創建文本元素
	var node = document.createTextNode("這是一個新的段落。");

	//將文本節點添加到 <p> 元素中：
	par.appendChild(node);


	var child = document.getElementById("p1");
	//移除
	parent.removeChild(child);


	// 替換
	var parent = document.getElementById("div1");
	var child = document.getElementById("p1");
	parent.replaceChild(para, child);

HTMLCollection 與 NodeList 的區別：

HTMLCollection 是 HTML 元素的集合。（getElementsByTagName()）

NodeList 是一個文檔節點的集合。（querySelectorAll()、 childNodes ）

NodeList 與 HTMLCollection 有很多類似的地方。

NodeList 與 HTMLCollection 都有 length 屬性。

HTMLCollection 元素可以通過 name，id 或索引來獲取。

只有 NodeList 對象有包含屬性節點和文本節點。

NodeList 和 HTMLCollection 不是數組，看起來可能是一個數組，但其實不是。無法使用數組的方法： valueOf(), pop(), push(), 或 join() 。只能通過索引來獲取，

二、BOM

window.open() - 打開新窗口
window.close() - 關閉當前窗口
window.moveTo() - 移動當前窗口
window.resizeTo() - 調整當前窗口的尺寸


Window Screen
screen.availWidth - 可用的屏幕寬度
screen.availHeight - 可用的屏幕高度


Window Location
location.hostname 返回 web 主機的域名
location.pathname 返回當前頁面的路徑和文件名
location.port 返回 web 主機的端口 （80 或 443）
location.protocol 返回所使用的 web 協議（http: 或 https:）


Window History
history.back() - 與在瀏覽器點擊後退按鈕相同
history.forward() - 與在瀏覽器中點擊向前按鈕相同

history.go(1);  // go() 裏面的參數表示跳轉頁面的個數 例如 history.go(1) 表示前進一個頁面
history.go(-1);  // go() 裏面的參數表示跳轉頁面的個數 例如 history.go(-1) 表示後退一個頁面
history.go(0);  // go() 裏面的參數爲0,表示刷新頁面


Window Navigator
navigator.appCodeName   瀏覽器代號
navigator.appName 瀏覽器名稱
navigator.appVersion    瀏覽器版本
navigator.cookieEnabled    啓用Cookies
navigator.platform   硬件平臺
navigator.userAgent   用戶代理
navigator.systemLanguage  用戶代理語言

三、事件

addEventListener()
用於向指定元素添加事件句柄。
添加的事件句柄不會覆蓋已存在的事件句柄。
你可以向一個元素添加多個事件句柄。
你可以向同個元素添加多個同類型的事件句柄，如：兩個 "click" 事件。
你可以向任何 DOM 對象添加事件監聽，不僅僅是 HTML 元素。如： window 對象。
addEventListener() 方法可以更簡單的控制事件（冒泡與捕獲）。
當你使用 addEventListener() 方法時, JavaScript 從 HTML 標記中分離開來，可讀性更強， 在沒有控制HTML標記時也可以添加事件監聽。
你可以使用 removeEventListener() 方法來移除事件的監聽。


語法
element.addEventListener(event, function, useCapture);

第一個參數是事件的類型 (如 "click" 或 "mousedown").
第二個參數是事件觸發後調用的函數。
第三個參數是個布爾值用於描述事件是冒泡還是捕獲。該參數是可選的。


事件冒泡或事件捕獲？
事件傳遞有兩種方式：冒泡與捕獲。
事件傳遞定義了元素事件觸發的順序。 如果你將 <p> 元素插入到 <div> 元素中，用戶點擊 <p> 元素, 哪個元素的 "click" 事件先被觸發呢？
在 冒泡 中，內部元素的事件會先被觸發，然後再觸發外部元素，即： <p> 元素的點擊事件先觸發，然後會觸發 <div> 元素的點擊事件。
在 捕獲 中，外部元素的事件會先被觸發，然後纔會觸發內部元素的事件，即： <div> 元素的點擊事件先觸發 ，然後再觸發 <p> 元素的點擊事件。
addEventListener() 方法可以指定 "useCapture" 參數來設置傳遞類型：

…未完待續