快速了解JavaScript的DOM模型

概述

DOM全稱Document Object Model，即文檔對象模型。是html和XML文檔的編程接口，DOM將文檔（HTML或XML）描繪成一個多節(jié)點構(gòu)成的結(jié)構(gòu)。使用JAVAScript可以改變文檔的結(jié)構(gòu)、樣式和內(nèi)容。

W3C DOM由以下三部分組成：

核心DOM - 針對任何結(jié)構(gòu)化文檔的標準模型。
XML DOM - 針對XML文檔的標準模型。
HTML DOM - 針對HTML文檔的標準模型。

節(jié)點樹

以下面的HTML為例：

<html>
<head>
    <meta charset="UTF-8">
    <title>節(jié)點樹</title>
</head>
<body>
    <div>測試塊</div>
    <a href="/about">鏈接</a>
</body>
</html>

瀏覽器會將HTML文檔解析成節(jié)點并組成節(jié)點樹。

HTML DOM中通過不同類型節(jié)點來表示， Document是每個文檔的根節(jié)點。這里的document只有一個<html>子節(jié)點，稱之為文檔元素(Element)。Element表示元素類型的節(jié)點，Text表示文本類型的節(jié)點。

節(jié)點類型

DOM 的最小組成單位叫做節(jié)點（node）。上面的節(jié)點樹中，每一段都由不同類型的節(jié)點組成。節(jié)點的類型有如下幾種：

Node：瀏覽器提供的原生節(jié)點，下面的節(jié)點都繼承它。
Document：整個文檔樹的頂層節(jié)點
DocumentType：doctype標簽（比如<!DOCTYPE html>）。
Element：網(wǎng)頁的各種HTML標簽（比如<body>、<a>等）。
Attr：網(wǎng)頁元素的屬性（比如class="right"）。
Text：標簽之間或標簽包含的文本。
Comment：注釋。
CDATASection：CDATA區(qū)域，與Comment類型類似。
DocumentFragment：文檔的片段。

Node

DOM1中定義了一個Node接口，JavaScript中所有節(jié)點類型都繼承自Node類型，因此屬性和方法都相同。

在Node類型中定義了nodeType屬性來表明節(jié)點的類型，由12個常量表示。任何節(jié)點必居其一：

Node.ELEMENT_NODE：數(shù)值1，對應元素節(jié)點Element。
Node.ATTRIBUTE_NODE：數(shù)值2，對應屬性節(jié)點Attr。
Node.TEXT_NODE：數(shù)值3，對應文本節(jié)點Text。
Node.CDATA_SECTION_NODE：數(shù)值4，對應文檔中CDATA部（不會由解析器解析的文本）。
Node.ENTITY_REFERENCE_NODE：數(shù)值5，對應實體引用。
Node.ENTITY_NODE：數(shù)值6，對應實體類型Entity。
Node.PROCESSING_INSTRUCTION_NODE：數(shù)值7，對應處理指令。
Node.COMMENT_NODE：數(shù)值8，對應注釋節(jié)點Comment。
Node.DOCUMENT_NODE：數(shù)值9，對應文檔節(jié)點Document。
Node.DOCUMENT_TYPE_NODE：數(shù)值10，對應文檔類型節(jié)點DocumentType。
Node.DOCUMENT_FRAGMENT_NODE：數(shù)值11，對應文檔片段節(jié)點DocumentFragment。
Node.NOTATION_NODE：數(shù)值12，對應DTD中聲明的符號。

使用nodeType可以很容易確定節(jié)點類型，IE中沒有公開Node類型的構(gòu)造函數(shù)，使用Node.ELEMENT_NODE比較會導致錯誤。為了兼容IE，可以使用數(shù)值進行比較：

if (onenode.nodeType == Node.ELEMENT_NODE) {    // 在IE中無效
    console.log("The Node is an Element.");
}
// 或者
if (oneNode.nodeType == 1) {    // 適用所有瀏覽器
    console.log("The Node is an Element.");
}

nodeName返回節(jié)點的標簽名

var div = document.getElementByTagName('div')[0];
console.log(onenode.nodeName);    // DIV

nodeValue返回字符串，表示節(jié)點的文本值，可讀寫。

