JavaScript學(xué)習(xí)筆記——高級(jí)DOM技術(shù)

說(shuō)明：本文為《JavaScript高級(jí)程序設(shè)計(jì)》第10章學(xué)習(xí)筆記。

可以應(yīng)用不同方式來(lái)處理文檔底層的DOM樹，首先，可利用現(xiàn)行瀏覽器中的非標(biāo)準(zhǔn)的屬性和方法，以及鮮為人知且有待進(jìn)一步利用的DOM的標(biāo)準(zhǔn)接口。

一．樣式編程

IE4.0為每一個(gè)頁(yè)面上的元素都引入了一個(gè)style對(duì)象來(lái)管理元素的CSS樣式。DOM最后也采用這個(gè)方式，并將其作為訪問(wèn)元素的樣式信息的標(biāo)準(zhǔn)手段。

下面的表格列出了一些常用的CSS特性及它們對(duì)應(yīng)的JavaScript中的style對(duì)象的表示：

CSS樣式特性	JavaScript樣式屬性
background-color	style.backgroundColor
color	style.color
font	style.font
font-family	style.fontFamily
font-weight	style.fontWeight

要用JavaScript來(lái)更改樣式的值，只需將CSS的字符串分配給它們的樣式對(duì)象的特性就行，eg. var oDiv = document.getElementById(“div1”);

oDiv.style.border = “1px solid black”;

也可以使用style對(duì)象來(lái)獲取任何內(nèi)聯(lián)樣式（直接通過(guò)HTML的style特性來(lái)分配的樣式）的值。Eg. 有如下的div：

獲取該div的style中的background-color的代碼如下：

var oDiv = document.getElementById(“div1”);

alert(oDiv.style.backgroundColor);

同樣的技巧也可應(yīng)用于用戶將鼠標(biāo)移動(dòng)到頁(yè)面上指定元素的翻轉(zhuǎn)效果，eg.

<div id=”div1”

style=”background-color: red; height: 50px; width: 50px”

onmouseover=”this.style.backgroundColor=’blue’”

onmouseout=”this.style.backgroundColor=’red’”/>

1. DOM樣式的方法

DOM描述了一些樣式對(duì)的方法，以達(dá)到與單獨(dú)的CSS樣式的定義部分進(jìn)行交互的目的：

getPropertyValue(propertyName)——返回CSS特性propertyName的字符串值；

getPropertyPriority()——如果在規(guī)則中指定CSS特性“important”，則返回“important”，否則返回空字符串；

item(index)——返回在給定索引index處的CSS特性的名稱；

removeProperty(propertyName)——從CSS定義中刪除propertyName；

setProperty(propertyName, value, priority)——按照指定的優(yōu)先級(jí)來(lái)設(shè)置CSS特性propertyName的value值。

讓我們來(lái)看一個(gè)例子，若div如下：

讓我們來(lái)測(cè)試下前面的某幾個(gè)方法，js代碼如下：

var oDiv = document.getElementById(“div1”);

alert(oDiv.style.item(0)); //outputs “background-color”

alert(oDiv.style.getPropertyValue(“background-color”));

oDiv.removeProperty(“background-color”);

我們可用style方法重寫上面提到過(guò)的翻轉(zhuǎn)方法：

<div id=”div1”

style=”background-color: red; height: 50px; width: 50px”

onmouseover=”this.style.setProperty(‘background-color’, ‘blue’, ‘’)”

onmouseout=” this.style.setProperty(‘background-color’, ‘red, ‘’)”/>

2. 自定義鼠標(biāo)提示

鼠標(biāo)提示：就是把鼠標(biāo)移動(dòng)到圖片按鈕上時(shí)，出現(xiàn)的幫助性黃色方框。

Eg. <a href=”http://www.bogjava.net/amigoxie” title=”阿蜜果的blog”>阿蜜果</a>

上述例子是只有文本的鼠標(biāo)提示，我們還可以自定義鼠標(biāo)提示，例如當(dāng)鼠標(biāo)移動(dòng)到指定目標(biāo)上時(shí)，顯示隱藏的<div>，實(shí)例代碼如下：

<html>

<head>

<title>Style例子</title>

