摘要：判斷傳入的節(jié)點(diǎn)是否是調(diào)用該方法的節(jié)點(diǎn)的后代節(jié)點(diǎn)。范圍對(duì)象表示一個(gè)包含節(jié)點(diǎn)和部分文本節(jié)點(diǎn)的文檔片段返回一個(gè)對(duì)象這個(gè)也是簡(jiǎn)單提一下，以后用到了再補(bǔ)。

原文鏈接/)

本來(lái)準(zhǔn)備把 DOM 的接口都總結(jié)一遍，但是我太天真了，DOM 下面的接口太龐大了，總結(jié)起來(lái)太費(fèi)時(shí)了，所以只將自己平時(shí)沒注意到的以及常用到的知識(shí)記下來(lái)了，更詳細(xì)的 DOM 還是看 MDN 上的資料吧！

Node 是一個(gè)接口，該接口由 DOM 中的所有的節(jié)點(diǎn)類型實(shí)現(xiàn)，即所有節(jié)點(diǎn)類型（比如最常見的 Element 類型）都繼承自 Node 接口。

本來(lái)，節(jié)點(diǎn)類型總共有12種，但是隨著 DOM4 的出現(xiàn)，有 5 種節(jié)點(diǎn)類型被棄用。（詳情看這里）

Node 接口的很多屬性（比如 childNodes 、lastChild、firstChild、nextSibling、previousSibling）針對(duì)的是所有的節(jié)點(diǎn)類型，并不只是元素節(jié)點(diǎn)。

document.body.childNodes;

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

Node.hasChildNodes()：檢測(cè)一個(gè)節(jié)點(diǎn)下面是否包含一個(gè)或多個(gè)節(jié)點(diǎn)，若是，則返回 true。

Node.contains(otherNode)：判斷傳入的節(jié)點(diǎn)是否是調(diào)用該方法的節(jié)點(diǎn)的后代節(jié)點(diǎn)。

JavaScript 通過 Document 類型表示文檔。document 對(duì)象是 window 對(duì)象的一個(gè)屬性。

一些 document 對(duì)象的屬性：

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

document.characterSet    // 取得文檔使用的字符集
document.title           // 取得或設(shè)置文檔的標(biāo)題

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

Element 類型節(jié)點(diǎn)的 nodeType 的值為 1，nodeName 的值為元素的標(biāo)簽名。

有關(guān) Element類型節(jié)點(diǎn)的特性

獲取或設(shè)置公認(rèn)的特性一般直接使用 對(duì)應(yīng)的屬性

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

根據(jù) HTML5 規(guī)范，自定義特性應(yīng)該加上 data- 前綴以便驗(yàn)證

// HTML 代碼

    Some text


// js 代碼，運(yùn)行于瀏覽器控制端
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;                  // ""，一個(gè)空字符串

classList 屬性

這個(gè)屬性是 HTML5 中新增的用來(lái)操作元素類名的屬性。它比 className 屬性使用起來(lái)更方便。這個(gè)屬性返回的是一個(gè)新集合類型 DOMTokenList 的實(shí)例，它也是一個(gè)類數(shù)組對(duì)象。

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() 用來(lái)檢測(cè)是否某個(gè)類名
ele.classList.contains("class1");  // false
ele.classList.contains("class2");  // true

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

attributes 屬性：返回一個(gè) NamedNodeMap 類數(shù)組對(duì)象，它不能使用數(shù)組的方法。

一般不使用這個(gè)屬性，除非用來(lái)遍歷元素的特性。

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

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

document.createElement()：創(chuàng)建新元素節(jié)點(diǎn)

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

console.log(typeof div);  // object

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

元素遍歷

我們前面說(shuō)過，某個(gè)元素節(jié)點(diǎn)的 childNodes 屬性返回的集合可能會(huì)包含注釋節(jié)點(diǎn)、文本節(jié)點(diǎn)等我們一般不會(huì)去操作的節(jié)點(diǎn)，我們想要的只是元素節(jié)點(diǎn)。所以我們可以用下面的方法來(lái)達(dá)到我們的目的：

// 原理：通過 if 條件語(yǔ)句過濾掉不是元素節(jié)點(diǎn)的其它節(jié)點(diǎn)

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

很幸運(yùn)，現(xiàn)在，W3C 已經(jīng)幫我們搞出了一些新的屬性來(lái)專門操作元素節(jié)點(diǎn)。

Element.children：返回一個(gè)該元素下所有子元素節(jié)點(diǎn)的集合

Element.firstElementChild：返回第一個(gè)子元素節(jié)點(diǎn)

Element.lastElementChild：返回最后一個(gè)子元素節(jié)點(diǎn)

