說明：本文為《JavaScript高級程序設計》第10章學習筆記。
可以應用不同方式來處理文檔底層的DOM樹，首先，可利用現行瀏覽器中的非標準的屬性和方法，以及鮮為人知且有待進一步利用的DOM的標準接口。
一．樣式編程
IE4.0為每一個頁面上的元素都引入了一個style對象來管理元素的CSS樣式。DOM最后也采用這個方式，并將其作為訪問元素的樣式信息的標準手段。
下面的表格列出了一些常用的CSS特性及它們對應的JavaScript中的style對象的表示：
|
CSS樣式特性
|
JavaScript樣式屬性
|
|
background-color
|
style.backgroundColor
|
|
color
|
style.color
|
|
font
|
style.font
|
|
font-family
|
style.fontFamily
|
|
font-weight
|
style.fontWeight
|
要用JavaScript來更改樣式的值，只需將CSS的字符串分配給它們的樣式對象的特性就行，eg. var oDiv = document.getElementById(“div1”);
oDiv.style.border = “1px solid black”;
也可以使用style對象來獲取任何內聯樣式（直接通過HTML的style特性來分配的樣式）的值。Eg. 有如下的div：
<div id=”div1” style=”background-color: red; height: 50px; width:50px”></div>
獲取該div的style中的background-color的代碼如下：
var oDiv = document.getElementById(“div1”);
alert(oDiv.style.backgroundColor);
同樣的技巧也可應用于用戶將鼠標移動到頁面上指定元素的翻轉效果，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描述了一些樣式對的方法，以達到與單獨的CSS樣式的定義部分進行交互的目的：
getPropertyValue(propertyName)——返回CSS特性propertyName的字符串值；
getPropertyPriority()——如果在規則中指定CSS特性“important”，則返回“important”，否則返回空字符串；
item(index)——返回在給定索引index處的CSS特性的名稱；
removeProperty(propertyName)——從CSS定義中刪除propertyName；
setProperty(propertyName, value, priority)——按照指定的優先級來設置CSS特性propertyName的value值。
讓我們來看一個例子，若div如下：
<div id=”div1” style=”background-color: red; height: 50px; width: 50px”></div>
讓我們來測試下前面的某幾個方法，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方法重寫上面提到過的翻轉方法：
<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. 自定義鼠標提示
鼠標提示：就是把鼠標移動到圖片按鈕上時，出現的幫助性黃色方框。
Eg. <a href=”http://www.bogjava.net/amigoxie” title=”阿蜜果的blog”>阿蜜果</a>
上述例子是只有文本的鼠標提示，我們還可以自定義鼠標提示，例如當鼠標移動到指定目標上時，顯示隱藏的<div>，實例代碼如下：
<html>
<head>
<title>Style例子</title>
<script type="text/javascript">
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>將鼠標移動到紅色方框中</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">自定義鼠標提示</span>
</div>
</body>
</html>
3. 可折疊區域
可折疊區域的基本思想：可通過點擊某個地方來顯示或隱藏屏幕中的某個區域。讓我們來看一個相關的例子：
<html>
<head>
<title>可折疊區域的例子</title>
<script type="text/javascript">
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')">控制內容
1的顯示和隱藏</div>
<div style="border: 3px solid blue; height: 100px; padding: 10px" id="divContent1">內容1</div>
<p> </p>
<div style="background-color: blue; color: white; font-weight: bold; padding: 10px; cursor: pointer" onclick="toggle('divContent2')">控制內容
2的顯示和隱藏</div>
<div style="border: 3px solid blue; height: 100px; padding: 10px" id="divContent2">內容2</div>
</body>
</html>
本例中的兩個可折疊區域分別用來顯示和隱藏例子中id為divContent1和divContent2的兩個div。
4．訪問樣式表
使用style對象可以方便地獲取某個有style特性的元素的CSS樣式。但它無法表示由CSS規則或在style特性外部定義的類定義的元素的CSS樣式。例如下述例子中警告框將打不出背景色，而是空字符串：
<html>
<head>
<title>樣式的例子</title>
<style type="text/css">
div.special {
background-color: red;
height: 10px;
width: 10px;
margin: 10px;
}
</style>
<script type="text/javascript">
function getBackgroundColor() {
var oDiv = document.getElementById("div1");
alert(oDiv.style.backgroundColor);
}
</script>
</head>
<body>
<div id="div1" class="special"></div>
<input type="button" value="獲取背景色" onclick="getBackgroundColor()" />
</body>
</html>
原因在于上述例子的CSS數據并非存儲在style屬性中，而是存儲在類中，此種情況下可用如下方式引用：
用document.styleSheets集合來獲取定義類的樣式表的引用。只需修改getBackgroundColor()內容修改成如下內容：
var oCSSRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;
alert(oCSSRules[0].style.backgroundColor);
如果3個元素都引用了special樣式，當在運行過程中只想修改其中一個的背景色時，不可用如下方法：
function changeBackgroundColor() {
var oCSSRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;
oCSSRules[0].style.backgroundColor = “blue”;
}
此種方法將導致三者的div的背景色都被改變，可修改該方法的內容如下：
var oDiv = document.getElementById(“div1”);
oDiv.style.backgroundColor = “blue”;
5． 最終樣式
最終樣式由所有從內聯樣式和CSS規則計算得來的樣式信息組成。用來告訴我們元素最后是如何顯示在屏幕上的。
1） IE中的最終樣式
微軟為每個元素提供一個currentStyle對象，它包含了所有元素的style對象的特性和任何未被覆蓋的CSS規則的style特性。下面來看一個例子：
將訪問樣式表中的alert(oDiv.style.backgroundColor);
修改為：alert(oDiv.currentStyle.backgroundColor);
2） DOM中的最終樣式
DOM提供一個getComputedStyle()方法，它根據給定的元素創建類似style的對象。只有某些瀏覽器支持該功能，不推薦使用。
二．innerText和innerHTML
innerText：用來修改起始標簽和結束標簽的文本。Eg. oDiv.innerText = “內容”;
應用innerHTML特性，可以直接給元素分配HTML字符串，而不需要考慮使用DOM方法來創建元素。Eg.
oDiv.innerHTML = “<strong>Hello,阿蜜果</strong><em>阿蜜果</em>”;
還可以用innerText和innerHTML來獲取元素的內容。如果innerText和innerHTML返回相同的值。但是，如果同時包含文本和其他元素，innerText將只返回文本的表示，而innerHTML將返回所有元素和文本的HTML代碼。
通過將innerText復制給它自身，表示從指定的元素中刪除所有的HTML標簽。Eg.
oDiv.innerText = oDiv.innerText;
雖然innerText和innerHTML并非DOM標準的一部分，但事實上現在大部分的瀏覽器，包括IE、Opera和Safari，都支持innerText和innerHTML，而Mozilla，僅支持innerHTML。
三． outerText和outerHTML
在IE4.0引入，它們與innerText和innerHTML類似，只不過它們替換的是整個目標節點。
四． 范圍
范圍可以用來選擇文檔的某個部分，而不管節點的邊界。
1． DOM中的范圍
DOM Level2定義了方法createRange()來創建范圍。在DOM兼容的瀏覽器中的，這個發方法屬于document對象，所以可以這樣創建一個范圍：
var oRange = document.createRange();
要判斷文檔是否支持DOM風格的DOM風格的范圍，可以使用hasFeature()方法：
var supportDOMRanges = document.implementation.hasFeature(“Range”, “2.0”);
1） DOM范圍中的簡單選區
選擇使用范圍的文檔的某部分的最簡單的方法是用selectNode()或selectNodeContents()。這些方法只接受一個參數（DOM節點），然后它們用節點中的信息來填充范圍。
其中，selectNode()方法將選擇整個節點，包括它的子節點，而selectNodeContents()則選擇節點所有的子節點。
創建范圍時，會分配給它一些特性：
startContainer——范圍是從哪個節點中開始的；
startOffset——在startContainer中范圍開始的偏移位置；
endContainer——范圍是從哪個節點結束的；
endOffset——在endContainer中范圍結束的偏移位置；
commonAncestorContainer——startContainer和endContainer都處于哪個最小的節點。
當使用selectNode()時，startContainer、endContainer和commonAncestorContainer均等同于傳入的節點的父節點；startOffset等同于給定節點在父節點的childNodes集合中的索引，而endOffset等同于startOffset加1。
當使用selectNodeContents()時，startContainer、endContainer和commonAncestorContainer等同于傳入的節點，startOffset等于0；endOffset等于子節點的數量（node.childNode.length）.
2） DOM范圍中的復雜選區
創建復雜選區需要使用復雜范圍的setStart()和setEnd()方法。這兩個方法均接受兩個參數：節點的引用和偏移量。對于setStart()，引用的節點是startContainer，偏移量是startOffset；對于setEnd()，引用的節點是endContainer，而偏移量是endOffset。
3） 與DOM范圍對象的內容進行交互
當創建對象時，內部將創建文檔碎片節點，在選區中的所有節點都被附加其。然而，在附加之前，范圍對象必須保證所選的內容的故事是正確的。
deleteContents()：從文檔中將范圍內的內容全部刪除；
extracdtContents()：從文檔中刪除選區范圍，并將范圍內的文檔碎片作為函數返回值返回。
4）插入DOM范圍的內容
innerNode()方法用來在選區的開頭插入節點。除了可以將內容插入范圍，還可用surroundContents()方法插入包圍范圍的內容。這個方法接受一個參數（要包圍范圍的內容的節點）。在后臺會執行以下幾步：
抽取出范圍中的內容；
將給定節點插入到原來范圍所在的位置；
將文檔碎片的內容添加到給定節點中。
這類功能在網頁上也很有用，可以用來突出顯示頁面上的特定單詞，如下：
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);
前面的代碼用黃色的背景突出顯示范圍選區。
5) 折疊DOM范圍
折疊范圍類似文本框的一種行為。當文本框中有文字時，可以用鼠標突出全部文字。但是，只要再點擊一下鼠標左鍵，選區就消失了，光標將停留在兩個字母之間。
可以用collapse()方法來折疊范圍，這個方法接受一個參數：用于表示是折疊到范圍的那一端的Boolean值。如果參數是true，范圍就折疊到開頭；如果是false，范圍就折疊到末尾。要判斷范圍是否已被折疊，可以用collapsed特性：
oRange.collapse(true); //折疊到開始點
alert(oRange.collapsed); //輸出true
6）比較DOM范圍
使用compareBoundaryPoints()方法來判斷范圍是否具有相同的邊界（開頭或者結尾）。這個方法接受兩個參數：要進行比較的范圍及如何進行比較，后者是個常量值：
START_START(0)——比較兩個范圍的起點；
START_TO_END(1)——比較低一個范圍的起點和第二個范圍的終點；
END_TO_END(2)——比較兩個范圍的終點；
END_TO_START(3)——比較第一個范圍的終點和第二個范圍的起點。
如果第一個范圍的被測點在第二個范圍的被測點之前，返回-1；
如果兩被測點相同，返回0；
如果第一個范圍的被測點在第二個范圍的被測點之后，返回1。
7）復制DOM的范圍
通過cloneRange()方法來創建范圍的副本。它可以創建與被調用的范圍對象完全一致的副本：
var oNewRange = oRange.cloneRange();
新的范圍包含的所有特性與原范圍的特性均相同，并且能夠絲毫不會影響原范圍地修改它。
8）清理
當使用完范圍后，最好用detach()方法釋放系統資源。這不是必需的，因為不再被引用的范圍最后總是被垃圾收集器清理掉。
2． IE中的范圍
IE中的范圍稱為文本范圍，它們主要用來處理文本。要創建范圍，要調用<body/>、<button/>、<input/>或者<textarea/>元素上的createTextRange()方法：
var oRange = document.body.createTextRange();
用這個范圍創建的范圍可以在頁面上的任何位置上使用。
1） IE范圍中的簡單選區
選擇頁面的某個區域的最簡單的方法是用范圍的findText()方法，這個方法可找到文本字符串的第一個實例并用范圍包含它，
eg. <p id=”p1”><b>Hello</b>阿蜜果</p>
var oRange = document.body.createTextRange();
var bFound = oRange.findText(“Hello”);
代碼執行后，文本Hello就被包含在范圍之內。可用范圍的text特性來檢測它，或者也可以檢測findText()的返回值，如果是true，表示找到文本：
alert(bFound);
alert(oRange.text);
要在文檔中移動范圍，可用findText()方法的第二個參數，這是個表示繼續搜索的方向的數字；負數表示向回查找，正數表示搜索繼續往前。所以，要找到文檔中Hello的前兩個實例，可以用這段代碼：
var oFound = oRange.findText(“Hello”);
var bFoundAgain = oRange.findText(“Hello”, 1);
與DOM的selectNode()方法最相近的是IE的moveToElementText()方法，它可接受DOM元素作為參數，并選取元素的所有文本，如下：
var oRange = document.body.createTextRange();
var oP1 = document.getElementById(“p1”);
oRange. moveToElementText(oP1);
要測試上述代碼是否正常，可使用:
alert(oRange.htmlText);
2） IE范圍中的復雜選區
略。
posted on 2007-08-18 16:05
阿蜜果 閱讀(2880)
評論(2) 編輯 收藏 所屬分類:
Javascript