var div = document.getElementByTagName('div')[0];
console.log(onenode.nodeValue);    // null

節(jié)點關(guān)系

文檔中節(jié)點都存在著一定的關(guān)系，節(jié)點之間的關(guān)系可以使用類似人類家族關(guān)系的形式描述。如，在HTML文檔中，可以把<html>看作是<body>的父元素；相對的，<body>也就是<html>的子元素；而作為<body>同級的<head>兩者之間的關(guān)系為兄弟（姐妹）關(guān)系。

Node中提供了幾種節(jié)點遍歷的屬性：parentNode、childNodes、firstNode/lastNode、
previousSibling/nextSibling、ownerDocument。

Document

JavaScript通過Document類型表示文檔。瀏覽器中的document對象是HTMLDocument的一個實例，表示整個HTML頁面。Document節(jié)點具有以下特征：

nodeType為Node.DOCUMENT_NODE，值為9。
nodeName的值為#document。
nodeValue的值為null。
parentNode的值為null。
ownerDocument的值為null。
其子結(jié)點可能是一個DocumentType、Element、ProcessingInstruction或Comment。

document對象還有一些屬性來表示網(wǎng)頁的一些信息：

title：取得當前頁面的標題，也可以修改當前頁面的標題并反映在瀏覽器的標題欄中。但不會改變<title>元素。
URL：包含頁面完整的URL。
domain：只包含頁面的域名。
referrer：保存著鏈接到當前頁面的那個頁面的URL。沒有來源頁面的情況下，可能包含空字符串。

URL與domain屬性是相互關(guān)聯(lián)的。

Element

Element類型用于表現(xiàn)XML或HTML元素，提供對元素標簽名、子節(jié)點及特性的訪問。例如<body>和<div>等。Element節(jié)點具有以下特征：

nodeType為Node.ELEMENT_NODE，值為1。
nodeName的值為元素的標簽名。
nodeValue的值為null。
parentNode可能是Document或Element。
其子節(jié)點可能是Element、Text、Comment、ProcessingInstruction、CDATASection或EntityReference。

要訪問元素的標簽名，可以使用nodeName屬性，也可以使用tagName屬性；這兩個屬性會返回相同值。

獲取<div id="divId"></div>的標簽名：

var div = document.getElementById("divId");
console.log(div.tagName);    // DIV
console.log(div.tagName == div.nodeName);    // true

特性和屬性

所有HTML元素都由HTMLElement類型表示，不能直接通過這個類型，也是通過它的子類型來表示。HTMLElement類型直接繼承自Element并添加了一些屬性。每個HTML元素中的特性（例如<div id="d1" title="附加信息" lang="en" class="container">中的id、class等）會自動變成DOM對象的屬性（class特性與className屬性對應）。這些都可以通過div.id等獲取并賦值。

一個元素中的id等是標準的特性，但也有非標準的特性不能使用div.id方式獲取。那么要用什么方法來訪問非特性。

DOM主要提供了幾個方法用于對任何特性進行操作，分別是：

hasAttribute(qualifiedName: string)，檢查qualifiedName這個特性是否存在。
getAttribute(qualifiedName: string)，獲取qualifiedName這個特性值，如果不存在，則返回null。
setAttribute(qualifiedName: string, value: string)，設置qualifiedName這個特性的值為value。設置的特性名會被同意轉(zhuǎn)換為小寫形式。
removeAttribute(qualifiedName: string)，移除qualifiedName這個特性。

<div id="d1" title="附加信息" lang="en" class="container main" plug-add="添加的非標準的特性">

以上面的HTML為例，使用這幾種方法。

var div = document.getElementById('d1');
div.getAttribute('title');    // 附加信息
div.hasAttribute('plug-add'); // true
div.setAttribute('title', '修改附加信息');
div.removeAttribute('plug-add');

有兩類特殊的特性，雖有對應的屬性名，但屬性的值與getAttribute()返回的值并不相同。

第一類特性就是style，用于通過css為元素指定樣式。通過getAttribute()返回的style中包含的是CSS文本，而通過屬性返回的是一個對象。

第二類特性是onclick這樣的事件處理。如果通過getAttribute()返回的是相應代碼的字符串。而訪問onclick屬性返回的是JavaScript函數(shù)（如果未指定相應特性，返回的是null）。

