【收藏】JavaScript DOM操作簡易速查手冊

1 概述

1.1 前言

本文中簡要羅列了JavaScript操作Dom的基本方法，其中包括元素查詢、文檔結構遍歷、屬性及內容操作、創建節點、插入節點及刪除節點等內容。雖然JQuery更便利，但我還是喜歡用原生的API。

2 文檔元素選取

2.1 ID選擇器

通過ID選取元素是最簡單和常用的選取元素的方法，ID選擇器性能優於其它選擇器。

var title = document.getElementById("title");

ID不存在，返回 null 。

查看示例程序

2.2 名稱選擇器

基於name屬性的值選取元素區別於ID選擇器。其一，name屬性值 不是必須唯一，多個元素可能有同樣的名稱；其二，name屬性只在少數HTML元素中有效，包括表單、表單元素、iframe 及 img 元素。

var sports = document.getElementsByName("sports");

查看示例程序

2.3 標籤選擇器

利用HTML元素的標籤名稱選取指定類型的元素。

var h1 = document.getElementsByTagName("h1");

查看示例程序

2.4 類選擇器

通過HTML的 class 屬性值選擇元素。

var title = document.getElementsByClassName("title");

查看示例程序

2.5 CSS單元素選擇器

通過CSS樣式表選擇器的強大語法，來選擇元素。返回第一個匹配的元素。

var title = document.querySelector("#title");   // CSS ID選擇
var h1 = document.querySelector("h1");     //選取第一個h1元素

查看示例程序

2.6 CSS多元素選擇器

這是最強大的終極選擇器

var h1s = document.querySelectorAll("h1");    //返回所有h1標籤元素

查看示例程序

3 DOM遍歷

3.1 節點相關

3.1.1 父節點-parentNode

返回父節點，如果 document 對象調用則返回 null。

var parent = node.parentNode;

查看示例程序

3.1.2 子節點-childNodes

返回所有子節點，即NodeList對象。

var children = node.childNodes;

查看示例程序

3.1.3 首子節點-firstChild

返回第一個子節點。

var first = node.firstChild;

查看示例程序

3.1.4 尾子節點-lastChild

返回最後一個子節點。

var last = node.lastChild;

查看示例程序

3.1.5 下一兄弟節點-nextSibling

返回下一個兄弟節點。

var next = node.nextSibling;

查看示例程序

3.1.6 前一兄弟節點-previousSibling

返回前一個兄弟節點。

var previous = node.previousSibling;

查看示例程序

3.1.7 節點類型-nodeType

返回節點類型的數字表示。

• 1代表 Element 節點
• 3代表 Text 節點
• 8代表 Comment 節點
• 9代表 Document 節點
• 11代表 DocumentFragment 節點

查看示例程序

3.1.8 節點值-nodeValue

返回 Text 節點 或 Comment 節點的值。

var value = node.nodeValue;

查看示例程序

3.1.9 節點名-nodeName

返回元素的標籤名，以大寫形式表示。

var name = node.nodeName;

查看示例程序

3.2 元素相關

3.2.1 子元素-children

返回所有子元素。

var children = node.children;

查看示例程序

3.2.2 首子元素-firstElementChild

元素是節點的一種。

返回所有子元素中的第一個。

var first = node.firstElementChild;

查看示例程序

3.2.3 尾子元素-lastElementChild

返回所有子元素中的最後一個。

var last= node.lastElementChild;

查看示例程序

3.2.4 下一兄弟元素-nextElementSibling

返回下一個兄弟元素。

var next = node.nextElementSibling;

查看示例程序

3.2.5 前一兄弟元素-previousElementSibling

返回前一兄弟元素。

var previous = node.previousElementSibling;

查看示例程序

3.2.6 子元素數量

返回子元素的數量。

var count = node.childElementCount;

查看示例程序

4 屬性

4.1 標準屬性

表示HTML文檔元素的 HTMLElement 對象定義了讀/寫屬性，它們對應於元素的HTML屬性。HTMLElement 定義了通用的HTML屬性，包括id、lang、dir、事件處理程序 onclick 及表單相關屬性等。

