功效图如下(在谷歌浏览器下的展现),在火狐浏览器下的显得

在火狐浏览器下的彰显

Range对象之SelectNode和selectNodeContents方法

 

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        table,tr,td
        {
            border:1px solid;
        }
    </style>
</head>
<body>
<script>
    function deleteContent()
    {
        var tableElement=document.getElementById("tb");
        if(tableElement.rows.length>0)
        {
            var range=document.createRange();
            var row=tableElement.rows[0];
            range.setStartBefore(row);
            range.setEndAfter(row);
            range.deleteContents();
        }
    }
</script>
<table id="tb" style="border:1px solid;">
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
</table>
<button onclick="deleteContent()">删除table行</button>
</body>
</html>

Range对象之setStartBefore和setEndAfter方法

代码如下

该实例中定义了table的上马地点和终结地点来删除.

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    function test()
    {
        var html="";
        var showRange=document.getElementById("test");
        selection=document.getSelection();
        if (selection.rangeCount <= 0) {
        } else {
            for (var i = 0; i < selection.rangeCount; i++) {
                var range = selection.getRangeAt(i);
                html+="您选取的内容为["+range+"]</br>";
            }
            showRange.innerHTML=html;
        }
    }
</script>
<p>为中国奥运健儿加油</p>
<input type="button" onclick="test()" value="点击"/>
<div id="test"></div>
</body>
</html>

Range对象基本用法

Range对象基本用法

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        table,tr,td
        {
            border:1px solid;
        }
    </style>
</head>
<body>
<script>
    function deleteContent()
    {
        var tableElement=document.getElementById("tb");
        if(tableElement.rows.length>0)
        {
            var range=document.createRange();
            var row=tableElement.rows[0];
            range.setStartBefore(row);
            range.setEndAfter(row);
            range.deleteContents();
        }
    }
</script>
<table id="tb" style="border:1px solid;">
    <tr>
        <td>第一行第一列</td>
        <td>第一行第二列</td>
    </tr>
    <tr>
        <td>第二行第一列</td>
        <td>第二行第二列</td>
    </tr>
</table>
<button onclick="deleteContent()">删除table行</button>
</body>
</html>

代码如下

为啥会并发那种状态吗,因为火狐浏览器下能够针对不总是的始末多选.

图片 1

成效图如下

图片 2

作用图如下

我们误以为是会删除”中华夏族民共和中国奥林匹克足球队林匹克运动”多个字,不过事实上删除的只有“中国奥林匹克足球队林匹克运动”.

Range对象之setStart和setEnd方法

Range对象之setStart和setEnd方法

图片 3

图片 4

Range对象之SelectNode和selectNodeContents方法

为何会冒出那种情景呢,因为火狐浏览器下得以本着不连续的始末多选.

图片 5

效率图如下

图片 6

代码内容如下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    function deleteRangeContent(statusContent)
    {
      var div=document.getElementById("range");
        var rangeObject=document.createRange();
        if(statusContent)
        {
            rangeObject.(div);
            rangeObject.deleteContents();
        }
        else
        {
            rangeObject.selectNode(div);
            rangeObject.deleteContents();
        }
    }
</script>
<div style="width:300px;height: 30px;background-color: #ec7dff" id="range">查看效果</div>
<input type="button" onclick="deleteRangeContent(true)" value="删除div内部内容"/>
<input type="button" onclick="deleteRangeContent(false)" value="删除div及内部内容"/>
</body>
</html>

图片 7

成效图如下

在火狐浏览器下的展示

图片 8

图片 9

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    function deleteFromEnd()
    {
        var textNode=document.getElementById("test").firstChild;
        var rangeObject=document.createRange();
        rangeObject.setStart(textNode,1);
        rangeObject.setEnd(textNode,4);
        rangeObject.deleteContents();
    }
</script>
<div id="test">中国奥运军团是所向披靡的战无不胜的</div>
<button onclick="deleteFromEnd()">删除</button>
</body>
</html>

Range对象之setStartBefore和setEndAfter方法

成效图如下(在谷歌浏览器下的显得)

代码内容如下:

代码内容如下:

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    function deleteFromEnd()
    {
        var textNode=document.getElementById("test").firstChild;
        var rangeObject=document.createRange();
        rangeObject.setStart(textNode,1);
        rangeObject.setEnd(textNode,4);
        rangeObject.deleteContents();
    }
</script>
<div id="test">中国奥运军团是所向披靡的战无不胜的</div>
<button onclick="deleteFromEnd()">删除</button>
</body>
</html>

我们误以为是会去除”中中原人民共和中国奥林匹克足球队林匹克运动”多少个字,可是实际上删除的唯有“中国奥林匹克足球队林匹克运动”.

 

图片 10

该实例中定义了table的伊始地方和终止地点来删除.

selectNodeContents是选定div里边的始末,selectNode是选定div包含内部的内容.

效益图如下

代码内容如下

作用图如下

代码如下

功用图如下(在谷歌(谷歌(Google))浏览器下的来得)

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    function test()
    {
        var html="";
        var showRange=document.getElementById("test");
        selection=document.getSelection();
        if (selection.rangeCount <= 0) {
        } else {
            for (var i = 0; i < selection.rangeCount; i++) {
                var range = selection.getRangeAt(i);
                html+="您选取的内容为["+range+"]</br>";
            }
            showRange.innerHTML=html;
        }
    }
</script>
<p>为中国奥运健儿加油</p>
<input type="button" onclick="test()" value="点击"/>
<div id="test"></div>
</body>
</html>

selectNodeContents是选定div里边的剧情,selectNode是选定div包涵内部的内容.

代码如下

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<script>
    function deleteRangeContent(statusContent)
    {
      var div=document.getElementById("range");
        var rangeObject=document.createRange();
        if(statusContent)
        {
            rangeObject.(div);
            rangeObject.deleteContents();
        }
        else
        {
            rangeObject.selectNode(div);
            rangeObject.deleteContents();
        }
    }
</script>
<div style="width:300px;height: 30px;background-color: #ec7dff" id="range">查看效果</div>
<input type="button" onclick="deleteRangeContent(true)" value="删除div内部内容"/>
<input type="button" onclick="deleteRangeContent(false)" value="删除div及内部内容"/>
</body>
</html>

相关文章