HTML5 编辑 API 之 Range 对象

来源：互联网发布：包装结构设计软件编辑：程序博客网时间：2024/05/16 05:37

HTML5 编辑 API 之 Range 对象

HTML5 编辑 API 之 Range 对象
- Range对象基本概念
  - Range对象基本概率
  - Range方法之SelectNode方法
  - setStartsetEnd方法
  - setStartBeforesetEndAfter等方法
- cloneRangecloneContentsextractContents方法
  - cloneRange方法
  - cloneContents方法介绍
  - extractContents方法
- insertNode方法compareBoundaryPoints方法
  - insertNode方法
  - compareBoundaryPoints方法
- collapsedetach方法

Range对象基本概念

Range对象基本概率

一个Range对象代表页面上一段连续区域。
通过Range对象，可以获取或修改网页上的任何区域。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>range对象</title>    </head>    <body>        <script>            function rangeTest(){                var html;                showRangeDiv = document.getElementById("showRange");                Selection = document.getSelection();                if(Selection.rangeCount>0){                    html = "你选取了" +selection.rangeCount+"内容<br/>";                    for(var i=0;i<selection.rangeCount;i++){                        var range = selection.getRangeAt(i);                        html+="第"+(i+1)+"段内容为："+range+"<br/>";                    }                    showRangeDiv.innerHTML = html;                }            }        </script>        selection 对象与range对象的使用        <input type="button" value="点击我" onclick="rangeTest()" />        <div id="showRange"></div>    </body></html>

Range方法之SelectNode方法

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>range selectNode方法</title>    </head>    <body>        <script>            function deleteRangeContent(onlyContent){                var div = document.getElementById("div");                var rangeObj = document.createRange();                if(onlyContent){                    rangeObj.selectNodeContents(div);                    rangeObj.deleteContents();                }else{                    rangeObj.selectNode(div);                    rangeObj.deleteContents();                }            }        </script>        <div id="div" style="background-color: #e0a0b0;width: 300px;height: 50px;">            元素中的内容        </div>        <button onclick="deleteRangeContent(true)">删除内容</button>        <button onclick="deleteRangeContent(false)">删除元素</button>    </body></html>

这里写图片描述
选择删除内容这会删除掉“元素中的内容”这几个字
选择删除元素就会删除掉整个红色的地板和文字。

setStart、setEnd方法

通过setStart和setEnd来确定Range对象的内容。再将其进行删除等操作。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>range setStart、setEnd</title>    </head>    <body>        <script>            function deleteChar(){                var div = document.getElementById("myDiv");                var textNode = div.firstChild;                var rangeObj = document.createRange();                rangeObj.setStart(textNode,1);                rangeObj.setEnd(textNode,4);                rangeObj.deleteContents();            }        </script>        <div id="myDiv" style="color: red;">            这段字是用来删除的        </div>        <button onclick="deleteChar()">删除文字</button>    </body></html>

这里写图片描述
点击“删除文字”之后，“这段字”就会被删除掉。

setStartBefore、setEndAfter等方法

setStartBefore（row）Range对象在row之前开始，
setEndAfter（row）Range对象在row之后结束。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>setStartBefore\setEndAfter</title>    </head>    <body>        <script>            function deleteRow(){                var table = document.getElementById("mytable");                if(table.rows.length>0){                    var row = table.rows[0];                    var rangeObj = document.createRange();                    rangeObj.setStartBefore(row);                    rangeObj.setEndAfter(row);                    rangeObj.deleteContents();                }            }        </script>        <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>    </body></html>

这里写图片描述
点击“删除第一行”之后，第一行的内容1和内容2 被删除掉。

cloneRange、cloneContents、extractContents方法

cloneRange方法

通过cloneRange（）方法，把原有的p标签中的内容Range对象克隆过来，并通过alert（）把克隆对象显示出来。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>cloneRange</title>    </head>    <body>        <script>            function cloneRange(){                var rangeObj = document.createRange();                rangeObj.selectNodeContents(document.getElementById("p"));                var rangeClone = rangeObj.cloneRange();                alert(rangeClone.toString());            }        </script>        <p id="p">这是测试内容</p>        <button onclick="cloneRange()">克隆</button>    </body></html>

这里写图片描述

cloneContents方法介绍

