Home > Article > Web Front-end > API range object

API range object

高洛峰Original: 2017-02-09 14:48:501473browse

range object:
is a fragment (HTML fragment), which contains a node or part of a text node. Under normal circumstances, there may be only one range on the page at the same time, or there may be multiple ranges (use the Ctrl key for multiple selections, but some browsers do not allow it, such as Chrome).
You can get the range object from the selection, or you can use the document.createRange() method to get it
1.getSelection(): Get the selected information on the page;
2.rangeCount: The number of intervals, how many contents are selected ;
3.selection.rangeCount;
4.selection.getRangeAt(i);
##5.createRange() method creates a range object;

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>range对象</title>
</head>
<body>
    selection对象和range对象
    <input type="button" value="点击" onclick="use()">
    <div id="rangeDiv"></div>
    <script>
        function use() {
            var html;
            rangeDiv=document.getElementById("rangeDiv");
            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/>";
                }
                rangeDiv.innerHTML=html;
            }
        }
    </script>
</body>
</html>

More API ranges For object-related articles, please pay attention to the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：selectNode and other methods of range objectNext article：selectNode and other methods of range object

See more

API range object

Related articles