[H5]range对象的setStart/setEnd方法

1.setStart:表示某个节点的range对象的起点位置;
2.setEnd:表示某个节点的range对象的结束位置;

示例如下:<body>
    <div id="div">
        这里是第一段文字
    </div>
    <input type="butt on" onclick="dele()" value="删除">
    <script>
        function dele() {
            var div=document.getElementById("div");
            var range=document.createRange();
            var content=div.firstChild;
            range.setStart(content,1);
            range.setEnd(content,7);
            range.deleteContents();
        }
    </script>
</body>

3.setStartBefore:表示用于将某个节点的起点位置设置为range对象的起点位置;
4.setStartAfter:表示用于将某个节点的终点位置设置为range对象的起点位置;
5.setEndBefore:表示用于将某个节点的起点位置设置为range对象的终点位置;
6.setEndAfter:表示用于将某个节点的终点位置设置为range对象的终点位置;

示例如下:

<body><table id="table" border="1" cellspacing="0" cellpadding="0">    <tr>        <td>表格1</td>        <td>表格1</td>        <td>表格1</td>    </tr>    <tr>        <td>表格2</td>        <td>表格2</td>        <td>表格2</td>    </tr>    <tr>        <td>表格3</td>        <td>表格3</td>        <td>表格3</td>    </tr></table><input type="button" onclick="btn()" value="删除第一行"><script>    function btn() {        var table=document.getElementById("table");        var rangeDiv=document.createRange();        if(table.rows.length>0){            var row=table.rows[0];            rangeDiv.setStartBefore(row);            rangeDiv.setEndAfter(row);            rangeDiv.deleteContents();        }

}</script>

时间： 2024-08-26 10:54:56

[H5]range对象的setStart/setEnd方法的相关文章

HTML5中的Range对象的研究

一:Range对象的概念 Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var range = document.createRange(); 在html5中,每一个浏览器窗口及每一个窗口中都有一个selection对象,代表用户鼠标在页面中所选取的区域,(注意:经过测试IE9以下的浏览器不支持Selection对象), 可以通过如下语句创建selection对象: var selection =

html5学习笔记4--API Range对象

Range对象基本用法效果图如下(在谷歌浏览器下的展示) 代码如下 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <script> function test() { var html=""; va

HTML5中的Range对象的研究（转载）

range对象的clone方法

clone:range对象的克隆; <body> <p id="p">这是一段文字</p> <button onclick="btn()">克隆</button> <script> function btn() { var p=document.getElementById("p"); var rangeObj=document.createRange(); rangeObj

HTML5编辑API之Range对象

Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var range = document.createRange(); 在html5中,每一个浏览器窗口及每一个窗口中都有一个selection对象,代表用户鼠标在页面中所选取的区域,(注意:经过测试IE9以下的浏览器不支持Selection对象), 可以通过如下语句创建selection对象: var selection = document.getSel

[html5] 学习笔记-编辑 API 之 Range 对象（一）

1.Range对象的基本概念一个Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改网页上的任何区域. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title></title> 6 </head> 7 <body> 8 <script> 9 function rangeTe

理解HTML5中Range对象

1.理解Range对象重新来学习下HTML5中的Range对象和Selection对象,最近在维护富文本编辑器,感觉这方面的知识点很有用,所以趁着周末多学习下~ 什么是Range对象? 在HTML5中,一个Range对象代表页面上的一段连续区域.可以通过如下语句创建一个空的Range对象.如下代码: var range = document.createRange(); 什么是Selection对象? 在HTML5中,每一个浏览器窗口都有一个Selection对象,代表用户鼠标在页面中

HTML5 页面编辑API之Range对象

在 HTML5 中,一个 Range 对象代表页面上的一段连续区域.通过 Range 对象,可以获取或修改页面上的任何区域.包含获取,修改,删除和替换等操作. 一:获取range对象的值 Range对象提供鼠标选取功能,通过Range对象可以获得选取的内容,以及选取的内容的个数. var s = document.getSelection();//此方法获得选中内容,获取range对象 s.rangeCount;//获得选中个数 1 function rangeText(){ 2 var e_

[html5] 学习笔记- 编辑API之Range对象（二）

本节继续介绍range对象的方法,包括cloneRange,cloneContents,extraContents,createContextual,createContextual-Fragment,insertNode,compareBoundaryPoints,collapse,detach方法. 1.cloneRange,cloneContents,extraContents方法 cloneRange:对当前的range对象复制,返回复制的对象 1 <body> 2 <scrip