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

1 概述

1.1 前言

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

2 文檔元素選取

2.1 ID選擇器

通過ID選取元素是最簡單和常用的選取元素的方法，ID選擇器性能優(yōu)于其它選擇器。

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

ID不存在，返回 null 。

查看示例程序

2.2 名稱選擇器

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

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

查看示例程序

2.3 標簽選擇器

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

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

查看示例程序

2.4 類選擇器

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

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

查看示例程序

2.5 CSS單元素選擇器

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

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

查看示例程序

2.6 CSS多元素選擇器

這是最強大的終極選擇器

var h2s = document.querySelectorAll("h2");    //返回所有h2標簽元素

查看示例程序

3 DOM遍歷

3.1 節(jié)點相關(guān)

3.1.1 父節(jié)點-parentNode

返回父節(jié)點，如果 document 對象調(diào)用則返回 null。

var parent = node.parentNode;

查看示例程序

3.1.2 子節(jié)點-childNodes

返回所有子節(jié)點，即NodeList對象。

var children = node.childNodes;

查看示例程序

3.1.3 首子節(jié)點-firstChild

返回第一個子節(jié)點。

var first = node.firstChild;

查看示例程序

3.1.4 尾子節(jié)點-lastChild

返回最后一個子節(jié)點。

var last = node.lastChild;

查看示例程序

3.1.5 下一兄弟節(jié)點-nextSibling

返回下一個兄弟節(jié)點。

var next = node.nextSibling;

查看示例程序

3.1.6 前一兄弟節(jié)點-previousSibling

返回前一個兄弟節(jié)點。

var previous = node.previousSibling;

查看示例程序

3.1.7 節(jié)點類型-nodeType

返回節(jié)點類型的數(shù)字表示。

• 1代表 Element 節(jié)點
• 3代表 Text 節(jié)點
• 8代表 Comment 節(jié)點
• 9代表 Document 節(jié)點
• 11代表 DocumentFragment 節(jié)點

查看示例程序

3.1.8 節(jié)點值-nodeValue

返回 Text 節(jié)點 或 Comment 節(jié)點的值。

var value = node.nodeValue;

查看示例程序

3.1.9 節(jié)點名-nodeName

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

var name = node.nodeName;

查看示例程序

3.2 元素相關(guān)

3.2.1 子元素-children

返回所有子元素。

var children = node.children;

查看示例程序

3.2.2 首子元素-firstElementChild

元素是節(jié)點的一種。

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

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 子元素數(shù)量

返回子元素的數(shù)量。

var count = node.childElementCount;

查看示例程序

4 屬性

4.1 標準屬性

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

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 數(shù)據(jù)集屬性-dataset

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

var x = img.dataset.x;

查看示例程序

4.4 元素屬性-attributes

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

var attributes = img.attributes;

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

查看示例程序

5 元素內(nèi)容

5.1 元素內(nèi)容-innerHTML

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

var innerHTML = parent.innerHTML;     // 獲取節(jié)點的內(nèi)容
parent.innerHTML = "<h2>三十課</h2>";  //替換節(jié)點的內(nèi)容

查看示例程序

5.2 元素及內(nèi)容-outerHTML

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

var outerHTML = parent.outerHTML;     // 獲取節(jié)點及內(nèi)容
parent.outerHTML= "<h2>三十課</h2>";  //替換節(jié)點及其內(nèi)容

查看示例程序

5.3 純文本元素內(nèi)容-textContent

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

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

查看示例程序

6 創(chuàng)建節(jié)點

6.1 創(chuàng)建元素節(jié)點-createElement

使用 document 對象的 createElement() 方法創(chuàng)建新的 Element節(jié)點。

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

查看示例程序

6.2 創(chuàng)建文本節(jié)點-createTextNode

創(chuàng)建純文本節(jié)點。

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

查看示例程序

6.3 創(chuàng)建文檔片段-createDocumentFragment

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

var fragment = document.createDocumentFragment();

查看示例程序

6.4 創(chuàng)建注釋節(jié)點-createComment

創(chuàng)建注釋節(jié)點不經(jīng)常使用。

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

查看示例程序

6.5 節(jié)點克隆-cloneNode

通過復制已存在的節(jié)點來創(chuàng)建新的文檔節(jié)點。傳參數(shù) true 表示深克隆，false表示淺復制。

var title2 = title.cloneNode(true);

查看示例程序

7 插入節(jié)點

7.1 插入子節(jié)點-appendChild

在指定元素上插入子節(jié)點，并使其成為該節(jié)點的最后一個子節(jié)點。

parent.appendChild(h3);  

查看示例程序

7.2 節(jié)點前插入-insertBefore

• 在父節(jié)點上調(diào)用本方法
• 第一參數(shù)表示待插入的節(jié)點
• 第二參數(shù)是父節(jié)點中已經(jīng)存在的子節(jié)點，新節(jié)點插入到該節(jié)點的前面

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

查看示例程序

8 刪除和替換

8.1 刪除子節(jié)點-removeChild

• 在父節(jié)點上調(diào)用
• 參數(shù)是待刪除的節(jié)點

parent.removeChild(h3);

查看示例程序

8.2 替換子節(jié)點-replaceChild

• 在父節(jié)點上調(diào)用
• 第一個參數(shù)是新節(jié)點
• 第二個參數(shù)是需要替換的節(jié)點

parent.replaceChild(h3n , h3);  

查看示例程序

9 結(jié)尾

9.1 結(jié)語

本人知識水平有限，在匯編的過程中時有錯誤發(fā)生，如發(fā)現(xiàn)請不吝指正！多謝。