function showTip(oEvent) {

var oDiv = document.getElementById("divTip1");

oDiv.style.visibility = "visible";

oDiv.style.left = oEvent.clientX + 5;

oDiv.style.top = oEvent.clientY + 5;

}

function hideTip(oEvent) {

var oDiv = document.getElementById("divTip1");

oDiv.style.visibility = "hidden";

}

</script>

</head>

<body>

<p>將鼠標(biāo)移動(dòng)到紅色方框中</p>

<div id="div1"

style="background-color: red; height: 50px; width:50px"

onmouseover="showTip(event) " onmouseout="hideTip(event) "></div>

<div id="divTip1"

style="background-color: yellow; position: absolute; visibility: hidden; padding: 5px">

<span style="font-weight: bold">自定義鼠標(biāo)提示</span>

</div>

</body>

</html>

3. 可折疊區(qū)域

可折疊區(qū)域的基本思想：可通過(guò)點(diǎn)擊某個(gè)地方來(lái)顯示或隱藏屏幕中的某個(gè)區(qū)域。讓我們來(lái)看一個(gè)相關(guān)的例子：

<html>

<head>

function toggle(sDivId) {

var oDiv = document.getElementById(sDivId);

oDiv.style.display = (oDiv.style.display == "none") ? "block" : "none";

}

</script>

</head>

<body>

<div style="background-color: blue; color: white; font-weight: bold; padding: 10px; cursor: pointer" onclick="toggle('divContent1')">控制內(nèi)容

1的顯示和隱藏</div>

<div style="background-color: blue; color: white; font-weight: bold; padding: 10px; cursor: pointer" onclick="toggle('divContent2')">控制內(nèi)容

2的顯示和隱藏</div>

</body>

</html>

本例中的兩個(gè)可折疊區(qū)域分別用來(lái)顯示和隱藏例子中id為divContent1和divContent2的兩個(gè)div。

4．訪問(wèn)樣式表

使用style對(duì)象可以方便地獲取某個(gè)有style特性的元素的CSS樣式。但它無(wú)法表示由CSS規(guī)則或在style特性外部定義的類定義的元素的CSS樣式。例如下述例子中警告框?qū)⒋虿怀霰尘吧强兆址?/span>

<html>

<head>

<title>樣式的例子</title>

div.special {

background-color: red;

height: 10px;

width: 10px;

margin: 10px;

}

</style>

function getBackgroundColor() {

var oDiv = document.getElementById("div1");

alert(oDiv.style.backgroundColor);

}

</script>

</head>

<body>

</body>

</html>

原因在于上述例子的CSS數(shù)據(jù)并非存儲(chǔ)在style屬性中，而是存儲(chǔ)在類中，此種情況下可用如下方式引用：

用document.styleSheets集合來(lái)獲取定義類的樣式表的引用。只需修改getBackgroundColor()內(nèi)容修改成如下內(nèi)容：

var oCSSRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;

alert(oCSSRules[0].style.backgroundColor);

如果3個(gè)元素都引用了special樣式，當(dāng)在運(yùn)行過(guò)程中只想修改其中一個(gè)的背景色時(shí)，不可用如下方法：

function changeBackgroundColor() {

var oCSSRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;

oCSSRules[0].style.backgroundColor = “blue”;

}

此種方法將導(dǎo)致三者的div的背景色都被改變，可修改該方法的內(nèi)容如下：

var oDiv = document.getElementById(“div1”);

oDiv.style.backgroundColor = “blue”;

5． 最終樣式

最終樣式由所有從內(nèi)聯(lián)樣式和CSS規(guī)則計(jì)算得來(lái)的樣式信息組成。用來(lái)告訴我們?cè)刈詈笫侨绾物@示在屏幕上的。

1） IE中的最終樣式

微軟為每個(gè)元素提供一個(gè)currentStyle對(duì)象，它包含了所有元素的style對(duì)象的特性和任何未被覆蓋的CSS規(guī)則的style特性。下面來(lái)看一個(gè)例子：

將訪問(wèn)樣式表中的alert(oDiv.style.backgroundColor);

修改為：alert(oDiv.currentStyle.backgroundColor);

2） DOM中的最終樣式

