HTML5--Range對象的基本操作(5)

本文轉載自查看原文 2018-03-25 12:17 895 HTML5

前言：

　　這節課主要學習HTML5中關於Range對象的常用API。

　　1.Range對象初識

　　　　作用：一個Range對象代表頁面上的一段連續區域。通過Range對象，可以獲取或修改網頁上的任何區域。

　　　　Rnage對象示例：

<body>
    Range對象初識</br>
    <input id="btn" type="button" value="提交">
    <div id="showRange"></div>
    <script>
        function $(ele) {
            return document.getElementById(ele)
        }
        var btn = $('btn')
        var showRange = $('showRange')
        var html;
        btn.onclick = function (){
            // 通過getSelection()方法，獲取selection對象
            var selection = document.getSelection()
            // 通過rangeCount屬性，獲取選中內容的個數
            var count = selection.rangeCount
            html = '你選中了' + count + '段內容.'
            if (count > 0) {
                for (var i = 0; i < count; i++){
                    // 通過getRangeAt()方法，獲取具體range對象
                    var range = selection.getRangeAt(i)
                    html += '第' + (i+1) + '段內容為:' + range + '</br>'
                }
            }
            showRange.innerHTML = html
        }
    </script>
</body>

　　2.Range對象的selectNode/selectNodeContents/deleteContents方法

　　　　方法：

　　　　　　selectNode(node) -- 獲取指定節點

　　　　　　selectNodeContents(node) -- 獲取指定節點內容

　　　　　　deleteContents --- 刪除range選中的節點(或內容)

　　　　Rnage方法示例：

<body>
    <div id="testRange" class="range" style="background-color:pink; width: 50%; height: 40px"> 
        測試Range對象的selectNode、selectNodeContents、deleteContents方法
    </div>
    <button id="btn1" onclick="deleteContents(false)">刪除內容</button>
    <button id="btn2" onclick="deleteContents(true)">刪除元素</button>

    <script>
        function deleteContents (flag) {
            var testRange = document.getElementById('testRange')
            // 創建range對象
            var range = document.createRange()
            if (flag){
                // 獲取當前的元素節點
                range.selectNode(testRange)
                //刪除range選中的內容
                range.deleteContents()
            } else {
                // 獲取當前節點的內容
                range.selectNodeContents(testRange)
                //刪除range選中的內容
                range.deleteContents()
            }
        }
    </script>
</body>

　　3.Range對象的set相關方法

　　　　方法：

　　　　　　setStart(node, index) -- 設置Range對象的起點位置

　　　　　　setEnd(node, index) -- 設置Range對象的結束位置

　　　　　　理解：start/end分別表示Range的起點和終點

　　　　　　　　　Before/After分別表示節點的起點和終點

　　　　　　　　setStartBefore -- 將節點的起點位置設置為Range對象的起點位置

　　　　　　　　setStartAfter -- 將節點的終點位置設置為Range對象的起點位置

　　　　　　　　setEndBefore -- 將節點的起點位置設置為Range對象的終點位置

　　　　　　　　setEndAfter -- 將節點的終點位置設置為Range對象的終點位置

　　　　Rnage方法setStart和setEnd示例：

<body>
    <div id="testRange" class="range" style="background-color:pink; width: 50%; height: 40px"> 
        測試Range對象的set相關方法
    </div>
    <button id="btn1" onclick="deleteChar()">刪除</button>
    <script>
        function deleteChar () {
            var testRange = document.getElementById('testRange')
            var textContent = testRange.firstChild
            // 創建range對象
            var range = document.createRange()
            //設置Range對象的起始位置
            range.setStart(textContent, 1)
            //設置Range對象的結束位置
            range.setEnd(textContent, 4)
            //刪除Range對象選中的內容
            range.deleteContents()
        }
    </script>
</body>

　　Rnage對象的方法setStartBefore/After和setEndBefore/After示例：

<body>
    <table id="myTable" border="1" cellspacing="0" cellpadding="0">
        <tr>
            <td>內容1</td>
            <td>內容2</td>
        </tr>
        <tr>
            <td>內容3</td>
            <td>內容4</td>
        </tr>
    </table>
    <button onclick="deleteRow()">刪除第一行</button>
    <script>
        function deleteRow() {
            var table = document.getElementById('myTable')
            if (table.rows.length > 0){
                //獲取table中的第一行
                var row = table.rows[0]
                //創建range對象
                var range = document.createRange()
                //設置range的起點
                range.setStartBefore(row)
                //設置range的終點
                range.setEndAfter(row)
                range.deleteContents()
            }
        }
    </script>
