快速了解JavaScript的DOM模型

概述

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

W3C DOM由以下三部分組成：

核心DOM - 針對任何結構化文檔的標準模型。
XML DOM - 針對XML文檔的標準模型。
HTML DOM - 針對HTML文檔的標準模型。

節點樹

以下面的HTML為例：

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

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

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

節點類型

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

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

Node

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

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

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

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

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返回節點的標簽名

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

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

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

節點關系

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

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

Document

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

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

document對象還有一些屬性來表示網頁的一些信息：

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

URL與domain屬性是相互關聯的。

Element

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

nodeType為Node.ELEMENT_NODE，值為1。
nodeName的值為元素的標簽名。
nodeValue的值為null。
parentNode可能是Document或Element。
其子節點可能是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。設置的特性名會被同意轉換為小寫形式。
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函數（如果未指定相應特性，返回的是null）。

attributes屬性

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

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

attributes屬性包含一系列節點，在節點中節點名稱-nodeName 節點值-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()方法都是將給定名稱的特性刪除，唯一區別就是removeAttribute()沒有返回值，removeNamedItem()返回被刪除特性的Attr節點。

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屬性實現類名的操作。該屬性返回DOMTokenList集合。定義了幾個方法：

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

Attr

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

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

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

Attr對象有3個屬性：

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

如果要為元素添加特性，可以使用document.createAttribute(localName)方法，創建名為localName的特性節點。例如，要為元素添加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

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

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

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

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

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

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

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

Comment

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

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

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

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

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

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

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

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

CDATASection

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

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

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

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

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

在真正的XML文檔中，可以使用
document.createCDataSection()來創建CDATA區域，只需為其傳入節點的內容即可。

DocumentType

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

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

DOM 1級規定的DocumentType對象不能動態創建，只通過解析文檔代碼的方式來創建。支持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是文檔片段，一種"輕量級"文檔，可以包含和控制節點，但不像完整文檔那樣占用額外資源。可以將它作為"倉庫"使用。具有下列特征：

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

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

var fragment = document.createDocumentFragment();

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

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

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

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查找

現在有一段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屬性的元素節點，如果不存在，則返回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標簽名的元素列表。返回的是一個類似數組對象（HTMLCollection實例），可以實時反映HTML文檔的變化，如果不存在，則返回null。

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

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

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

還可以通過namedItem()方法根據元素的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發起指定的標準，可使瀏覽器支持CSS查詢。Selectors API的核心是兩個方法：querySelector()和querySelectorAll()。兼容的瀏覽器中通過Document及Element節點類型的實例進行調用。

querySelector()方法

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

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

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

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

querySelectorAll()方法

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

該方法返回匹配指定選擇符的元素列表，返回的對象是NodeList，如果不存在，則返回空的NodeList。傳入的selectors必須是有效的CSS選擇器；如果選擇器不合法，會引發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規范為Element類型新增了一個方法：

matches(selectors: string): boolean;

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

var elems = document.getElementsByTagName('p');
for (var i = 0; i < elems.length; i++) {
    // 獲取匹配'container'類選擇符的dom節點 
    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()方法之前加些前綴。如果想使用這種方法，可以編寫一個包裝函數。

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")){
    //執行操作
}

當有的瀏覽器不支持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節點提供了幾種屬性，用于訪問DOM節點。

parentNode

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

document.getElementById('divId2').parentNode;

childNodes

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

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

firstChild/lastChild

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

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

previousSibling/nextSibling

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

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

ownerDocument

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

document.getElementById('divId2').ownerDocument;

Element Traversal

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

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

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

DOM操作

因為關系節點都是只讀的，所以DOM提供了一些操作節點的方法。

appendChild()

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

var returnedNode = div.appendChild(newNode);

insertBefore()

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

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

replaceChild()

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

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

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

removeChild()

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

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

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

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

DOM創建

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

createElement()

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

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

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

createTextNode()

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

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

在創建新文本節點的同時，也會為其設置ownerDocument屬性。

cloneNode()

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

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

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

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

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

一旦將節點添加到文檔樹中，瀏覽器就會立即呈現。

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

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

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!"

瀏覽器在解析文檔時永遠不會創建相鄰的文本節點。這種情況只會作為執行DOM操作的結果出現。

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

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

日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