摘要：判斷傳入的節點是否是調用該方法的節點的后代節點。范圍對象表示一個包含節點和部分文本節點的文檔片段返回一個對象這個也是簡單提一下，以后用到了再補。

原文鏈接/)

本來準備把 DOM 的接口都總結一遍，但是我太天真了，DOM 下面的接口太龐大了，總結起來太費時了，所以只將自己平時沒注意到的以及常用到的知識記下來了，更詳細的 DOM 還是看 MDN 上的資料吧！

Node 是一個接口，該接口由 DOM 中的所有的節點類型實現，即所有節點類型（比如最常見的 Element 類型）都繼承自 Node 接口。

本來，節點類型總共有12種，但是隨著 DOM4 的出現，有 5 種節點類型被棄用。（詳情看這里）

Node 接口的很多屬性（比如 childNodes 、lastChild、firstChild、nextSibling、previousSibling）針對的是所有的節點類型，并不只是元素節點。

document.body.childNodes;

在瀏覽器控制端輸入上面的代碼，你會看到顯示的結果不僅僅有元素節點，還可能有文本節點、注釋節點等！

Node.hasChildNodes()：檢測一個節點下面是否包含一個或多個節點，若是，則返回 true。

Node.contains(otherNode)：判斷傳入的節點是否是調用該方法的節點的后代節點。

JavaScript 通過 Document 類型表示文檔。document 對象是 window 對象的一個屬性。

一些 document 對象的屬性：

document.documentElement // 指向 html 元素
document.head            // 指向 head 元素（HTML 5 新增）
document.body            // 指向 body 元素

document.characterSet    // 取得文檔使用的字符集
document.title           // 取得或設置文檔的標題

document.URL             // 取得文檔完整的 URL
document.domain          // 取得文檔所在的域名

Element 類型節點的 nodeType 的值為 1，nodeName 的值為元素的標簽名。

有關 Element類型節點的特性

獲取或設置公認的特性一般直接使用 對應的屬性

獲取或設置自定義特性，使用 getAttribute()、setAttribute() 方法

根據 HTML5 規范，自定義特性應該加上 data- 前綴以便驗證

// HTML 代碼

    Some text


// js 代碼，運行于瀏覽器控制端
var ele = document.getElementById("container");

ele.id;            // "container"
ele["id"];         // "container"
ele.className;     // "class1 class2"
ele.title;         // "titleValue"

ele.className += " class3";  // 更改 class 的值
ele.className;     // "class1 class2 class3"

// 利用 setAttribute() 可以添加元素不存在的特性
ele.setAttribute("data-test","just test");  // 添加自定義特性
ele["data-test"];                // undefined，不能直接訪問自定義特性
ele.getAttribute("data-test");   // "just test"

ele.removeAttribute("class");   // 刪除 class 特性
ele.className;                  // ""，一個空字符串

classList 屬性

這個屬性是 HTML5 中新增的用來操作元素類名的屬性。它比 className 屬性使用起來更方便。這個屬性返回的是一個新集合類型 DOMTokenList 的實例，它也是一個類數組對象。

var ele = document.getElementById("container");
ele.classList;                     // ["class1", "class2"]
ele.classList[0];                  // "class1"    string 類型
ele.classList.length;              // 2

ele.classList.add("class3");       // 添加新類名
ele.classList.remove("class1");    // 刪除類名
ele.classList;                     // ["class2", "class3"]

// contains() 用來檢測是否某個類名
ele.classList.contains("class1");  // false
ele.classList.contains("class2");  // true

// toggle() 用來交替刪除添加某個類名
ele.classList.toggle("class4");    // 不存在，則添加
ele.classList;                     // ["class2", "class3", "class4"]
ele.classList.toggle("class4");    // 存在，則刪除
ele.classList;                     // ["class2", "class3"]

attributes 屬性：返回一個 NamedNodeMap 類數組對象，它不能使用數組的方法。

一般不使用這個屬性，除非用來遍歷元素的特性。

// 繼續上面的代碼
ele.attributes;  // NamedNodeMap {0: id, 1: title, 2: data-test, length: 3}

ele.attributes[0].nodeName;   // "id"
ele.attributes[0].nodeValue;  // "container"

document.createElement()：創建新元素節點

var div = document.createElement("div");
console.log(div);         // 

console.log(typeof div);  // object

div.id = "container";
div.className = "a b c";
console.log(div);         // 

元素遍歷

我們前面說過，某個元素節點的 childNodes 屬性返回的集合可能會包含注釋節點、文本節點等我們一般不會去操作的節點，我們想要的只是元素節點。所以我們可以用下面的方法來達到我們的目的：

// 原理：通過 if 條件語句過濾掉不是元素節點的其它節點

var ele = document.getElementById("container");
var len = ele.childNodes.length;
for(let i = 0; i < len; i++){
  if(ele.childNodes[i].nodeType === 1){
    // 執行一些操作
    ele.childNodes[i].style.color = "green";
  }
}

很幸運，現在，W3C 已經幫我們搞出了一些新的屬性來專門操作元素節點。

Element.children：返回一個該元素下所有子元素節點的集合

Element.firstElementChild：返回第一個子元素節點

Element.lastElementChild：返回最后一個子元素節點

Element.previousElementSibling：返回前一個同輩元素節點

Element.nextElementSibling：返回后一個同輩元素節點