</body>

　　4.Range對象cloneRange/cloneContents/extractContents的方法

　　　　方法：

　　　　　　cloneRange() -- 克隆Range對象

　　　　　　cloneContents -- 克隆Range對象選中的內容(contents)

　　　　　　extractContents --- 剪切Range對象選中的內容。

　　　　Rnage方法示例：

<body>
    <div id="test" style="background-color:pink; width: 50%; height: 28px;">測試Range對象的cloneRange/cloneContents/extractContents方法</div>
    <div id="test1" style="background-color:yellow; width: 50%; height: 28px;"></div>
    <button onclick="cloneRange()">cloneRange</button>
    <button onclick="cloneContents()">cloneContents</button>
    <button onclick="extractContents()">extractContents</button>
    <script>
        // cloneRange()方法的演示
        function cloneRange() {
            var div = document.getElementById('test')
            // 創建range對象
            var range = document.createRange()
            // 獲取指定節點的內容
            range.selectNodeContents(div)
            // 克隆對應的Range對象
            var cloneRange = range.cloneRange()
            console.log(cloneRange.toString())
        }

        // cloneContents()方法的演示
        function cloneContents() {
            var div = document.getElementById('test')
            // 創建range對象
            var range = document.createRange()
            // 獲取指定節點的內容
            range.selectNodeContents(div)
            // 克隆Range對象中選中節點的內容(此處的內容就是div元素)
            var cloneContents = range.cloneContents()
            div.appendChild(cloneContents)
        }

        // extractContents()方法的演示
        function extractContents() {
            var div = document.getElementById('test')
            var div1 = document.getElementById('test1')
            // 創建range對象
            var range = document.createRange()
            // 獲取指定節點的內容
            range.selectNodeContents(div)
            // 克隆對應的節點
            var extractContents = range.extractContents()
            div1.appendChild(extractContents)
        }
    </script>
</body>

　　5.Range對象collapse/detach的方法

　　　　方法：

　　　　　　collapse -- 設置range對象對元素的選擇狀態

　　　　　　detach --- 釋放range對象(不再需要的時候)

　　　　Rnage方法示例：

<body>
    <div id="div" style="background-color: pink; width: 300px; height: 50px">測試Range的選中取消功能</div>
    <button onclick="select()">選擇元素</button>
    <button onclick="unselect()">取消選擇</button>
    <button onclick="showContents()">顯示選中內容</button>

    <script>
        var range = document.createRange()
        function select () {
            var div = document.getElementById('div')
            range.selectNode(div)
            // 釋放掉創建的range對象(不再需要的時候)
            // range.detach()
        }
        function unselect () {
            var div = document.getElementById('div')
            // 取消range選中的內容
            range.collapse(false)
        }
        function showContents () {
            console.log(range.toString())
        }
    </script>
</body>

　　6.Range對象insertNode/compareBoundaryPoints的方法

　　　　方法：

　　　　　　insertNode(node) -- 將參數中的節點移動到range對象的起始位置處

　　　　　　compareBoundaryPoints --- 比較兩個Range對象的相對位置

　　　　Rnage方法示例：

<body>
    <div id="div" style="background-color: pink; width: 300px; height: 50px">測試Range的<b id="boldText">選中</b>取消功能</div>
    <button onclick="insert()" id="btn">insert</button>
    <button onclick="compareBoundary()" id="btn">compare</button>
    <script>
        // 移動元素位置方法
        function insert() {
            var btn = document.getElementById('btn')
            var selection = document.getSelection()
            var range = selection.getRangeAt(0)
            // 將btn按鈕重新移動到鼠標選中的地方
            range.insertNode(btn)
        }

        // 判斷range起/終點位置方法
        function compareBoundary() {
            var boldText = document.getElementById('boldText')
            var range = document.createRange()
            range.selectNodeContents(boldText.firstChild)
            var selection = document.getSelection()
            var range1 = selection.getRangeAt(0)
            if (range1.compareBoundaryPoints(Range.START_TO_END, range) <= 0) {
                console.log("選取的文字在粗體前面")
            } else if (range1.compareBoundaryPoints(Range.END_TO_START, range) >= 0){
                console.log("選取的文字在粗體后面")
            } 
        }
    </script>
</body>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 HTML表格的基本操作 JS — 對象的基本操作 pandas對DataFrame對象的基本操作 HTML5中的Range對象的研究理解HTML5中Range對象 php與html實現交互的基本操作 js中的對象類型的基本操作 HTML屬性操作（對象屬性）【NX二次開發】NX對象類型及基本操作 js實現map對象的基本操作方法