javascript之DOM技術（二）

javascript之DOM技術（一）

一。樣式程式設計
1.頁面中的每一個元素都具有一個style物件，此物件管理元素的CSS樣式。這是在IE4.0引入的，後來作為DOM標準被接受。使用方法:
var oDiv=document.getElementById(“div1”);
alert(oDiv.style.backgroundColor);
style物件擁有一個cssText屬性，返回描述元素樣式的CSS字串。

2.樣式物件style的方法（IE6並不支援這些方法）：
（1）getPropertyValue(propertyName)——返回CSS特性propertName的字串值，比如this.style.getPropertyValue(“background-color”);這裡的propertyName必須按照CSS的樣式定義。

（2）getPropertyPriority()——返回important字串或者為空
（3）item(index)——返回給定索引處的CSS特性名稱
（4）removeProperty(propertyName)——移除某CSS特性
（5）setProperty(propertyName,value,priorty)——按照執行優先順序設定CSS特性的值

3.通過隱藏層實現自定義滑鼠提示的例子：

<html>
    <head>
        <title>Style Example</title>
          <script type=”text/javascript” src=”detect.js”></script>
        <script type=”text/javascript” src=”eventutil.js”></script>
        <script type=”text/javascript”>
            function showTip() {
                var oDiv = document.getElementById(“divTip1“);
                oDiv.style.visibility = “visible“;
                var oEvent=EventUtil.getEvent();
                oDiv.style.left = oEvent.clientX + 5;
                oDiv.style.top = oEvent.clientY + 5;
            }

function hideTip() {
                var oDiv = document.getElementById(“divTip1“);
                var oEvent=EventUtil.getEvent();
                oDiv.style.visibility = “hidden“;
            }
        </script>
    </head>
    <body>
        <p>Move your mouse over the red square.</p>
        <div id=”div1″
             style=”background-color: red; height: 50px; width: 50px”
             onmouseover=”showTip()” onmouseout=”hideTip()”></div>

<div id=”divTip1″
              style=”background-color: yellow; position: absolute; visibility: hidden; padding: 5px”>
            <span style=”font-weight: bold”>Custom Tooltip</span><br />
            More details can go here.
         </div>
    </body>
</html>

這裡使用了我在《javascript事件模型框架》中摘記的JS檔案。實現可摺疊區域的道理與此相同，很常用的功能，不再細說。

4.訪問樣式表，因為style物件只能訪問一個元素的CSS樣式，而對於<style/>定義的或者外部CSS檔案定義的CSS規則沒辦法訪問，這就引出瞭如何訪問樣式表的問題。我們可以通過下面的方式訪問：

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

document.styleSheets返回頁面上所有樣式表的引用，標準DOM中規定每個樣式表的規則集合叫cssRules，而IE中叫rules，所以我們用上面的表示式來處理瀏覽器相容問題。一個訪問的例子：

<html>
    <head>
        <title>Accessing Style Sheets Example</title>
        <style type=”text/css”>
            div.special {
                background-color: red;
                height: 10px;
                width: 10px;
                margin: 10px;
            }
        </style>
        <script type=”text/javascript”>
            function changeBackgroundColor() {
                var oCSSRules = document.styleSheets[0].cssRules || document.styleSheets[0].rules;
                oCSSRules[0].style.backgroundColor = “blue“;
            }
        </script>
    </head>
    <body>
        <div id=”div1″ class=”special”></div>
        <div id=”div2″ class=”special”></div>
        <div id=”div3″ class=”special”></div>

        <input type=”button” value=”Change Background Color” onclick=”changeBackgroundColor()” />
    </body>
</html>

點選按鈕時將三個div的背景色都設定為藍色。

5.最終樣式：顧名思義，就是樣式規則（外部定義和內聯的）綜合計算之後呈現給使用者的樣式資訊，用來告訴我們元素最終是如何顯示在螢幕上的。IE和標準的DOM也有區別：
（1）IE中的最終樣式稱為currentStyle物件，與style物件不同的是它是隻讀的，你只能讀而不能給它賦值。
（2）DOM中的最終樣式，通過document.defaultView.getComputedStyle(元素物件,偽元素物件或者null)方法獲得

二。innerHTML和innerText
很常用的功能，特別是在AJAX應用中，經常採用的手段是從服務端返回一小段HTML程式碼，通過innerHTML嵌入某個層當中來動態顯示下拉框等。一個比較常見的用法：
oDiv.innertText=oDiv.innerText;
表示從指定元素中刪除所有的HTML標籤。

三。outerText和outerHTML

與innerHTML和innerText，不過替換的是整個目標節點，僅在IE和opera中支援此特性

四。範圍
叫選區也許更為恰當，range用來選擇文件的某個部分而不管節點的邊界。也有兩種的範圍實現：DOM和IE的
1.DOM的range
（1）在DOM中建立選區的方法：

var supportDOMRange=document.implementation.hasFeature(“Range”,”2.0″);
if(supportDOMRange)
var oRange=document.createRange();

先判斷是否支援DOM，然後使用createRange()方法建立範圍

（2）簡單選區
考慮下面的程式碼：

<p id=”p1″><b>hello</b>world</p>

我們通過下面的JS程式碼來訪問上面這段程式碼：

var oRange1=document.createRange();
var oRange2=document.createRange();
var op1=document.getElementById(“p1”);
oRange1.selectNode(op1);
oRange2.selectNodeContents(op1);

兩個範圍，通過selectNode和selectNodeContents方法來選區，有什麼不同呢？oRange1選中的範圍包括<p/>節點以及它的全部子節點，而oRange2只包含op1的子節點和文字節點（就是”<b>hello</b>world”)。

