zoukankan      html  css  js  c++  java
  • range

    #获得选区:
    DOM标准 (支持多个选择)
    var selection=window.getSelection().getRangeAt(0)
    IE:
    var selection=document.selection;//ie创建跟或得是一样的
    #通过选区获得选择范围操作对象
    DOM标准
    var range=selection.getRangeAt(0);
    IE:
    var range=selection.createRange();

    #创建选区:
    dom标准:
    document.implementation.hasFeature("Range", "2.0");//判断是偶支持DOM标准
    document.createRange();//DOM标准创建的方法,方法在document上
    range.selectNode(node);//设置内容及上一级为选择区域
    range.selectNodeContents(node);//设置内容为选择区域
    IE://IE8及以下只支持文本选择,即所有的选择均当文本
    var range= = document.selection.createRange(); //TextRange,方法在selection上
    range.moveToElementText(node);//设置节点里面的文本为选区
    document.body.createTextRange();//TextRange,以BODY为对象创建一个范围
    得到选区:
    DOM标准:
    collapsed 如果范围的开始点和结束点在文档的同一位置,则为 true,即范围是空的,或折叠的。
    commonAncestorContainer 范围的开始点和结束点的(即它们的祖先节点)、嵌套最深的 Document 节点。
    endContainer 包含范围的结束点的 Document 节点。
    endOffset endContainer 中的结束点位置。
    startContainer 包含范围的开始点的 Document 节点。
    startOffset startContainer 中的开始点位置。
    IE:
    boundingHeight 获取绑定 TextRange 对象的矩形的高度。
    boundingLeft 获取绑定 TextRange 对象的矩形左边缘和包含 TextRange 对象的左侧之间的距离。
    boundingTop 获取绑定 TextRange 对象的上边缘和包含 TextRange 对象的顶边之间的距离。
    boundingWidth Retrieves the width of the rectangle that bounds the TextRange object.
    htmlText 获取绑定 TextRange 对象的矩形的宽度。
    offsetLeft 获取对象相对于版面或由 offsetParent 属性指定的父坐标的计算左侧位置。
    offsetTop 获取对象相对于版面或由 offsetTop 属性指定的父坐标的计算顶端位置。
    text 设置或获取范围内包含的文本。
    可以把range对象放置于selection上,IE的selection对象也有对应的方法
    selection.anchorNode
    selection.anchorOffset
    selection.focusNode
    selection.focusOffset

    操作选区:
    DOM标准:
    cloneContents() 返回新的 DocumentFragment 对象,它包含该范围表示的文档区域的副本。
    cloneRange() 创建一个新的 Range 对象,表示与当前的 Range 对象相同的文档区域。
    collapse() 折叠该范围,使它的边界点重合。true时折叠到Range边界的首部,为false时折叠到Range尾部
    compareBoundaryPoints() 比较指定范围的边界点和当前范围的边界点,根据它们的顺序返回 -1、0 和 1。比较哪个边界点由它的第一个参数指定,它的值必须是前面定义的常量之一。
    deleteContents() 删除当前 Range 对象表示的文档区域。
    detach() 通知实现不再使用当前的范围,可以停止跟踪。如果调用了范围的这个方法,那么接下来调用的该范围任何方法都会抛出代码为 INVALID_STATE_ERR 的 DOMException 异常。
    extractContents() 删除当前范围表示的文档区域,并且以 DocumentFragment 对象的形式返回那个区域的内容。该方法和 cloneContents() 方法与 deleteContents() 方法的组合很相似。
    insertNode() 在文档范围开始点插入指定的节点。
    selectNode() 设置该范围的边界点,使它包含指定的节点和它的所有子孙节点。
    selectNodeContents() 设置该范围的边界点,使它包含指定节点的子孙节点,但不包含指定的节点本身。
    setEnd() 把该范围的结束点设置为指定的节点和偏移量。
    setEndAfter() 把该范围的结束点设置为紧邻指定节点的节点之后。
    setEndBefore() 把该范围的结束点设置为紧邻指定节点之前。
    setStart() 把该范围的开始点设置为指定的节点中的指定偏移量。
    setStartAfter() 把该范围的开始点设置为紧邻指定节点的节点之后。
    setStartBefore() 把该范围的开始点设置为紧邻指定节点之前。
    surroundContents() 把指定的节点插入文档范围的开始点,然后重定范围中的所有节点的父节点,使它们成为新插入的节点的子孙节点。(有问题!!!)
    toString() 返回该范围表示的文档区域的纯文本内容。(相当于IE的innerText)
    IE:
    collapse 将插入点移动到当前范围的开始或结尾。
    compareEndPoints 比较 TextRange 对象的结束点和其它范围的结束点。
    duplicate 返回 TextRange 的副本。
    execCommand 在当前文档、当前选中区或给定范围上执行命令。
    expand 扩展范围以便完全包含指定单位的范围。
    findText 在文本中搜索文本并将范围的开始和结束点设置为包围搜索字符串。
    getBookmark 获取可用于使 moveToBookmark 返回相同范围的书签(白底字符串)。
    getBoundingClientRect 获取指定 TextRectangle 对象集合绑定的对象。
    getClientRects 获取描述对象内容或客户区内布局的矩形集合。每个矩形都描述了一条直线。
    inRange 返回一个范围是否被另一个范围包含。
    isEqual 返回指定范围是否与当前范围相等。
    move 折叠给定文本范围并将空范围移动给定单位数。
    moveEnd 更改范围的结束位置。
    moveStart 更改范围的开始位置。
    moveToBookmark 移动到书签。
    moveToElementText 移动文本范围以便范围的开始和结束位置能够完全包含给定元素的文本。
    moveToPoint 将文本范围的开始和结束位置移动到给定点。
    parentElement 获取给定文本范围的父元素。
    pasteHTML 将 HTML 文本粘贴入给定文本范围,替换范围内任何先前的文本和 HTML 元素。
    queryCommandEnabled 返回表明指定命令是否可于给定文档当前状态下使用 execCommand 命令成功执行的 Boolean 值。
    queryCommandIndeterm 返回表明指定命令是否处于模糊状态的 Boolean 值。
    queryCommandState 返回表明命令当前状态的 Boolean 值。
    queryCommandSupported 返回表明当前命令是否在当前区域上支持的 Boolean 值。
    queryCommandValue 返回文档、范围或当前选中区对于给定命令的当前值。
    scrollIntoView 将对象滚动到可见范围内,将其排列到窗口顶部或底部。
    select 将当前选中区置为当前对象。
    setEndPoint 根据其它范围的结束点设置某范围的结束点。


    nodeType:
    1 Element
    2 Attribute
    3 Text
    4 CDATA Section
    5 Entity Reference
    6 Entity
    7 Processing Instrucion
    8 Comment
    9 Document
    10 Document Type
    11 Document Fragment
    12 Notation

  • 相关阅读:
    Python基础教程【读书笔记】
    Python基础教程【读书笔记】
    Python基础教程【读书笔记】
    Python基础教程【读书笔记】
    JS实现焦点图轮播效果
    JQuery+CSS3实现Ajax加载时loading效果
    JQuery实现锚点平滑滚动
    CSS3之嵌入Web字体
    HTML5本地存储
    impress.js初体验——前端装X利器
  • 原文地址:https://www.cnblogs.com/liushannet/p/3174813.html
Copyright © 2011-2022 走看看