《JS高程(3)》DOM2和DOM3-範圍range-第12章筆記(25)

implementation 屬性可返回處理該文檔的 DOMImplementation 對象。

DomImplementation 對象可執行與文檔對象模型的任何實例無關的任何操作。

DomImplementation 接口是一個佔位符,存放不專屬任何特定 Document 對象,而對 DOM 實現來說是“全局性”的方法。可以通過任何 Document 對象的 implementation 屬性獲得對 DomImplementation 對象的引用。

方法 描述
createDocument(): 創建一個新 Document 對象和指定的根元素。
createDocumentType(): 創建空的 DocumentType 節點。
hasFeature(): 檢查 DOM implementation 是否可執行指定的特性和版本。

DOM2在Document中定義了createRange()方法。
檢測方法:

var supportsRange = document.implementation
.hasFeature("Range", "2.0");
var alsoSupportsRange = (typeof document.createRange == "function")

創建方式:

var range = document.createRange();
屬性/方法 描述
startContainer: 包含範圍起點的節點(集選區中第一個節點的父節點)。
startOffset: 範圍在startContainer中起點的偏移量。如果startContainer是文本節點、註釋節點或CDATA節點,那麼startOffset就是範圍起點之前跳過的字符數量。否則startOffset就是範圍內第一個子節點的索引。
endContainer: 包含範圍終點的節點(集選區中最後一個節點的父節點)。
endOffset: 範圍在endContainer中起點的偏移量。(與startOffset規則相同)。
selectNode(): 接收一個參數(DOM節點),以該節點中的信息來填充範圍包括其自身。
selectNodeContents(): 接收一個參數(DOM節點),以該節點中的信息來填充範圍不包括其自身。
setStart(): 接收兩個參數:參照點(startContainer)和偏移量值(startOffset)。
setEnd(): 接收兩個參數:參照點(endContainer)和偏移量值(endOffset)。
deleteContents(): 從文檔中刪除範圍所包含的內容。
extractContents(): 從文檔中刪除範圍所包含的內容,並返回範圍的文檔片段。
cloneContents(): 創建範圍對象的副本嗎,不對原始DOM進行任何修改。
insertNode(): 像範圍選區的開始處插入一個節點。
surroundContents(): 環繞節點內容,只接受一個參數即環繞節點。不能誇抱歉使用。
collapse(): 用於摺疊範圍,接受一個參數-布爾值,表示要摺疊到範圍的那一端。true表示起點,false表示終點。
compareBoundaryPoints(): 確定範圍是否有公共邊界(起點或終點)。範圍1在範圍2之前返回“-1”,相等返回“0”,範圍1在範圍2之後返回“1”
cloneRange(): 複製範圍,創建調用範圍的副本。
detach(): 清理DOM範圍。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div >
    <p id="p1"><b>Hello</b> world!</p>
</div>
    <script>
        var p1 = document.getElementById('p1'),
            helloNode = p1.firstChild.firstChild;
            range = document.createRange();
        range.selectNode(helloNode);
        var span = document.createElement("span");
        span.style.background = "yellow";
        range.surroundContents(span);
        range.detach(); //從文檔中分離
        range = null;  //解除引用
    </script>
</body>
</html>

IE9支持,IE8以下版本不支持DOM範圍。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章