html5 如何列举公式 html5 range

转载

davisl 2023-11-30 00:42:47

文章标签 html5 如何列举公式 html 删除元素 ci 文章分类 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>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。