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

前言:

  这节课主要学习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>

 

posted @ 2018-03-25 12:17  诸葛不亮  阅读(1921)  评论(0编辑  收藏  举报