亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

選擇文本為其添加類名

MRZYD / 1364人閱讀

摘要：最近做個小功能功能效果如圖試想一下，如果在選擇文本之后不僅能獲得對應(yīng)文檔片段，而且再獲得文本對應(yīng)的文檔位置，這樣我們才能給文檔片段包裹類名再后插入原來的位置。選區(qū)中包含的范圍的數(shù)量將指定的范圍添加到選區(qū)中。

最近做個小功能,功能效果如圖:

試想一下，如果在選擇文本之后不僅能獲得對應(yīng)文檔片段，而且再獲得文本對應(yīng)的文檔位置，
這樣我們才能給文檔片段包裹類名再后插入原來的位置。

這樣的話咱們先來學(xué)習(xí)DOM2和DOM3的幾個概念

1. window.getSelection() 
getSelection() 方法，可以確定實(shí)際選擇的文本。
這個方法是 window 對象和 document 對象的屬性，調(diào)用它會返回一個表示當(dāng)前選擇文本的 Selection對象。
每個 Selection 對象都有下列屬性。



anchorNode ：選區(qū)起點(diǎn)所在的節(jié)點(diǎn)。


anchorOffset ：在到達(dá)選區(qū)起點(diǎn)位置之前跳過的 anchorNode 中的字符數(shù)量。



focusNode ：選區(qū)終點(diǎn)所在的節(jié)點(diǎn)。



focusOffset ： focusNode 中包含在選區(qū)之內(nèi)的字符數(shù)量。


isCollapsed ：布爾值，表示選區(qū)的起點(diǎn)和終點(diǎn)是否重合。


rangeCount ：選區(qū)中包含的 DOM 范圍的數(shù)量


addRange(range) ：將指定的 DOM 范圍添加到選區(qū)中。


collapse(node, offset) ：將選區(qū)折疊到指定節(jié)點(diǎn)中的相應(yīng)的文本偏移位置。


collapseToEnd() ：將選區(qū)折疊到終點(diǎn)位置。


collapseToStart() ：將選區(qū)折疊到起點(diǎn)位置。


containsNode(node) ：確定指定的節(jié)點(diǎn)是否包含在選區(qū)中。


deleteFromDocument() ：從文檔中刪除選區(qū)中的文本，與 document.execCommand("delete",false, null) 命令的結(jié)果相同。


extend(node, offset) ：通過將 focusNode 和 focusOffset 移動到指定的值來擴(kuò)展選區(qū)。


getRangeAt(index) ：返回索引對應(yīng)的選區(qū)中的 DOM 范圍。


removeAllRanges() ：從選區(qū)中移除所有 DOM 范圍。實(shí)際上，這樣會移除選區(qū)，因?yàn)檫x區(qū)中至少要有一個范圍。


reomveRange(range) ：從選區(qū)中移除指定的 DOM 范圍。


selectAllChildren(node) ：清除選區(qū)并選擇指定節(jié)點(diǎn)的所有子節(jié)點(diǎn)。


toString() ：返回選區(qū)所包含的文本內(nèi)容。



by-《javascript高級程序設(shè)計(jì)》

咱們需要用到的就是getRangeAt()這個屬性,這個屬性返回索引對應(yīng)的選區(qū)中的 DOM 范圍，是一個Range對象這樣就記住了獲取文檔片段的位置。
console一下看看這個屬性所在位置

2. Range.extractContents()

extractContents(),會從文檔中移除范圍選區(qū),并返回范圍的文檔片段，這樣就獲得了想要的文檔片段。

3. Range.insertNode()

insertNode()，是在Range的起始位置插入節(jié)點(diǎn)的方法。詳細(xì)屬性可以自行參考MDN或者高程

console一下看看上兩個屬性所在位置

接下來就上代碼 
//css
 .active {
        background: #00FF90;
    }

//html
 

    積土成山，風(fēng)雨興焉；積水成淵，蛟龍生焉；積善成德，而神明自得，圣心備焉。
    故不積跬步，無以至千里；不積小流，無以成江海。騏驥一躍，不能十步；駑馬十駕，功在不舍。
    鍥而舍之，朽木不折；鍥而不舍，金石可鏤。蚓無爪牙之利，筋骨之強(qiáng)，上食埃土，下飲黃泉，用心一也。
    蟹六跪而二螯，非蛇鱔之穴無可寄托者，用心躁也。
 


//js
function select() {
        let selectedRange = window.getSelection().getRangeAt(0);    //獲取選中文本位置,返回Range對象
        let selectedFragment = selectedRange.extractContents();     //移除選區(qū)文檔片段,并返回
        let span = document.createElement("span");    
        span.classList = "active";
        span.appendChild(selectedFragment);    //創(chuàng)建span標(biāo)簽添加想要的類名,名把返回的文檔片段插入
        selectedRange.insertNode(span);        //在獲取的Range對象中插入span標(biāo)簽
        span.onclick = function(ev) {
            //再點(diǎn)擊span標(biāo)簽,在其前面添加span標(biāo)簽內(nèi)的文本,并刪除這個span標(biāo)簽
            this.parentNode.insertBefore(document.createTextNode(this.innerText), this);
            this.parentNode.removeChild(this);
        };
    }
    document.getElementById("text").onmouseup = function() {
        select();   
        window.getSelection().removeAllRanges();     //鼠標(biāo)松開后取消瀏覽器默認(rèn)的深藍(lán)色選中樣式
    };