attributes屬性

Element類型的attributes屬性返回該元素所有屬性節(jié)點的一個集合，該集合是一個"動態(tài)"的NamedNodeMap對象。NamedNodeMap對象擁有下列方法。

getNamedItem(name)：返回nodeName屬性等于name的節(jié)點。
removeNamedItem(name)：從列表中移除nodeName屬性等于name的節(jié)點。
setNamedItem(node)：向列表中添加節(jié)點，以節(jié)點的nodeName屬性為索引。
item(pos)：返回位于數(shù)字pos位置處的節(jié)點。

attributes屬性包含一系列節(jié)點，在節(jié)點中節(jié)點名稱-nodeName 節(jié)點值-nodeValue。

var id = element.attributes.getNamedItem('id').nodeValue;
// 方括號語法
var id = element.attributes['id'].nodeValue;
// 屬性名引用
var id = element.attributes.id;
// 如果知道特性名所在的下標，也可以使用下標引用，假設id特性名所在下標為0.
var id = element.attributes[0];

而removeNamedItem()方法與removeAttribute()方法都是將給定名稱的特性刪除，唯一區(qū)別就是removeAttribute()沒有返回值，removeNamedItem()返回被刪除特性的Attr節(jié)點。

var oldAttr = element.attributes.removeNamedItem('id');

setNamedItem()方法為Element添加一個新特性：

element.attributes.setNamedItem(newAttr);

一般情況下getAttribute()、removeAttribute()和setAttribute()方法就夠使用了，但想要遍歷元素的特性，attributes屬性倒是比較方便。下面展示如果迭代元素中每一個特性并將它們以name="value" name="value"這樣的字符串格式。

function listAttributes(element) {
    var pairs = new Array(),
        attrName,
        attrValue,
        i,
        len;
    if (element.hasAttributes()) {
        var attrs = element.attributes;
        for (i = 0, len = element.attributes.length; i < len; i++) {
            attrName = attrs[i].nodeName;
            attrValue = attrs[i].nodeValue;
            pairs.push(attrName + "="" + attrValue + """);
        }
    }
    return pairs.join(" ");
}

classList

className屬性用于操作類名，但className是一個字符串，修改后要設置整個字符串的值。

HTML5擴展了classList屬性實現(xiàn)類名的操作。該屬性返回DOMTokenList集合。定義了幾個方法：

add(value)：添加字符串到列表中。如果存在就不添加。
contains(value)：指定值是否存在于列表中，存在則為true，否則為false。
remove(value)：從列表中刪除指定值。
toggle(value)：列表中存在指定值，刪除它；沒有給定值，添加它。

Attr

Attr類型在DOM表示元素特性。特性是位于元素attributes屬性中的節(jié)點。具有下列特征：

nodeType為Node.TEXT_NODE，值為3。
nodeName的值是特性的名稱。
nodeValue的值是特性的名稱。
parentNode的值為null。
在HTML中不支持子節(jié)點（沒有子節(jié)點）。
在XML中子節(jié)點可以是Text或EntityReference。

特性節(jié)點不被認為是DOM文檔樹的一部分。最常使用getAttrubute()、setAttribute()和removeAttribute()方法，很少直接引用特性節(jié)點。

Attr對象有3個屬性：

name，特性名稱，與nodeName的值相同。
value，特性值，與nodeValue的值相同。
specified，布爾值，用于區(qū)分特性在代碼中是指定的還是默認的。

如果要為元素添加特性，可以使用document.createAttribute(localName)方法，創(chuàng)建名為localName的特性節(jié)點。例如，要為元素添加align特性，可以使用下列代碼：

var attr = document.createAttribute("align");
attr.value = "left";
element.setAttributeNode(attr);
alert(element.attributes["align"].value); //"left"
alert(element.getAttributeNode("align").value); //"left"
alert(element.getAttribute("align")); //"left"

Text

文本節(jié)點由Text類型表示，包含的是可以照字面解釋的純文本內(nèi)容。純文本中可以包含轉(zhuǎn)義后的HTML字符，但不能包含HTML代碼。Text節(jié)點具有以下特征：

