国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

DOM2范圍

mikyou / 2079人閱讀

摘要：范圍有而中有這個方法接收一個元素，并選擇該元素的所有文本，包括標簽。如果在范圍選區(qū)中包含標簽可以用屬性讀取范圍全部內(nèi)容。

DOM2范圍

除了IE低版本（ie8-)，其余主流瀏覽器都支持DOM2的范圍，然而IE用其特有的方式實現(xiàn)了范圍特性！
Document類型中定義了createRange()，這個方法屬于document對象，首先檢測瀏覽器是否支持他：
var supportRange=document.implementation.hasFeature("Range","2.0");
var supportRange2=(typeof document.createRange=="function");

這是初步創(chuàng)建范圍后在控制臺輸出的，拿其中較為關(guān)鍵的屬性來說>_<
startContainer與endContainer他們通常是指向相同元素（前者為選區(qū)中第一個元素的父節(jié)點，后者為選區(qū)中最后一個元素的父節(jié)點）
startOffset通常等于父節(jié)點的childNodes的第一個子節(jié)點的索引，在兼容DOM的瀏覽器中空格算為一個文本節(jié)點。
要使用范圍選擇文檔中的一部分，可以使用selectNode()和selectNodeContents()，他們都接收一個參數(shù)，即范圍的起點，前者選擇自身與子，后者只選擇子。
為了更精確更方便地控制范圍引入了一些更為方便的方法，如下：
setStartBefore(refNode) => 將范圍設(shè)置在refNode之前，即refNode是范圍開始的第一個子節(jié)點，所以startContainer就是refNode的父節(jié)點
setStartAfter(refNode) => 將范圍設(shè)置在refNode之后，即refNode的下一個同輩節(jié)點才是選區(qū)的第一個子節(jié)點，所以refNode不在范圍之內(nèi)
setEndBefore(refNode) => 將范圍的終點設(shè)置在refNode之前，即refNode的上一個同輩節(jié)點是選區(qū)的最后一個子節(jié)點，所以refNode不在范圍之內(nèi)
setEndAfter(refNode) => 將范圍的終點設(shè)置在refNode之后，即refNode是選區(qū)的最后一個子節(jié)點，所以refNode在范圍之內(nèi)

復雜操作： 
 setStart(node, offset)    =>     設(shè)置起點的位置，node是對startContainer的引用，偏移則是startOffset
 setEnd(node, offset)      =>     設(shè)置結(jié)束點的位置，node是對endContainer的引用，偏移則是startOffset


這段代碼最后剩下Herld 雖然把范圍內(nèi)的文本刪了，但是DOM結(jié)構(gòu)仍然不會變。
與deleteContents()類似的方法有extractContents()，但后者這個方法會返回選區(qū)的內(nèi)容，因此可以利用他來插入到頁面的其他位置。
cloneContents()這個方法，如果只是要創(chuàng)建一個范圍的副本而不去刪除或移除范圍的內(nèi)容可以用他，語法名稱代表用法，即克隆內(nèi)容。

插入DOM范圍中的內(nèi)容：
使用insertNode()方法可以在范圍選區(qū)開始處插入一個節(jié)點

強調(diào)范圍選區(qū)不同后續(xù)操作不同！
在使用完范圍之后，最好調(diào)用detach()方法，清理范圍，回收內(nèi)存,一旦分離了范圍就不能再使用了。
range.detach(); // 從文檔中分離
range=null; // 解除引用

IE8及更低版本中的DOM范圍

準確來說IE高版本以及低版本都支持文本范圍，是IE獨有的特性，其他瀏覽器不支持，語法名稱代表用法，所以主要用于文本。

選擇某一區(qū)域用方法findText(),他會找到第一次出現(xiàn)的文本，然而他第二個參數(shù)如果為負值就會找最后一個匹配成功的文本，正值就會找到第一個匹配成功的文本，這也就說明了圖中為什么找到hELLO而不是另外兩個的原因了！
當中的變量found只要在匹配到文本時就會返回true，匹配不區(qū)分大小寫在某些操作上也許會帶來方便，可以用屬性text，來獲取范圍選中的文本。
DOM范圍有selectNode()而IE中有=>moveToElementText() =>這個方法接收一個DOM元素，并選擇該元素的所有文本，包括HTML標簽。如果在范圍選區(qū)中包含HTML標簽可以用屬性htmlText讀取范圍全部內(nèi)容。
屬性text可以讀取文本也可以修改文本，如下：