DOM提供一個(gè)getComputedStyle()方法，它根據(jù)給定的元素創(chuàng)建類似style的對(duì)象。只有某些瀏覽器支持該功能，不推薦使用。

二．innerText和innerHTML

innerText：用來(lái)修改起始標(biāo)簽和結(jié)束標(biāo)簽的文本。Eg. oDiv.innerText = “內(nèi)容”;

應(yīng)用innerHTML特性，可以直接給元素分配HTML字符串，而不需要考慮使用DOM方法來(lái)創(chuàng)建元素。Eg.

oDiv.innerHTML = “<strong>Hello,阿蜜果</strong><em>阿蜜果</em>”;

還可以用innerText和innerHTML來(lái)獲取元素的內(nèi)容。如果innerText和innerHTML返回相同的值。但是，如果同時(shí)包含文本和其他元素，innerText將只返回文本的表示，而innerHTML將返回所有元素和文本的HTML代碼。

通過(guò)將innerText復(fù)制給它自身，表示從指定的元素中刪除所有的HTML標(biāo)簽。Eg.

oDiv.innerText = oDiv.innerText;

雖然innerText和innerHTML并非DOM標(biāo)準(zhǔn)的一部分，但事實(shí)上現(xiàn)在大部分的瀏覽器，包括IE、Opera和Safari，都支持innerText和innerHTML，而Mozilla，僅支持innerHTML。

三． outerText和outerHTML

在IE4.0引入，它們與innerText和innerHTML類似，只不過(guò)它們替換的是整個(gè)目標(biāo)節(jié)點(diǎn)。

四．范圍

范圍可以用來(lái)選擇文檔的某個(gè)部分，而不管節(jié)點(diǎn)的邊界。

1． DOM中的范圍

DOM Level2定義了方法createRange()來(lái)創(chuàng)建范圍。在DOM兼容的瀏覽器中的，這個(gè)發(fā)方法屬于document對(duì)象，所以可以這樣創(chuàng)建一個(gè)范圍：

var oRange = document.createRange();

要判斷文檔是否支持DOM風(fēng)格的DOM風(fēng)格的范圍，可以使用hasFeature()方法：

var supportDOMRanges = document.implementation.hasFeature(“Range”, “2.0”);

1） DOM范圍中的簡(jiǎn)單選區(qū)

選擇使用范圍的文檔的某部分的最簡(jiǎn)單的方法是用selectNode()或selectNodeContents()。這些方法只接受一個(gè)參數(shù)（DOM節(jié)點(diǎn)），然后它們用節(jié)點(diǎn)中的信息來(lái)填充范圍。

其中，selectNode()方法將選擇整個(gè)節(jié)點(diǎn)，包括它的子節(jié)點(diǎn)，而selectNodeContents()則選擇節(jié)點(diǎn)所有的子節(jié)點(diǎn)。

創(chuàng)建范圍時(shí)，會(huì)分配給它一些特性：

startContainer——范圍是從哪個(gè)節(jié)點(diǎn)中開始的；

startOffset——在startContainer中范圍開始的偏移位置；

endContainer——范圍是從哪個(gè)節(jié)點(diǎn)結(jié)束的；

endOffset——在endContainer中范圍結(jié)束的偏移位置；

commonAncestorContainer——startContainer和endContainer都處于哪個(gè)最小的節(jié)點(diǎn)。

當(dāng)使用selectNode()時(shí)，startContainer、endContainer和commonAncestorContainer均等同于傳入的節(jié)點(diǎn)的父節(jié)點(diǎn)；startOffset等同于給定節(jié)點(diǎn)在父節(jié)點(diǎn)的childNodes集合中的索引，而endOffset等同于startOffset加1。

當(dāng)使用selectNodeContents()時(shí)，startContainer、endContainer和commonAncestorContainer等同于傳入的節(jié)點(diǎn)，startOffset等于0；endOffset等于子節(jié)點(diǎn)的數(shù)量（node.childNode.length）.

2） DOM范圍中的復(fù)雜選區(qū)