在線地址

結(jié)語

DOM2和DOM3的功能遠(yuǎn)不止這些，它有著更加細(xì)膩和多樣的DOM操作，需要我們?nèi)グl(fā)掘和熟悉。
本篇文章為本人的處女篇。在排版和表達(dá)上都還有欠缺，如能對您有所幫助，實(shí)在是感到榮幸。如有不合理之處也請大家多多指點(diǎn)。
謝謝瀏覽。

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

轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/108158.html

相關(guān)文章

  • js高級程序設(shè)計(jì)筆記——DOM擴(kuò)展

    摘要：擴(kuò)展為了實(shí)現(xiàn)更多的功能，會有一些標(biāo)準(zhǔn)或?qū)Ｓ械臄U(kuò)展。標(biāo)準(zhǔn)擴(kuò)展主要有選擇符元素遍歷一選擇符選擇符能夠允許代碼直接根據(jù)選擇符選擇與某個模式匹配的元素。 DOM擴(kuò)展 為了實(shí)現(xiàn)更多的功能，會有一些標(biāo)準(zhǔn)或?qū)Ｓ械腄OM擴(kuò)展。 標(biāo)準(zhǔn)擴(kuò)展主要有： SelectorAPI（選擇符API） HTML5 Element Traversal（元素遍歷） 一、 選擇符API 選擇符API能夠允許J...

    ningwang 評論0 收藏0

  • 《DOM編程藝術(shù)》中CSS—DOM的總結(jié)（三）

    摘要：前言這是系列最后一篇，本文主要總結(jié)了的用法，以及最后對函數(shù)進(jìn)行抽象。一個多說無益，還是上代碼來得實(shí)在還記得編程藝術(shù)中的總結(jié)一中那個無聊的根據(jù)元素在節(jié)點(diǎn)樹里的位置來設(shè)置樣式的吧現(xiàn)在可以用屬性直接更改樣式了。 前言：這是CSS－DOM系列最后一篇，本文主要總結(jié)了className的用法，以及最后對函數(shù)進(jìn)行抽象。 －－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－...

    王巖威 評論0 收藏0

  • 《DOM編程藝術(shù)》中CSS—DOM的總結(jié)（三）

    摘要：前言這是系列最后一篇，本文主要總結(jié)了的用法，以及最后對函數(shù)進(jìn)行抽象。一個多說無益，還是上代碼來得實(shí)在還記得編程藝術(shù)中的總結(jié)一中那個無聊的根據(jù)元素在節(jié)點(diǎn)樹里的位置來設(shè)置樣式的吧現(xiàn)在可以用屬性直接更改樣式了。 前言：這是CSS－DOM系列最后一篇，本文主要總結(jié)了className的用法，以及最后對函數(shù)進(jìn)行抽象。 －－－－－－－－－－－－－－－－－－我是分割線－－－－－－－－－－－－－－－－...

    liukai90 評論0 收藏0

  • 讀后總結(jié)--精通css高級web標(biāo)準(zhǔn)解決方案（第二版）

    摘要：無論是否移動，元素仍然占據(jù)原來的空間。絕對定位絕對定位使元素的位置與文檔流無關(guān)，因此不占據(jù)空間。 為啥讀這本書 現(xiàn)在前端圈子過于浮躁，掌握基礎(chǔ)無疑比掌握一個js框架重要 css怎么都能寫出來，但是要寫的好寫得快還得多讀書 css魔法推薦的，讀完這個讀讀css揭秘 當(dāng)然，根本原因還是覺得自己掌握不好 開始總結(jié)吧~ 一. 基礎(chǔ)知識 經(jīng)過上世紀(jì)沒有 css的痛苦時的混沌時期，人們開始了進(jìn)...

    leone 評論0 收藏0

  • OctoberCMS-8-組件

    摘要：組件是可以配置的構(gòu)建元素?？梢愿郊拥巾撁娌季植考?。組件是的核心特性。每個組件都可以對網(wǎng)站的功能進(jìn)行擴(kuò)展。組件可以在頁面上輸出代碼，但是這不是主要的，組件的一個重要功能是處理請求處理表單提交回調(diào)，處理頁面執(zhí)行周期。 Components Components這里我們稱之為組件。 組件是可以配置的構(gòu)建元素?？梢愿郊拥絇ages（頁面）、Layouts（布局）、Partials（部件）中。...

    scq000 評論0 收藏0

發(fā)表評論

0條評論

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