nodeType為Node.TEXT_NODE，值為3。
nodeName的值為#text。
nodeValue的值為節(jié)點所包含的文本。
parentNode是一個Element。
不支持子節(jié)點（沒有子節(jié)點）。

可以通過nodeValue屬性或data屬性訪問Text節(jié)點中包含的文本，這兩個屬性中包含的值相同。對nodeValue的修改也會通過data反映出來，反之亦然。使用下列方法可以操作節(jié)點中的文本。

AppendData(text)：將text添加到節(jié)點的末尾。
deleteData(offset, count)：從offset指定位置開始刪除count個字符。
insertData(offset, text)：在offset指定位置插入text。
replaceData(offset, count, text)：用text替換從offset指定的位置開始到offset+count位置處的文本。
splitText(offset)：從offset指定的位置將當前文本節(jié)點分成兩個文本節(jié)點。
substringData(offset, count)：提取從offset指定的位置開始到offset+count為止處的字符串。

除了這些方法外，文本節(jié)點還有一個length屬性，保存著節(jié)點中字符的數(shù)目。而且，nodeValue.length和data.length中也保存著同樣的值。

修改文本節(jié)點的結(jié)果會立即得到反映。因此字符串會經(jīng)過HTML（或XML，取決于文檔類型）編碼。

使用document.createTextNode()可以創(chuàng)建文本節(jié)點，在DOM創(chuàng)建中會講述它。

Comment

注釋在DOM中是通過Comment類型來表示的。Comment節(jié)點具有下列特征：

nodeType為Node.COMMENT_NODE，數(shù)值為8。
nodeName的值為#comment。
nodeValue的值是注釋的內(nèi)容。
parentNode可能是Document或Element。
不支持子節(jié)點（沒有子節(jié)點）。

Comment類型與Text類型繼承自相同的基類，因此它擁有除splitText()之外的所有字符串操作方法。與Text類型相似，也可以通過nodeValue或data屬性取得注釋的內(nèi)容。

獲取<div id="divId"></div>代碼中的注釋：

var div = document.getElementById("divId");
var comment = div.firstChild;
console.log(comment.data);    // A comment

如果想創(chuàng)建注釋節(jié)點，可以使用document.createComment(data)方法創(chuàng)建。

var comment = document.createComment("Create a comment node");

瀏覽器不會識別位于</html>標簽后面的注釋。一定保證訪問的注釋節(jié)點位于<html></html>之間。

CDATASection

CDATASection類型只針對基于XML文檔，表示的是CDATA區(qū)域。與Comment類似，CDATASection類型繼承自Text類型，因此擁有除splitText()之外的所有字符串操作方法。CDATASection節(jié)點具有以下特征：

nodeType為CDATA_SECTION_NODE，值為4。
nodeName的值為#cdata-section。
nodeValue的值是CDATA區(qū)域中的內(nèi)容。
parentNode可能是Document或Element。
不支持子節(jié)點（沒有子節(jié)點）。

CDATA區(qū)域只會出現(xiàn)在XML文檔中，因此多數(shù)瀏覽器都會把CDATA區(qū)域錯誤地解析為Comment或Element。以下面的代碼為例：

<div id="divId"><![CDATA[This is content.]]></div>

這個例子中的<div>元素應該包含一個CDATASection節(jié)點。可是，四大主流瀏覽器無一能夠這樣解析它。即使對于有效的XHTML頁面，瀏覽器也沒有正確地支持嵌入的CDATA區(qū)域。

在真正的XML文檔中，可以使用
document.createCDataSection()來創(chuàng)建CDATA區(qū)域，只需為其傳入節(jié)點的內(nèi)容即可。

DocumentType

DocumentType類型在Web瀏覽器中并不常用。DocumentType包含著與文檔有關(guān)的doctype有關(guān)的所有信息，它具有下列特征：

nodeType為Node.DOCUMENT_TYPE_NODE，值為10。
nodeName的值為doctype的名稱。
nodeValue的值為null。
parentNode是Document類型。
沒有子節(jié)點。

DOM 1級規(guī)定的DocumentType對象不能動態(tài)創(chuàng)建，只通過解析文檔代碼的方式來創(chuàng)建。支持DocumentType的瀏覽器會把它保存在document.doctype中。

DocumentType對象在DOM 1級中有3個屬性：