Element.previousElementSibling：返回前一個(gè)同輩元素節(jié)點(diǎn)

Element.nextElementSibling：返回后一個(gè)同輩元素節(jié)點(diǎn)

插入標(biāo)記

innerHTML：返回或更改調(diào)用它的節(jié)點(diǎn)的所有子節(jié)點(diǎn)（包括注釋節(jié)點(diǎn)、文本節(jié)點(diǎn)等）

outerHTML：返回或更改調(diào)用它的元素以及這個(gè)元素所有的子節(jié)點(diǎn)

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

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

position 是相對(duì)于 element 元素的位置，并且它有四個(gè)值

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

afterbegin：在 element 元素的第一個(gè)子節(jié)點(diǎn)之前插入

beforeend：在 element 元素的最后一個(gè)節(jié)點(diǎn)之后插入

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

Text 類型的節(jié)點(diǎn)（文本節(jié)點(diǎn)）的 nodeType 的值為 3。

document.createTextNode("文本內(nèi)容")：創(chuàng)建新文本節(jié)點(diǎn)

規(guī)范化文本節(jié)點(diǎn)

DOM 文檔中存在相鄰的文本節(jié)點(diǎn)很容易導(dǎo)致混亂，因?yàn)榉植磺迥膫€(gè)文本節(jié)點(diǎn)表示哪個(gè)字符串。所以在 Node 接口中定義了一個(gè) normalize() 方法，用來(lái)將當(dāng)前節(jié)點(diǎn)和它的后代節(jié)點(diǎn)規(guī)范化。在一個(gè)"規(guī)范化"后的DOM樹中，不存在一個(gè)空的文本節(jié)點(diǎn)，或者兩個(gè)相鄰的文本節(jié)點(diǎn)。

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();                      // 規(guī)范化文本節(jié)點(diǎn)
console.log(ele.childNodes.length);   // 1

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

一般不會(huì)去操作注釋節(jié)點(diǎn)！

// 注釋節(jié)點(diǎn)是 div 元素的一個(gè)子節(jié)點(diǎn)

document.createComment()：創(chuàng)建一個(gè)注釋節(jié)點(diǎn)

Selector API 是由 W3C 發(fā)起制定的一個(gè)標(biāo)準(zhǔn)，致力于讓瀏覽器原生 JavaScript 支持 CSS 查詢。

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

// selectors 是一個(gè) CSS 選擇器字符串

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

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

Doctype 是 Document Type (文檔類型)的簡(jiǎn)寫，用來(lái)說(shuō)明你用的XHTML或者HTML是什么版本。它的作用是告知瀏覽器的解析器，用什么文檔類型規(guī)范來(lái)解析這個(gè)文檔。

文檔模式用于指定IE的頁(yè)面排版引擎（Trident）以哪個(gè)版本的方式來(lái)解析并渲染網(wǎng)頁(yè)代碼

document.compatMode：檢測(cè)當(dāng)前文檔的渲染模式

若值為 BackCompat，則為混雜模式

若值為 CSS1Compat，則為標(biāo)準(zhǔn)規(guī)范模式

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

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

HTMLElement.style：返回一個(gè) CSSStyleDeclaration 對(duì)象，表示元素的內(nèi)嵌 style 屬性。

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

由于 style 屬性的優(yōu)先級(jí)和通過 style 設(shè)置元素的內(nèi)聯(lián)樣式是一樣的，并且在css層級(jí)樣式中擁有最高優(yōu)先級(jí)，因此在為特定的元素設(shè)置樣式時(shí)很有用。

// 為元素添加 2 個(gè)內(nèi)嵌的 CSS 規(guī)則
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()

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

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

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

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

// 獲取當(dāng)前文檔中樣式表的數(shù)量
document.styleSheets.length;

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

DOM2 中定義了兩個(gè)用于輔助完成順序遍歷 DOM 結(jié)構(gòu)的類型：NodeIterator 和 TreeWalker。

document.createNodeIterator()：返回一個(gè) NodeIterator 對(duì)象

document.createTreeWalker()：返回一個(gè) TreeWalker 對(duì)象

這里只簡(jiǎn)單提一下這兩個(gè)方法，因?yàn)闀簳r(shí)還沒用過，所以先不展開了，以后用了再補(bǔ)。

Range 對(duì)象 表示一個(gè)包含節(jié)點(diǎn)和部分文本節(jié)點(diǎn)的文檔片段

document.createRange()：返回一個(gè) Range 對(duì)象

這個(gè)也是簡(jiǎn)單提一下，以后用到了再補(bǔ)。

【書】《JavaScript 高級(jí)程序設(shè)計(jì)（第三版）》