成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

DOM2范圍

mikyou / 2110人閱讀

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

DOM2范圍

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

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

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


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

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

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

IE8及更低版本中的DOM范圍

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

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

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

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/85758.html

相關(guān)文章

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

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

    zzir 評(píng)論0 收藏0

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

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

    Acceml 評(píng)論0 收藏0

  • DOM擴(kuò)展,DOM2和DOM3

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

    suxier 評(píng)論0 收藏0

  • JavaScript DOM2和DOM3——“范圍”的注意要點(diǎn)

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

    happyhuangjinjin 評(píng)論0 收藏0

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

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

    Freelander 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

mikyou

男|高級(jí)講師

TA的文章

閱讀更多
最新活動(dòng)
閱讀需要支付1元查看
<