文檔中所有的節(jié)點(diǎn)之間都存在這樣或那樣的關(guān)系。節(jié)點(diǎn)間的各種關(guān)系可以用傳統(tǒng)的家族關(guān)系來描述，相當(dāng)于把文檔樹比喻成家譜。在HTML中，可以將元素看成是元素的子元素;相應(yīng)地，也就可以將元素看成是元素的父元素。而元素，則可以看成是元素的同胞元素，因?yàn)樗鼈兌际峭粋€(gè)父元素的直接子元素。

每個(gè)節(jié)點(diǎn)都有一個(gè)childNodes屬性，其中保存著一個(gè)NodeLiist對(duì)象。NodeList是一種類數(shù)組對(duì)象，用于保存一組有序的節(jié)點(diǎn)，可以通過位置來訪問這些節(jié)點(diǎn)。請(qǐng)注意，雖然可以通過方括號(hào)語法來訪問NodeList的值，而且這個(gè)對(duì)象也有l(wèi)ength屬性，但它并不是Array的實(shí)例。NodeList對(duì)象的獨(dú)特之處在于，它實(shí)際上是基于DOM結(jié)構(gòu)動(dòng)態(tài)執(zhí)行查詢的結(jié)果，因此DOM結(jié)構(gòu)的變化能夠自動(dòng)反映在NodeList對(duì)象中。我們常說，NodeList是有生命、有呼吸的對(duì)象，而不是在我們第一次訪問它們的某個(gè)瞬間拍攝下來的一張快照。

下面的例子展示了如何訪問保存在NodeList中的節(jié)點(diǎn)——可以通過方括號(hào)，也可以使用item()

方法：

var firstChild=someNode.childNodes[0];

var secondChild=someNode.childNodes.item (1);

var count=someNode.childNodes.length;

無論使用方括號(hào)還是使用item()方法都沒有問題，但使用方括號(hào)語法看起來與訪問數(shù)組相似，因此頗受一些開發(fā)人員的青睞。另外，要注意length屬性表示的是訪問NodeList的那一刻，其中包含的節(jié)點(diǎn)數(shù)量。我們?cè)诒緯懊娼榻B過，對(duì)arguments對(duì)象使用Array.prototype.slice()方法;可以將其轉(zhuǎn)換為數(shù)組。而采用同樣的方法，也可以將NodeList對(duì)象轉(zhuǎn)換為數(shù)組。來看下面的例子：

//在IE中無效

var arrayofNodes=Array.prototype.slice.call( someNode.childNodes,0);

除IE之外，這行代碼能在任何瀏覽器中運(yùn)行。由于IE將NodeList實(shí)現(xiàn)為一個(gè)COM對(duì)象，而我們不能像使用JScript對(duì)象那樣使用這種對(duì)象，因此上面的代碼在IE中會(huì)導(dǎo)致錯(cuò)誤。要想在IE中將NodeList轉(zhuǎn)換為數(shù)組，必須手動(dòng)枚舉所有成員。下列代碼在所有瀏覽器中都可以運(yùn)行：

function convertToArray( nodes){

var array=null;

try{

array=Array.prototype.slice.call( nodes，0);//針對(duì)非IE瀏覽器

) catch (ex) {

array=new Array();

for (var i=0. len=nodes.length;i array.push (nodes [i]);

}

}

return array;

}

這個(gè)convertToArray()函數(shù)首先嘗試了創(chuàng)建數(shù)組的最簡(jiǎn)單方式。如果導(dǎo)致了錯(cuò)誤(說明是在IE中)，則通過try-catch塊來捕獲錯(cuò)誤，然后手動(dòng)創(chuàng)建數(shù)組。這是另一種檢測(cè)怪癖的形式。

每個(gè)節(jié)點(diǎn)都有一個(gè)parentNode屬性.該屬性指向文檔樹中的父節(jié)點(diǎn)。包含在childNodes列表中的所有節(jié)點(diǎn)都具有相同的父節(jié)點(diǎn)，因此它們的parentNode屬性都指向同一個(gè)節(jié)點(diǎn)。此外，包含在childNodes列表中的每個(gè)節(jié)點(diǎn)相互之間都是同胞節(jié)點(diǎn)。通過使用列表中每個(gè)節(jié)點(diǎn)的previousSibling和nextSibling屬性，可以訪問同一列表中的其他節(jié)點(diǎn)。列表中第一個(gè)節(jié)點(diǎn)的previousSibling屬性值為null，向列表中最后一個(gè)節(jié)點(diǎn)的nextSibling屬性的值同樣也為null，如下面的例子所示：

if ( someNode.nextSibling===null)(

alert("Last node in the parent ' s childlNodes list.");

} else if (someNode.previousSibling===null){

alert("First node in the parent' s childNodes list.");

}

當(dāng)然，南昌網(wǎng)站設(shè)計(jì)公司技術(shù)人員提示如果列表中只有一個(gè)節(jié)點(diǎn)，那么該節(jié)點(diǎn)的nextSibling和previousSibling都為null。

父節(jié)點(diǎn)與其第一個(gè)和最后一個(gè)子節(jié)點(diǎn)之間也存在特殊關(guān)系。父節(jié)點(diǎn)的firstChild和lastChild屬性分別指向其childNodes列表中的第一個(gè)和最后一個(gè)節(jié)點(diǎn)。其中，someNode.firstChild的值始終等于someNode.childNodes[O]，而someNode.lasChild的值始終等于someNode.childNodes[someNode.childNodes.length-l]。在只有一個(gè)子節(jié)點(diǎn)的情況下，firstChild和lastChild指向同一個(gè)節(jié)點(diǎn)。如果沒有子節(jié)點(diǎn)，那么firstChild和lastChild的值均為null。明確這些關(guān)系能夠?qū)ξ覀儾檎液驮L問文檔結(jié)構(gòu)中的節(jié)點(diǎn)提供極大的便利。圖10-2形象地展示了上述關(guān)系。

在反映這些關(guān)系的所有屬性當(dāng)中，childNodes屬性與其他屬性相比更方便一些，因?yàn)橹豁毷褂煤?jiǎn)單的關(guān)系指針，就可以通過它訪問文檔樹中的任何節(jié)點(diǎn)。另外，hasChildNodes()也是一個(gè)非常有

用的方法，這個(gè)方法在節(jié)點(diǎn)包含一或多個(gè)子節(jié)點(diǎn)的情況下返回true;應(yīng)該說，這是比查詢childNodes

列表的length屬性更簡(jiǎn)單的方法。

所有節(jié)點(diǎn)都有的最后一個(gè)屬性是ownerDocument，該屬性指向表示整個(gè)文檔的文檔節(jié)點(diǎn)。這種關(guān)系表示的是任何節(jié)點(diǎn)都屬于它所在的文檔，任何節(jié)點(diǎn)都不能同時(shí)存在于兩個(gè)或更多個(gè)文檔中。通過這個(gè)屬性，我們可以不必在節(jié)點(diǎn)層次中通過層層回溯到達(dá)頂端，而是可以直接訪問文檔節(jié)點(diǎn)。

雖然所有節(jié)點(diǎn)類型都繼承自Node,但并不是每種節(jié)點(diǎn)都有子節(jié)點(diǎn),我們將會(huì)討論不同節(jié)點(diǎn)類型之間的差異.

本文僅限內(nèi)部技術(shù)人員學(xué)習(xí)交流,不得作于其他商業(yè)用途.原創(chuàng)文章出自:南昌網(wǎng)站建設(shè)公司-百恒網(wǎng)絡(luò) http://m.gimmickmag.com 如轉(zhuǎn)載請(qǐng)注明出處!