閱讀679 返回首頁    go 阿裏雲 go 技術社區[雲棲]

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

最後更新：2017-05-17 11:04:53

  上一篇：go  從航空母艦上起飛，是怎樣一種體驗----EDAS帶你快速搞定分布式應用
  下一篇：go  又到買書時