創(chuàng)建復(fù)雜選區(qū)需要使用復(fù)雜范圍的setStart()和setEnd()方法。這兩個(gè)方法均接受兩個(gè)參數(shù)：節(jié)點(diǎn)的引用和偏移量。對(duì)于setStart()，引用的節(jié)點(diǎn)是startContainer，偏移量是startOffset；對(duì)于setEnd()，引用的節(jié)點(diǎn)是endContainer，而偏移量是endOffset。

3） 與DOM范圍對(duì)象的內(nèi)容進(jìn)行交互

當(dāng)創(chuàng)建對(duì)象時(shí)，內(nèi)部將創(chuàng)建文檔碎片節(jié)點(diǎn)，在選區(qū)中的所有節(jié)點(diǎn)都被附加其。然而，在附加之前，范圍對(duì)象必須保證所選的內(nèi)容的故事是正確的。

deleteContents()：從文檔中將范圍內(nèi)的內(nèi)容全部刪除；

extracdtContents()：從文檔中刪除選區(qū)范圍，并將范圍內(nèi)的文檔碎片作為函數(shù)返回值返回。

4）插入DOM范圍的內(nèi)容

innerNode()方法用來(lái)在選區(qū)的開頭插入節(jié)點(diǎn)。除了可以將內(nèi)容插入范圍，還可用surroundContents()方法插入包圍范圍的內(nèi)容。這個(gè)方法接受一個(gè)參數(shù)（要包圍范圍的內(nèi)容的節(jié)點(diǎn)）。在后臺(tái)會(huì)執(zhí)行以下幾步：

抽取出范圍中的內(nèi)容；

將給定節(jié)點(diǎn)插入到原來(lái)范圍所在的位置；

將文檔碎片的內(nèi)容添加到給定節(jié)點(diǎn)中。

這類功能在網(wǎng)頁(yè)上也很有用，可以用來(lái)突出顯示頁(yè)面上的特定單詞，如下：

var oP1 = document.getElementById("p1");

var oHello = oP1.firstChild.firstChild;

var oWorld = op1.lastChild;

var oRange = document.createRange();

var oSpan = document.createElement("span");

oSpan.style.backgroundColor = "yellow";

oRange.setStart(oHello, 2);

oRange.setEnd(oWorld, 3);

oRange.surroundContents(oSpan);

前面的代碼用黃色的背景突出顯示范圍選區(qū)。

5) 折疊DOM范圍

折疊范圍類似文本框的一種行為。當(dāng)文本框中有文字時(shí)，可以用鼠標(biāo)突出全部文字。但是，只要再點(diǎn)擊一下鼠標(biāo)左鍵，選區(qū)就消失了，光標(biāo)將停留在兩個(gè)字母之間。

可以用collapse()方法來(lái)折疊范圍，這個(gè)方法接受一個(gè)參數(shù)：用于表示是折疊到范圍的那一端的Boolean值。如果參數(shù)是true，范圍就折疊到開頭；如果是false，范圍就折疊到末尾。要判斷范圍是否已被折疊，可以用collapsed特性：

oRange.collapse(true); //折疊到開始點(diǎn)

alert(oRange.collapsed); //輸出true

6）比較DOM范圍

使用compareBoundaryPoints()方法來(lái)判斷范圍是否具有相同的邊界（開頭或者結(jié)尾）。這個(gè)方法接受兩個(gè)參數(shù)：要進(jìn)行比較的范圍及如何進(jìn)行比較，后者是個(gè)常量值：

START_START(0)——比較兩個(gè)范圍的起點(diǎn)；

START_TO_END(1)——比較低一個(gè)范圍的起點(diǎn)和第二個(gè)范圍的終點(diǎn)；

END_TO_END(2)——比較兩個(gè)范圍的終點(diǎn)；

END_TO_START(3)——比較第一個(gè)范圍的終點(diǎn)和第二個(gè)范圍的起點(diǎn)。

如果第一個(gè)范圍的被測(cè)點(diǎn)在第二個(gè)范圍的被測(cè)點(diǎn)之前，返回-1；

如果兩被測(cè)點(diǎn)相同，返回0；

如果第一個(gè)范圍的被測(cè)點(diǎn)在第二個(gè)范圍的被測(cè)點(diǎn)之后，返回1。

7）復(fù)制DOM的范圍