DocumentType.name，文檔類型的名稱。
DocumentType.entities，文檔類型描述的實體NamedNodeMap對象。
DocumentType.notations，文檔類型描述的符號NamedNodeMap對象。

瀏覽器中一般是HTML或XHTML類型的文檔。所以entities和notations都是空列表。只有name屬性有用。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

在這里，DocumentType中的name屬性保存的就是HTML。

console.log(document.doctype.name);    // HTML

DocumentFragment

DocumentFragment是文檔片段，一種"輕量級"文檔，可以包含和控制節(jié)點，但不像完整文檔那樣占用額外資源。可以將它作為"倉庫"使用。具有下列特征：

nodeType為Node.DOCUMENT_FRAGMENT_NODE，值為11。
nodeName的值為#document-fragment。
nodeValue的值為null。
parentNode的值為null。
子節(jié)點可以是Element、ProcessingInstruction、Comment、Text、CDATASection或EntityReference。

使用
document.createDocumentFragment()方法創(chuàng)建文檔片段，如下所示：

var fragment = document.createDocumentFragment();

繼承了Node的所有方法，用于執(zhí)行針對文檔的DOM操作。可以通過appendChild()或insertBefore()添加到文檔中相應位置，但本身不會成為文檔樹的一部分。來看下面的HTML 示例代碼：

<ul id="ulId"></ul>

我們給<ul id=ulId></ul>添加3個列表項。可以使用文檔片段來保存創(chuàng)建的列表項，一次性將它們添加到文檔中，避免瀏覽器反復渲染。

var fragment = document.createDocumentFragment();
var ul = document.getElementById("myList");
var li = null;
for (var i=0; i < 3; i++){
    li = document.createElement("li");
    li.appendChild(document.createTextNode("Item" + (i+1)));
    fragment.appendChild(li);
}
ul.appendChild(fragment);

DOM查找

現(xiàn)在有一段html頁面模板

...
<style>
    .container {
        background-color: blue;
        width: 55%;
        height: 55%;
    }
</style>
...

<div class="container" id="divId1">Div Text One</div>
<p class="container" id="pId1">P Text One</p>
<a class="container" id="aId1">A Text One</a>
<div class="container" id="divId2">Div Text Two</div>
<form id="primary-form" action="#" method="get">
    <p>UserName: <input type="text" name="input-name"></p>
    <p class="container">NickName: <input type="text" name="input-name"></p>
    <p>Email: <input type="text" name="input-email"></p>
    <input type="submit" value="Submit">
</form>
...

在該模板中，我們想要獲取這些標簽元素，可以使用document對象獲取的幾種方法：

id選擇器

getElementById(elementId: string): HTMLElement | null;

該方法返回匹配指定id屬性的元素節(jié)點，如果不存在，則返回null。

下面通過id選擇器來獲取id為aId1的元素：

let div = document.getElementById("aId1");
console.log(div);    // <a class="container" id="aId1">A Text One</a>

注意：嚴格匹配，包括大小寫。如果寫成document.getElementById("aid1")，輸出為null。

標簽選擇器

getElementsByTagName(qualifiedName: string): HTMLCollectionOf<Element>;

該方法返回匹配指定HTML標簽名的元素列表。返回的是一個類似數(shù)組對象（HTMLCollection實例），可以實時反映HTML文檔的變化，如果不存在，則返回null。

let inputs = document.getElementsByTagName('input');
console.log(inputs);    /* HTMLCollection(4) [input, input, input, input, input-name: input, email: input]*/

這個對象可以使用length屬性獲取元素數(shù)量，使用數(shù)組語法或item()方法來訪問HTMLCollection對象中的項。

inputs.length;                // 輸出p標簽的數(shù)量
inputs[0].id;                  // 輸出p標簽集合中第一個元素的id特性的名稱
inputs.item(0).className;      // 輸出p標簽接種中第一個元素的class特性的名稱

還可以通過namedItem()方法根據(jù)元素的name特性獲取集合中的項。

var nameOfInput = inputs.namedItem("input-name");

也可以使用方括號語法來訪問：

var nameOfInput = inputs["input-name"];

要想取得文檔中的所有元素，可以向getElementsByTagName()中傳入"*"，表示"全部"。

