简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > Web Front-end > H5 Tutorial > body text

API range object

高洛峰
Release： 2017-02-09 14:48:50
Original
1521 people have browsed it

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>
Copy after login

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

Related labels：
api range
source：php.cn
Previous article：selectNode and other methods of range object Next article：HTML5 Shiv--How to solve the incompatibility of IE (IE6/IE7/IE8) with HTML5 tags
Statement of this Website
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
Latest Articles by Author
Latest Issues
Trouble getting specific statistics (Stats) from PokeAPI using Axios and Node.js I have a problem, I'm trying to use the PokemonAPI, but when I try to access the attack, H...
From 2024-04-06 18:46:35
0
1
464
API works on postman but refuses to connect in Flutter postRequest()async{Map\<String,dynamic\>map={'email':'[email&#160;protected]','p...
From 2024-04-06 14:08:33
0
1
340
The execution order of VueJS scheduling functions causes problems I'm trying to display a list of announcements (retrieved from API) on a page. I'm using a ...
From 2024-04-06 10:37:58
0
1
385
Nuxt 3 won't render in SSR So I've run into a problem where I'm trying to get my private environment variables. I kno...
From 2024-04-05 15:04:40
0
1
3642
Push objects to array, composable API There is a project. There are two selection options "size" (large, small) and qu...
From 2024-04-05 14:41:47
0
1
1526
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！