[H5]API之range对象】的更多相关文章

range对象:是一种fragment(HTML片断),它包含了节点或文本节点的一部分.一般情况下,同一时刻页面中只可能 有一个range,也有可能是多个range(使用Ctrl健进行多选,不过有的浏览器不允许,例如Chrome). 可以从selection中获得range对象,也可以使用document.createRange()方法获得1.getSelection():获取页面选中的信息;2.rangeCount:区间数,选中几个内容;3.selection.rangeCount;4.sel…
 一.Range 对象基本概念 通过使用 Range 对象所提供的方法实现一个鼠标选取内容,通过点击按钮打印出选中内容,当然注意在不同的浏览器下可选中的内容数量是不同的. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <scr…
本节继续介绍range对象的方法,包括cloneRange,cloneContents,extraContents,createContextual,createContextual-Fragment,insertNode,compareBoundaryPoints,collapse,detach方法. 1.cloneRange,cloneContents,extraContents方法 cloneRange:对当前的range对象复制,返回复制的对象 <body> <script>…
1.Range对象的基本概念 一个Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改网页上的任何区域. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <script> function rangeTest(){ var html; sh…
在 HTML5 中,一个 Range 对象代表页面上的一段连续区域.通过 Range 对象,可以获取或修改页面上的任何区域.包含获取,修改,删除和替换等操作. 一:获取range对象的值 Range对象提供鼠标选取功能,通过Range对象可以获得选取的内容,以及选取的内容的个数. var s  = document.getSelection();//此方法获得选中内容,获取range对象 s.rangeCount;//获得选中个数 function rangeText(){ var e_show…
Range对象代表页面上的一段连续区域,通过Range对象,可以获取或修改页面上的任何区域,可以通过如下创建一个空的Range对象,如下: var  range = document.createRange(); 在html5中,每一个浏览器窗口及每一个窗口中都有一个selection对象,代表用户鼠标在页面中所选取的区域,(注意:经过测试IE9以下的浏览器不支持Selection对象), 可以通过如下语句创建selection对象: var  selection = document.getS…
1.Range.cloneContents()The Range.cloneContents() returns a DocumentFragment copying the objects of type Node included in the Range. SyntaxdocumentFragment = range.cloneContents(); Examplerange = document.createRange();range.selectNode(document.getEle…
1.2.8  html5编辑api之range对象(一) 1.2.8.1  Range 对象基本概念 Range 对象的基本概念,通过使用 Range 对象所提供的方法实现一个鼠标选取内容,通过点击按钮打印出选中内容,当然注意在不同的浏览器下可选中的内容数量是不同的. <script> function rangeTest() { var html; showRangeDiv = document.getElementById("showRange"); selection…
range对象的extractContents()方法: extractContents() 方法删除文档内容,并以 DocumentFragment 对象的形式返回它; DocumentFragment配合range对象:相当于剪切.复制.粘贴其子孙节点 <body> <div id="div1" style="background: greenyellow;width: 200px; height:100px;">这里有一段文字</…
clone:range对象的克隆; <body> <p id="p">这是一段文字</p> <button onclick="btn()">克隆</button> <script> function btn() { var p=document.getElementById("p"); var rangeObj=document.createRange(); rangeObj…