var allElements = document.getElementsByTagName("*");

name選擇器

getElementsByName(elementName: string): NodeListOf<HTMLElement>;

該方法返回匹配name屬性的所有元素，返回值是NodeList，如果不存在，則返回null。

var names = document.getElementsByName("input-name");
console.log(names);

注意，這個選擇器在不同瀏覽器的效果是不同的，比如在IE和Opera瀏覽器下，這個方法也會返回id屬性為這個值的元素。在使用的時候，應該小心使用，盡量保證name不和其它元素的id一致。

類選擇器

getElementsByClassName(classNames: string): HTMLCollectionOf<Element>;是HTML5中添加的方法。

該方法返回匹配class屬性的所有元素，返回值是HTMLCollection，如果不存在，則返回null。

// 獲取所有class中同時包含'red'和'test'的元素
var classes = document.getElementsByClassName("container");
console.log(classes);

可以接收包含一個或多個類名的字符串，傳入的多個類名的先后順序不重要。

Selectors API

W3C發(fā)起指定的標準，可使瀏覽器支持CSS查詢。Selectors API的核心是兩個方法：querySelector()和querySelectorAll()。兼容的瀏覽器中通過Document及Element節(jié)點類型的實例進行調(diào)用。

querySelector()方法

querySelector<E extends Element = Element>(selectors: string): E | null;

該方法返回匹配指定選擇符的第一個HTMLElement元素，如果不存在，則返回null。傳入的selectors必須是有效的CSS選擇器；如果選擇器不合法，會引發(fā)SYNTAX_ERR異常。

document.querySelector("#aId1");    // 取得Id為"aId1"的元素
document.querySelector("p");    // 取得p元素
document.querySelector(".container");    // 取得類為"container"的第一個元素
document.querySelector("..selector");    // 引發(fā)'SYNTAX_ERR'異常(Uncaught DOMException:Failed to execute 'querySelector on 'Document': '..selector' is not a valid selector. 意思是'..selector'不是一個有效的選擇。)

Document和Element都可以調(diào)用querySelector()方法，只是Document會在文檔元素的范圍內(nèi)查找匹配的元素；Element只會在該元素后代元素的范圍內(nèi)查找匹配的元素。

querySelectorAll()方法

querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>;

該方法返回匹配指定選擇符的元素列表，返回的對象是NodeList，如果不存在，則返回空的NodeList。傳入的selectors必須是有效的CSS選擇器；如果選擇器不合法，會引發(fā)SYNTAX_ERR異常。

// 獲取id為"primary-form"中所有<p>元素
document.getElementById("primary-form").querySelectorAll("p");
// 獲取類為"container"的所有元素
document.querySelectorAll(".container");
// 獲取所有<form>元素中的所有<p>元素
document.querySelectorAll("form p");

matches()方法

Selectors API Level 2規(guī)范為Element類型新增了一個方法：

matches(selectors: string): boolean;

該方法判斷當前DOM節(jié)點是否能完全匹配指定選擇符，如果匹配成功，返回true；匹配失敗，返回false。

var elems = document.getElementsByTagName('p');
for (var i = 0; i < elems.length; i++) {
    // 獲取匹配'container'類選擇符的dom節(jié)點 
    if (elems.item(i).matches('.container')) {
        console.log('The ' + elems.item(i).textContent + ' is container');
    }
}
/*The P Text One is container
The NickName:  is container*/

注意，有些供應商會有自己實驗性方法在matchesSelector()方法之前加些前綴。如果想使用這種方法，可以編寫一個包裝函數(shù)。

function matchesSelector(element, selector){
    if (element.matches) {
        // 標準方法
        return element.matches(selector);
    } else if (element.matchesSelector){
        return element.matchesSelector(selector);
    } else if (element.msMatchesSelector){      // IE 9+支持
        return element.msMatchesSelector(selector);
    } else if (element.mozMatchesSelector){     // Firefox 3.6+支持 
        return element.mozMatchesSelector(selector);
    } else if (element.webkitMatchesSelector){  // Safari 5+和Chrome支持
        return element.webkitMatchesSelector(selector);
    } else {
        throw new Error("Not supported.");
    }
}
if (matchesSelector(document.body, ".container")){
    //執(zhí)行操作
}

