Dom中的範圍

dom2級在document型別中定義了createrange（）方法。在相容dom瀏覽器的瀏覽器中，這個方法屬於document物件。使用hasfeature（）或者直接檢測該方法，都可以確定瀏覽器是否支援範圍

var supportrange=document.implementation.hasfeature("range","2.0");

如果瀏覽器支援範圍，那麼就可以使用createrange（）來建立dom範圍

var range=document.createrange();

新建立的範圍直接與建立它的文件關聯在一起，不能用於其他文件。每個範圍由乙個range型別的例項表示，這個例項擁有很多屬性和方法

startcontainer:包含範圍起點的幾點（即選區中第乙個節點的父節點）

startoffset：範圍在startoffset中起點的偏移量。如果startcontainer是文字節點、注釋節點或cdata節點，那麼startoffset就是範圍起點之前跳過的字元數量。否則，startoffset就是範圍中第乙個子節點的索引

endcontainer：包含範圍終點的節點（即選區中最後乙個節點的父節點）

endoffset：範圍在endcontainer中終點的偏移量

1 用dom實現簡單選擇

要使用範圍來選擇文件中的一部分，最簡的方式就是使用selectnode（）或selectnodecontents（），這兩個方法都接受乙個引數，即乙個dom節點，然後使用該節點中的資訊來填充範圍。其中selectnode（）方法選擇整個節點，包括其子節點；而selectnodecontents（）方法則只選擇節點的子節點

在呼叫selectnode時，startcontainer、endcontainer都等於傳入節點的父節點，startoffset屬性等於給定節點在其父節點的childnodes集合中的索引。

範圍

為了更精細地控制將那些節點包含在範圍中，還可以使用下列方法

setstartbefore（refnode）：將範圍的起點設定在refnode之前，因此refnode就是範圍選區中的第乙個子節點，同時將startcontainer屬性設定為refnode.parentnode，將startoffset屬性設定為refnode在父節點的childnodes集合中的索引

setstartafter(refnode):將範圍的起點設定在refnode之後，因此refnode就不在範圍之內，其下乙個同輩節點才是選區中的第乙個子節點。同時將startcontainer屬性設定為refnode.parentnode，將startoffset屬性設定為refnode在父節點的childnodes集合中的索引加1

setendbefore（refnode）：將範圍的終點設定在refnode之前，，因此refnode就不在範圍之內，其上乙個同輩節點才是選區中的最後乙個子節點，同時將endcontainer屬性設定為refnode.parentnode，將endoffset屬性設定為refnode在父節點的childnodes集合中的索引

setendafter（refnode）：將範圍的終點設定在refnode之後，因此refnode就是範圍選區中的最後乙個子節點，同時將endcontainer屬性設定為refnode.parentnode，將endoffset屬性設定為refnode在父節點的childnodes集合中的索引加1

2 用dom範圍實現複雜選區

要建立複雜的範圍需要使用setstart（）和setend（）方法。這兩個方法都接受兩個引數：乙個參照節點和乙個偏移量。對setstart（）來說，參照節點會變成startcontainer，而偏移量會變成startoffset；對於setend（），參照節點會變成endcontainer，而偏移量會變成endoffset。

helloworld
var p1=document.getelementbyid("p1");
var hellonode=p1.firstchild;
var worldnode=p1.lastchild.firstchild;
var range2=document.createrange();
range2.setstart(hellonode,2);
range2.setend(worldnode,3);

在建立範圍時，內部會為這個範圍建立乙個文件片段，範圍所屬的全部節點都被新增到了這個文件片段中。對於上面的例子，範圍經過計算知道選區中缺少乙個結束的標籤，因此就會在後台動態載入乙個該標籤。修改後的dom如下所示

helloworld

利用deletecontents（）可以從文件中刪除範圍所包含的內容 range2.deletecontents()

利用insertnode（）方法可以向範圍選區的開始處插入乙個節點。

除了向範圍內部插入內容之外，還可以環繞範圍插入內容，此時就使用surroundcontents（）方法，這個方法接受乙個引數，即環繞範圍內容的節點。

範圍

var p=document.getelementbyid("p");
var ptext=p.firstchild;
var range1=document.createrange();
range1.selectnode(ptext);
var span=document.createelement("span");
span.style.backgroundcolor="yellow";
range1.surroundcontents(span);

執行結果就是「範圍」被新增了黃色背景

Dom中的範圍

DOM中的範圍

DOM中的範圍

C 中變數的作用範圍可見範圍

Dom中的範圍

DOM中的範圍

DOM中的範圍

C 中變數的作用範圍 可見範圍

相關推薦

C 中變數的作用範圍可見範圍