通過(guò)cloneRange()方法來(lái)創(chuàng)建范圍的副本。它可以創(chuàng)建與被調(diào)用的范圍對(duì)象完全一致的副本：

var oNewRange = oRange.cloneRange();

新的范圍包含的所有特性與原范圍的特性均相同，并且能夠絲毫不會(huì)影響原范圍地修改它。

8）清理

當(dāng)使用完范圍后，最好用detach()方法釋放系統(tǒng)資源。這不是必需的，因?yàn)椴辉俦灰玫姆秶詈罂偸潜焕占髑謇淼簟?br>

2． IE中的范圍

IE中的范圍稱為文本范圍，它們主要用來(lái)處理文本。要?jiǎng)?chuàng)建范圍，要調(diào)用<body/>、<button/>、<input/>或者<textarea/>元素上的createTextRange()方法：

var oRange = document.body.createTextRange();

用這個(gè)范圍創(chuàng)建的范圍可以在頁(yè)面上的任何位置上使用。

1） IE范圍中的簡(jiǎn)單選區(qū)

選擇頁(yè)面的某個(gè)區(qū)域的最簡(jiǎn)單的方法是用范圍的findText()方法，這個(gè)方法可找到文本字符串的第一個(gè)實(shí)例并用范圍包含它，

eg. <p id=”p1”><b>Hello</b>阿蜜果</p>

var oRange = document.body.createTextRange();

var bFound = oRange.findText(“Hello”);

代碼執(zhí)行后，文本Hello就被包含在范圍之內(nèi)。可用范圍的text特性來(lái)檢測(cè)它，或者也可以檢測(cè)findText()的返回值，如果是true，表示找到文本：

alert(bFound);

alert(oRange.text);

要在文檔中移動(dòng)范圍，可用findText()方法的第二個(gè)參數(shù)，這是個(gè)表示繼續(xù)搜索的方向的數(shù)字；負(fù)數(shù)表示向回查找，正數(shù)表示搜索繼續(xù)往前。所以，要找到文檔中Hello的前兩個(gè)實(shí)例，可以用這段代碼：

var oFound = oRange.findText(“Hello”);

var bFoundAgain = oRange.findText(“Hello”, 1);

與DOM的selectNode()方法最相近的是IE的moveToElementText()方法，它可接受DOM元素作為參數(shù)，并選取元素的所有文本，如下：

var oRange = document.body.createTextRange();

var oP1 = document.getElementById(“p1”);

oRange. moveToElementText(oP1);

要測(cè)試上述代碼是否正常，可使用:

alert(oRange.htmlText);

2） IE范圍中的復(fù)雜選區(qū)

略。

posted on 2007-08-18 16:05 阿蜜果閱讀(2879) 評(píng)論(2) 編輯收藏所屬分類: Javascript

FeedBack:

# re: JavaScript學(xué)習(xí)筆記——高級(jí)DOM技術(shù)

2007-08-18 22:19 | 窮

感覺DOM最大的問(wèn)題是標(biāo)準(zhǔn)的統(tǒng)一回復(fù) 更多評(píng)論

# re: JavaScript學(xué)習(xí)筆記——高級(jí)DOM技術(shù)

2014-12-04 17:16 | myname

@窮
是的。ie這么垃圾。。。回復(fù) 更多評(píng)論

新用戶注冊(cè) 刷新評(píng)論列表


只有注冊(cè)用戶登錄后才能發(fā)表評(píng)論。




網(wǎng)站導(dǎo)航: 博客園 IT新聞 Chat2DB C++博客博問(wèn) 管理
相關(guān)文章: 蜜果私塾：在JavaScript中使用適配器模式蜜果私塾：在JavaScript中使用工廠模式蜜果私塾：在JavaScript中使用單例模式蜜果私塾：JavaScript代碼的壞味道【不斷補(bǔ)充】蜜果私塾：DOM，黑色藝術(shù)的終結(jié)者（3）蜜果私塾：DOM，黑色藝術(shù)的終結(jié)者（2）蜜果私塾：DOM，黑色藝術(shù)的終結(jié)者（1） js操作iframe的一些知識(shí) JavaScript學(xué)習(xí)筆記——繼承 JavaScript學(xué)習(xí)筆記——瀏覽器中的JavaScript