當有的瀏覽器不支持Element.matches()或Element.matchesSelector()，但支持document.querySelectorAll()方法，可以有替代方案：

if (!Element.prototype.matches) {
    Element.prototype.matches = 
        Element.prototype.matchesSelector || 
        Element.prototype.mozMatchesSelector ||
        Element.prototype.msMatchesSelector || 
        Element.prototype.oMatchesSelector || 
        Element.prototype.webkitMatchesSelector ||
        function(s) {
            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
                i = matches.length;
            while (--i >= 0 && matches.item(i) !== this) {}
            return i > -1;            
        };
}

DOM遍歷

Node節(jié)點提供了幾種屬性，用于訪問DOM節(jié)點。

parentNode

node.parentNode屬性用于返回指定節(jié)點的父節(jié)點。除document外，所有節(jié)點都有父節(jié)點，document對象的父節(jié)點為null。示例如下：

document.getElementById('divId2').parentNode;

childNodes

node.childNodes屬性用于返回指定節(jié)點的子結(jié)點的Node對象集合。示例如下：

document.getElementById('primary-form').childNodes;

firstChild/lastChild

node.firstChild屬性用于訪問第一個子節(jié)點；node.lastChild屬性用于訪問最后一個子節(jié)點。如果要訪問的節(jié)點不存在，則返回null。示例如下：

document.getElementById('primary-form').firstChild
document.getElementById('primary-form').lastChild;

previousSibling/nextSibling

node.previousSibling屬性用于訪問之前的同級節(jié)點；node.nextSibling屬性用于訪問之后的同級節(jié)點。具有相同父節(jié)點為同級節(jié)點，之前或之后表示它們在文檔中出現(xiàn)的順序。實例如下：

document.getElementById('divId2').previousSibling;
document.getElementById('divId2').nextSibling;

ownerDocument

node.ownerDocument屬性用于返回元素的根節(jié)點，即：文檔對象（Document）。通過這個屬性，我們能夠直接訪問根節(jié)點而不必層層遍歷。實例如下：

document.getElementById('divId2').ownerDocument;

Element Traversal

Element Traversal API 為DOM元素添加了以下5個屬性。

childElementCount：返回子元素（不包括文本節(jié)點和注釋）的格式。
firstElementChild：指向第一個子元素；firstChild的元素版。
lastElementChild：指向最后一個子元素；lastChild的元素版。
previousElementSibling：指向前一個同輩元素；previousSibling的元素版。
nextElementSibling：指向后一個同輩元素；nextSibling的元素版。

支持的瀏覽器為DOM元素添加了這些屬性，利用這些元素不必擔心空白文檔節(jié)點，從而可以更方便地查找DOM元素。

DOM操作

因為關(guān)系節(jié)點都是只讀的，所以DOM提供了一些操作節(jié)點的方法。

appendChild()

node.appendChild(newChild)方法用于向childNodes列表的末尾添加一個節(jié)點并返回新增的節(jié)點。

var returnedNode = div.appendChild(newNode);

insertBefore()

node.insertBefore(newChild, refChild)方法會在指定的參照節(jié)點refChild之前插入新節(jié)點newChild。插入節(jié)點后，被插入的節(jié)點會變成參照節(jié)點的前一個同胞節(jié)點（previousSibling），同時被方法返回。如果refChild是null，則insertBefore()與appendChild()執(zhí)行相同的操作。

var returnedNode = div.insertBefore(newNode, div.lastChild);

replaceChild()

node.replaceChild(newChild, oldChild)方法將要替換的節(jié)點oldChild移除，并將要插入的節(jié)點newChild插入并占據(jù)其位置。實例如下：

document.getElementById('divId2').replaceChild(newnode, oldnode);

在使用replaceChild()插入一個節(jié)點時，該節(jié)點的所有關(guān)系指針都會從被它替換的節(jié)點復制過來。被替換的節(jié)點仍然還在文檔中，但它在文檔中已經(jīng)沒有自己的位置了。

removeChild()

而如果只想移除而非替換節(jié)點，可以使用node.removeChild(oldChild)方法，該方法將要移除的節(jié)點oldChild移除，并返回移除的節(jié)點。