（3）範圍的特性：
<1>startContainer——範圍是從哪個節點開始的，也就是第一個節點的父節點
<2>startOffset——在startContainer的偏移位置。
<3>endContainer——最後一個節點的父節點
<4>endOffset——在endContainer中範圍結束的偏移位置
<5>commonAncestorContainer——startContainer和endContainer都處於哪個最小的節點
演示這些特性的例子：

<html>
    <head>
        <title>DOM Range Example</title>
        <script type=”text/javascript”>
            function useRanges() {
                var oRange1 = document.createRange();
                var oRange2 = document.createRange();
                var oP1 = document.getElementById(“p1“);
                oRange1.selectNode(oP1);
                oRange2.selectNodeContents(oP1);

                document.getElementById(“txtStartContainer1“).value = oRange1.startContainer.tagName;
                document.getElementById(“txtStartOffset1“).value = oRange1.startOffset;
                document.getElementById(“txtEndContainer1“).value = oRange1.endContainer.tagName;
                document.getElementById(“txtEndOffset1“).value = oRange1.endOffset;
                document.getElementById(“txtCommonAncestor1“).value = oRange1.commonAncestorContainer.tagName;

document.getElementById(

“txtStartContainer2“).value = oRange2.startContainer.tagName;
                document.getElementById(“txtStartOffset2“).value = oRange2.startOffset;
                document.getElementById(“txtEndContainer2“).value = oRange2.endContainer.tagName;
                document.getElementById(“txtEndOffset2“).value = oRange2.endOffset;
                document.getElementById(“txtCommonAncestor2“).value = oRange2.commonAncestorContainer.tagName;
            }
        </script>
    </head>
    <body><p id=”p1″><b>Hello</b> World</p>
        <input type=”button” value=”Use Ranges” onclick=”useRanges()” />
        <table border=”0″>
        <tr>
            <td>
                <fieldset>
                    <legend>oRange1</legend>
                    Start Container: <input type=”text” id=”txtStartContainer1″ /><br />
                    Start Offset: <input type=”text” id=”txtStartOffset1″ /><br />
                    End Container: <input type=”text” id=”txtEndContainer1″ /><br />
                    End Offset: <input type=”text” id=”txtEndOffset1″ /><br />
                    Common Ancestor: <input type=”text” id=”txtCommonAncestor1″ /><br />
                </fieldset>
            </td>
            <td>
                <fieldset>
                    <legend>oRange2</legend>
                    Start Container: <input type=”text” id=”txtStartContainer2″ /><br />
                    Start Offset: <input type=”text” id=”txtStartOffset2″ /><br />
                    End Container: <input type=”text” id=”txtEndContainer2″ /><br />
                    End Offset: <input type=”text” id=”txtEndOffset2″ /><br />
                    Common Ancestor: <input type=”text” id=”txtCommonAncestor2″ /><br />
                </fieldset>
            </td>
        </tr>
        </table>
        <p><strong>Note:</strong> This example uses DOM ranges and will only work in browsers that support DOM ranges. This example will fail in Internet Explorer.</p>

</body>
</html>

（4）複雜選區
通過setStart和setEnd來實現複雜選區，兩個方法都接受兩個引數：節點引用和偏移量。

（5）與範圍物件的互動
<1>deleteContents()，刪除範圍內容
<2>extractContents,與deleteContents()相似，只不過返回被刪除的文件碎片
<3>cloneContents()，建立範圍內容副本
<4>surroundContents(node)，插入包圍範圍的內容
<5>insertNode(node)，在選區開頭插入節點
<6>cloneRange(),複製範圍
<7>detach()，釋放系統資源
<8>compareBoundaryPoints()方法，比較範圍，兩個引數，一個比較規則（Range.START_START,Range.START_TO_END,Range.END_TO_START,Range.END_TO_END),一個是比較的範圍引用

2.IE中的範圍
IE的範圍並不標準，主要用來處理文字節點，呼叫<body/>,<button/>,<input/>,<textarea>節點的createTextRange方法來建立範圍，建議用document.body.createTextRange()來建立，因為其他元素建立的範圍僅能用於它們內部。
（1）簡單選區：
同樣以下面這段程式碼為例子：

<p id=”p1″><b>hello</b>world</p>

要選擇hello，可以使用：

var oRange=document.body.createTextRange();
oRange.findText(“hello”);

findText方法還可以接受第2個引數，如oRange.findText(“hello”,1);將選擇hello之後再次找到的hello文字節點。
與DOM中的selectNode方法最相似的是IE的moveToElementText()方法，比如我們要選中p1節點以及它的所有子節點：

var oRange=document.body.createTextRange();
var oP1=document.getElementById(“p1`);
oRange.moveToElementText(oP1);
alert(oP1.htmlText);

另外，oRange.parentElement()返回選區的父節點。

（2）複雜選區：
move(),moveStart(),moveEnd(),expand()方法實現複雜選區，這些方法都接受兩個引數：移動的單位（”character”,”word”,”sentence”,”textedit”)和移動的單位的個數。

（3)與範圍互動
<1>text屬性，比如oRange.text=”hello”;
<2>pasteHTML()，插入HTMl程式碼，比如oRange.pasteHTML(“<em>test</em>”);
<3>duplicate()，複製範圍
<4>compareEndPoints() 方法，比較範圍，第一個引數也是比較規則（”StartToStart”,”StartToEnd,EndToStart”,”EndToEnd”)和比較的範圍引用。也可以通過isEqual()和isRange()方法來比較。

3.範圍的常見應用，比如搜尋引擎中，搜尋出來的連結中的關鍵字用特別的顏色包圍起來，另外就是網頁廣告比較常用。

文章轉自莊周夢蝶，原文釋出時間5.17

javascript之DOM技術（二）

相關文章