插入標記

innerHTML：返回或更改調用它的節點的所有子節點（包括注釋節點、文本節點等）

outerHTML：返回或更改調用它的元素以及這個元素所有的子節點

上面兩種屬性返回的都是字符串

element.insertAdjacentHTML(position, text)：將指定的文本解析為 HTML 或 XML，然后將結果節點插入到指定的位置上

position 是相對于 element 元素的位置，并且它有四個值

beforebegin：在 element 元素之前插入一個緊鄰的同輩元素

afterbegin：在 element 元素的第一個子節點之前插入

beforeend：在 element 元素的最后一個節點之后插入

afterend：在 element 元素之后插入一個緊鄰的同輩元素

Text 類型的節點（文本節點）的 nodeType 的值為 3。

document.createTextNode("文本內容")：創建新文本節點

規范化文本節點

DOM 文檔中存在相鄰的文本節點很容易導致混亂，因為分不清哪個文本節點表示哪個字符串。所以在 Node 接口中定義了一個 normalize() 方法，用來將當前節點和它的后代節點規范化。在一個"規范化"后的DOM樹中，不存在一個空的文本節點，或者兩個相鄰的文本節點。

var ele = document.createElement("div");

var textNode = document.createTextNode("Hello ");
ele.appendChild(textNode);
var anotherTextNode = document.createTextNode("world!");
ele.appendChild(anotherTextNode);

document.body.appendChild(ele);

console.log(ele.childNodes.length);   // 2
ele.normalize();                      // 規范化文本節點
console.log(ele.childNodes.length);   // 1

innerText 屬性：取得或更改操作元素包含的所有文本內容

一般不會去操作注釋節點！

// 注釋節點是 div 元素的一個子節點

document.createComment()：創建一個注釋節點

Selector API 是由 W3C 發起制定的一個標準，致力于讓瀏覽器原生 JavaScript 支持 CSS 查詢。

Selectors API Level 1 的核心是兩個方法：querySelector() 和 querySelectorAll()。

// selectors 是一個 CSS 選擇器字符串

// 從整個文檔開始查找
Document.querySelector(selectors)
Document.querySelectorAll(selectors)

// 從 Element 元素的后代元素開始查找
Element.querySelector(selectors)
Element.querySelectorAll(selectors)

Doctype 是 Document Type (文檔類型)的簡寫，用來說明你用的XHTML或者HTML是什么版本。它的作用是告知瀏覽器的解析器，用什么文檔類型規范來解析這個文檔。

文檔模式用于指定IE的頁面排版引擎（Trident）以哪個版本的方式來解析并渲染網頁代碼

document.compatMode：檢測當前文檔的渲染模式

若值為 BackCompat，則為混雜模式

若值為 CSS1Compat，則為標準規范模式

document.documentMode：檢測 IE 瀏覽器是在哪個瀏覽器模式下（這個屬性只適用于 IE 瀏覽器）

參考：文檔解析——Doctype、嚴格&混雜模式、瀏覽器&文檔模式

HTMLElement.style：返回一個 CSSStyleDeclaration 對象，表示元素的內嵌 style 屬性。

這個屬性的返回值只包含了在元素內嵌 style 屬性上聲明的的 CSS 屬性，而不包括來自其他地方聲明的樣式（比如 head 部分聲明的 CSS 屬性）。

由于 style 屬性的優先級和通過 style 設置元素的內聯樣式是一樣的，并且在css層級樣式中擁有最高優先級，因此在為特定的元素設置樣式時很有用。

// 為元素添加 2 個內嵌的 CSS 規則
var ele = document.getElementById("container");

// 方法一
ele.setAttribute("style","font-size:2em;color:green");  
// 方法二
ele.style.cssText = "font-size:2em;color:green";
// 方法三
var sty = ele.style;
sty.fontSize = "2em";
sty.color = "green";

DOM Level 2 Style: ElementCSSInlineStyle.style()

要獲取一個元素的所有 CSS 屬性，你應該使用 window.getComputedStyle()

// 單純地調用這個方法，會和上面的 style 屬性一樣返回一個 CSSStyleDeclaration 對象
window.getComputedStyle(ele);

// 該方法返回經過疊加計算后的元素的實際樣式
window.getComputedStyle(ele).fontSize;
window.getComputedStyle(ele).color;

document.styleSheets：只讀，返回一個由 StyleSheet 對象組成的 StyleSheetList，每個 StyleSheet 對象都是文檔中鏈接或嵌入的樣式表（即內聯樣式和外聯樣式，不包括嵌在元素里的樣式）。

// 獲取當前文檔中樣式表的數量
document.styleSheets.length;

// 禁用第一個樣式表
document.styleSheets[0].disabled = true;

DOM2 中定義了兩個用于輔助完成順序遍歷 DOM 結構的類型：NodeIterator 和 TreeWalker。

document.createNodeIterator()：返回一個 NodeIterator 對象

document.createTreeWalker()：返回一個 TreeWalker 對象

這里只簡單提一下這兩個方法，因為暫時還沒用過，所以先不展開了，以后用了再補。

Range 對象 表示一個包含節點和部分文本節點的文檔片段

document.createRange()：返回一個 Range 對象

這個也是簡單提一下，以后用到了再補。

【書】《JavaScript 高級程序設計（第三版）》