var removedNode = node.removeChild(node.firstChild);

與使用replaceChild()方法一樣，通過removeChild()移除的節(jié)點仍然為文檔所有，只不過在文檔中已經(jīng)沒有了自己的位置。

上面介紹的四種方法操作的都是某個節(jié)點的子節(jié)點，要使用這幾個方法必須先取得父節(jié)點。另外，并不是所有類型的節(jié)點都有子節(jié)點，如果在不支持子節(jié)點的節(jié)點上調(diào)用這些方法，將會導致錯誤發(fā)生。

DOM創(chuàng)建

DOM節(jié)點創(chuàng)建最常用的便是document.createElement()和document.createTextNode()方法。

createElement()

document.createElement(tagName)方法根據(jù)指定tagName標簽名創(chuàng)建新元素節(jié)點，返回一個HTMLElement對象。標簽名在HTML文檔中不區(qū)分大小寫，在XML（包括XHTML）文檔中區(qū)分大小寫。例如，創(chuàng)建一個<p>元素。

var p = document.createElement('p');

在使用createElement()方法創(chuàng)建新元素的同時，也為新元素設置了ownerDocument屬性。

createTextNode()

document.createTextNode(data: string)方法根據(jù)指定data文本創(chuàng)建新文本節(jié)點。作為參數(shù)的文本按照HTML或XML的格式進行編碼。

var textNode = document.createTextNode("<h4>Hello </h4> world!");

在創(chuàng)建新文本節(jié)點的同時，也會為其設置ownerDocument屬性。

cloneNode()

node.cloneNode(deep)方法用于對調(diào)用這個方法的節(jié)點創(chuàng)建一個完全相同的副本。deep是布爾值，設置是否執(zhí)行深復制。默認為false，執(zhí)行淺復制（只復制節(jié)點本身）；當為true時，執(zhí)行深復制（復制節(jié)點及其整個子節(jié)點樹）。

var node = document.getElementById('divId2').lastChild.cloneNode(true);

這些用于創(chuàng)建節(jié)點和復制節(jié)點的方法，創(chuàng)建或復制的節(jié)點并不會出現(xiàn)在文檔中，需要通過appendChild()、insertBefore()或replaceChild()將它添加到文檔中。

document.getElementById('divId2').appendChild(node);

不管是createElement()、createTextNode()或者cloneNode()三種的哪種方法，創(chuàng)建新的節(jié)點都未被添加到文檔樹中。可以使用上面介紹的appendChild()、insertBefore()或replaceChild()方法將新節(jié)點添加到文檔樹中。

一旦將節(jié)點添加到文檔樹中，瀏覽器就會立即呈現(xiàn)。

一旦使用appendChild()等方法插入相鄰的同胞文本節(jié)點時，會導致相鄰文本節(jié)點混亂。

而在一個包含兩個或多個文本節(jié)點的父元素上調(diào)用normalize()方法，就會將所有文本節(jié)點合并成一個節(jié)點。

var element = document.createElement("div");
element.className = "message";
var textNode1 = document.createTextNode("Hello, ");
element.appendChild(textNode1);
var textNode2 = document.createTextNode("Pandora!");
element.appendChild(textNode2);
document.body.appendChild(element);
console.log(element.childNodes.length);  // 2
element.normalize();
console.log(element.childNodes.length);  // 1
console.log(element.firstChild.nodeValue);  // "Hello, Pandora!"

瀏覽器在解析文檔時永遠不會創(chuàng)建相鄰的文本節(jié)點。這種情況只會作為執(zhí)行DOM操作的結(jié)果出現(xiàn)。

還有一個與normalize()相反的方法splitText(offset)：將一個文本節(jié)點分成兩個文本節(jié)點。

var element = document.createElement("div");
element.className = "message";
var textNode = document.createTextNode("Hello, Pandora!");
element.appendChild(textNode);
document.body.appendChild(element);
var newNode = element.firstChild.splitText(6);
console.log(element.firstChild.nodeValue);  // "Hello,"
console.log(newNode.nodeValue);  // " Pandora!"
console.log(element.childNodes.length);  // 2

亚洲视频二区_亚洲欧洲日本天天堂在线观看_日韩一区二区在线观看_中文字幕不卡一区