form.action = "http://30ke.cn";
form.method = "post";

查看示例程序

4.2 非標準屬性

4.2.1 獲取屬性值-getAttribute

返回非標準的HTML屬性的值。

var width = img.getAttribute("width");

查看示例程序

4.2.2 屬性值設置-setAttribute

設置非標準的HTML屬性的值。

img.setAttribute("width","400px");

查看示例程序

4.2.3 屬性存在檢測-hasAttribute

返回布爾值，用來檢測屬性是否存在。

var result = img.hasAttribute("width");

查看示例程序

4.2.4 刪除屬性-removeAttribute

刪除某一屬性。

img.removeAttribute("width");

查看示例程序

4.3 數據集屬性-dataset

在HTML5文檔中，任意以 data- 爲前綴的小寫的屬性名字都是合法的。這些 “數據集屬性” 定義了一種標準的、附加額外數據的方法。

var x = img.dataset.x;

查看示例程序

4.4 元素屬性-attributes

Node節點定義了 attributes 屬性，針對 Element 對象，attributes 是元素所有屬性的類數組對象。

var attributes = img.attributes;

索引 attributes 對象得到的值是 Attr 對象。Attr 的 name 和 value 返回該屬性的名字和值。

查看示例程序

5 元素內容

5.1 元素內容-innerHTML

innerHTML 屬性以字符串形式返回這個元素的內容。也可以用來替換元素當前內容。

var innerHTML = parent.innerHTML;     // 獲取節點的內容
parent.innerHTML = "<h1>三十課</h1>";  //替換節點的內容

查看示例程序

5.2 元素及內容-outerHTML

outerHTML 屬性以字符串形式返回這個元素及內容。也可以用來替換當前元素及內容。

var outerHTML = parent.outerHTML;     // 獲取節點及內容
parent.outerHTML= "<h1>三十課</h1>";  //替換節點及其內容

查看示例程序

5.3 純文本元素內容-textContent

查詢或替換純文本元素內容的標準方法是用Node的textContent屬性來實現。在IE中，可以用 Element 的 innerText 屬性來代替。

console.log(title.textContent);
title.textContent = "三十課2";

查看示例程序

6 創建節點

6.1 創建元素節點-createElement

使用 document 對象的 createElement() 方法創建新的 Element節點。

var h1 = document.createElement("h1");

查看示例程序

6.2 創建文本節點-createTextNode

創建純文本節點。

var txt = document.createTextNode("三十課");

查看示例程序

6.3 創建文檔片段-createDocumentFragment

使用文檔片段通常會帶來更好的性能。因爲文檔片段存在於內存中，並不在DOM樹中，所以將子元素插入到文檔片段時不會引起頁面迴流（對元素位置和幾何上的計算）。

var fragment = document.createDocumentFragment();

查看示例程序

6.4 創建註釋節點-createComment

創建註釋節點不經常使用。

var comment = document.createComment("Created by 毛瑞");

查看示例程序

6.5 節點克隆-cloneNode

通過複製已存在的節點來創建新的文檔節點。傳參數 true 表示深克隆，false表示淺複製。

var title2 = title.cloneNode(true);

查看示例程序

7 插入節點

7.1 插入子節點-appendChild

在指定元素上插入子節點，並使其成爲該節點的最後一個子節點。

parent.appendChild(h2);  

查看示例程序

7.2 節點前插入-insertBefore

• 在父節點上調用本方法
• 第一參數表示待插入的節點
• 第二參數是父節點中已經存在的子節點，新節點插入到該節點的前面

parent.insertBefore(h1,h2);   // h1插入到h2之前。

查看示例程序

8 刪除和替換

8.1 刪除子節點-removeChild

• 在父節點上調用
• 參數是待刪除的節點

parent.removeChild(h2);

查看示例程序

8.2 替換子節點-replaceChild

• 在父節點上調用
• 第一個參數是新節點
• 第二個參數是需要替換的節點

parent.replaceChild(h2n , h2);  

查看示例程序

9 結尾

9.1 結語

本人知識水平有限，在彙編的過程中時有錯誤發生，如發現請不吝指正！多謝。