var docFrangMent = rangeObj.cloneContents()将原Range对象的所有内容拷贝出来，再通过div.appendChild(docFrangMent);将拷贝的内容添加到div模块中。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>cloneContents</title>    </head>    <body>        <script>            function cloneContent(){                var div = document.getElementById("div");                var rangeObj = document.createRange();                rangeObj.selectNodeContents(div);                var docFrangMent = rangeObj.cloneContents();                div.appendChild(docFrangMent);            }        </script>        <div id="div">            你好么？            <br />            <button onclick="cloneContent()">克隆</button>            <br />        </div>    </body></html>

这里写图片描述

点击“克隆”之后，会将div中的内容复制一份。并且div中的内容得到了改变。

extractContents方法

通过var docFragment = rangeObj.extractContents() 实现内容的剪切。通过distDiv.appendChild(docFragment)实现内容的粘贴。

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>extractContents方法</title>    </head>    <body>        <script>            function moveContent(){                var srcDiv = document.getElementById("srcDiv");                var distDiv = document.getElementById("distDiv");                var rangeObj = document.createRange();                rangeObj.selectNodeContents(srcDiv); //range代表srcDiv的内容                var docFragment = rangeObj.extractContents();  //range像是指针对象，会修改原变量                distDiv.appendChild(docFragment);            }        </script>        <div id="srcDiv" style="background-color: aqua;width: 300px;height: 50px;">测试内容</div>        <div id="distDiv" style="background-color:bbisque;width: 300px;height: 50px;"></div>        <button onclick="moveContent()">移动元素</button>    </body></html>

这里写图片描述
点击“移动元素”之后，“测试内容”四个字从蓝底模块移动到了白底模块。

insertNode方法、compareBoundaryPoints方法

insertNode方法

通过点击，随意移动按钮
var range = selection.getRangeAt(0)找到位置？
range.insertNode(btn)插入按键

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>insertNode</title>    </head>    <body>        <script>            function moveButton(){                var btn = document.getElementById("button");                var selection = document.getSelection(); //              get到的这个selection指的是什么，鼠标选择到的内容？                if(selection.rangeCount>0){//                  选择内容不为空                    var range = selection.getRangeAt(0); //传0 是什么意思？                    range.insertNode(btn); //指定插入内容为btn                }            }        </script>        <div onmouseup="moveButton()" style="width: 400px;background-color: bisque;">            这是测试的内容，只是测试而已。        </div>         <!--onmouseup 事件会在鼠标松开时发生-->        <button id="button">按钮</button>    </body></html>

这里写图片描述
点哪儿，按键就会移动到哪儿。

compareBoundaryPoints方法

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>compareBoundaryPoints</title>    </head>    <body>        <script>            function testPlace(){                var boldText = document.getElementById("boldText");                var boldRange = document.createRange();                boldRange.selectNodeContents(boldText.firstChild);//              这个range对象代表的是boldText.的firstChild                var selection = document.getSelection();                if(selection.getRangeCount>0){                     var selRange = selection.getRangeAt(0);  //第一个选择对象                    if(selRange.compareBoundaryPoints(Range.START_TO_END,boldRange)<=0){                        alert("选取的文字在粗体前面");                    }else if(selRang.compareBoundaryPoints(Range.END_TO_START,boldRange)>=0){                        alert("选取的文字在粗体后面");                    }                }            }        </script>        这是一段文字，一段用来<b id="boldText">测试</b>的文字。        <br />        <button onclick="testPlace() ">位置比较 </button>    </body></html>

这里写图片描述

collapse、detach方法

rangeObj.collapse(false)显示取消选中的内容

<!DOCTYPE html><html>    <head>        <meta charset="UTF-8">        <title>collapse</title>    </head>    <body>        <script>            var rangeObj = document.createRange();            function selectRangContents(){                var div = document.getElementById("div");                rangeObj.selectNode(div);            }            function nuselect(){                rangeObj.collapse(false);            }            function showRange(){                alert(rangeObj.toString());            }        </script>        <div id="div" style="background-color:bisque;width: 300px;height: 50px;">元素的内容</div>        <button onclick="selectRangContents()">选择元素</button>        <button onclick="nuselect()">取消元素</button>        <button onclick="showRange()">显示range内容</button>    </body></html>

这里写图片描述
点击“选择元素”-“显示range内容”则显示如上。
点击“选择元素”-“取消选择”-“显示range内容”则显示如下。

本博客内容到此结束，欢迎交流讨论！

阅读全文

1 0