可見hELLO的部分已經(jīng)被替代成hello，但標簽沒有被替代，如果想把標簽替換掉可以用pasteHTML()，例如：range1.pasteHTML("hello");
但是上述做法會引起沖突，不提倡！
IE中使用方法duplicate()復制文本范圍，如同cloneContents()，新創(chuàng)建的范圍帶有原范圍相同的屬性。例：var range=range.duplicate();

這是我個人的一點總結(jié)，有些屬性方法未提及的！

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://specialneedsforspecialkids.com/yun/85758.html

相關(guān)文章

  • DOMJS高級程序設(shè)計筆記——DOM2和DOM3

    摘要：對象包含下列屬性返回整條規(guī)則對應(yīng)的文本包括選擇符和花括號返回當前規(guī)則的選擇符一個對象返回規(guī)則中所有的樣式當前規(guī)則所屬的樣式表表示規(guī)則類型的常量值。從文檔中分離解除引用推薦在使用完范圍后再執(zhí)行上述兩個步驟。 DOM1級主要定義了HTML和XML文檔的底層結(jié)構(gòu)，DOM2和DOM3則在DOM1的基礎(chǔ)上引入了更多的交互功能，支持了更高級的XML特性。DOM2和DOM3分為許多模塊（模塊之間具...

    zzir 評論0 收藏0

  • 高程3總結(jié)#第12章DOM2和DOM3

    摘要：如果不需要偽元素信息，第二個參數(shù)可以輸操作樣式表類型表示的是樣式表，包括通過元素包含的樣式表和在元素中定義的樣式表表示樣式表是否被禁用的布爾值。包括元素的高度可見的水平滾動條的高度上邊框高度和下邊框高度。顯示處理指令節(jié)點。 DOM2和DOM3 DOM變化 針對XML命名空間的變化 有了XML命名空間，不同XML文檔的元素就可以混合在一起，共同構(gòu)成格式良好的文檔，而不必擔心發(fā)生命名沖突...

    Acceml 評論0 收藏0

  • DOM擴展,DOM2和DOM3

    摘要：擴展選擇符的核心是兩個方法和。目前已完全支持的瀏覽器有和。在寫模式下，會根據(jù)指定的字符串創(chuàng)建新的子樹，然后用這個子樹完全替換調(diào)用元素。在刪除帶有事件處理程序或引用了其他對象子樹時，就有可能導致內(nèi)存占用問題。刪除集合中指定位置的規(guī)則。 DOM擴展 選擇符API Selectors API Level 1 的核心是兩個方法：querySelector()和querySelectorAll(...

    suxier 評論0 收藏0

  • JavaScript DOM2和DOM3——“范圍”的注意要點

    摘要：級遍歷和范圍模塊定義了范圍接口。折疊范圍方法折疊就是指范圍中未選擇文檔的任何部分。表示折疊到范圍的起點，參數(shù)表示折疊到范圍的終點。常量指定比較當前范圍的點和指定范圍的點。下節(jié)再討論及更早版本中的范圍 DOM2級遍歷和范圍模塊定義了范圍接口。通過范圍可以選擇文檔中的一個區(qū)域，而不必考慮節(jié)點的界限（選擇在后臺完成，對用戶是不可見的）。 DOM中的范圍 DOM2級在Document類型中定義...

    happyhuangjinjin 評論0 收藏0

  • 溫故js系列（10）-事件event

    摘要：當用戶選擇文本框或中的一個或多個字符觸發(fā)。當文本框或內(nèi)容改變且失去焦點后觸發(fā)。事件對象事件對象就是對象，通過處理函數(shù)傳遞。比如右擊文本框輸入?yún)^(qū)域，會彈出系統(tǒng)菜單點擊超鏈接會跳轉(zhuǎn)到指定頁面點擊提交按鈕會提交數(shù)據(jù)。 前端學習：教程&開發(fā)模塊化/規(guī)范化/工程化/優(yōu)化&工具/調(diào)試&值得關(guān)注的博客/Git&面試-前端資源匯總 歡迎提issues斧正：Event JavaScript-事件even...

    Freelander 評論0 收藏0

發(fā)表評論

0條評論

mikyou

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<