RELATEED CONSULTING
相关咨询
选择下列产品马上在线沟通
服务时间:8:30-17:00
你可能遇到了下面的问题
关闭右侧工具栏

新闻中心

这里有您想知道的互联网营销解决方案
var selectAll = document.querySelector("#selectAll");
var selObj = window.getSelection();
selObj.selectAllChildren(selectAll);
  • setBaseAndExtent(anchorNode,anchorOffset,focusNode,focusOffset)

    选中两个特定 DOM 节点之间的内容。

    参数:

    anchorNode: 选中内容的开始节点    
    anchorOffset:选区起始位置在 anchorNode 内的偏移量。  
    如果 anchorNode 是文本节点,表示选区起始位置在该节点第几个字符位置。  
    如果 anchorNode 是元素节点,表示选区起始位置在该节点内第几个子节点的位置。      
    focusNode: 选中内容的结束节点      
    focusOffset: 选区终止位置在 focusNode 内的偏移量。      
    如果 focusNode 是文本节点,表示选区终止位置在该节点第几个字符位置。    
    如果 focusNode 是元素节点,表示选区终止位置在该节点内第几个子节点的位置。

  • 示例:
    var start = document.querySelector("#start");
    var end = document.querySelector("#end");
    var selObj = window.getSelection();
    selObj.setBaseAndExtent(start,0,end,0);
    • toString()

      返回代表当前 Selection 对象的字符串,例如当前选择的文本。

      参数:

      示例:
      var selObj = window.getSelection();
      selObj.toString();

    Range 对象

    Range 对象表示被选中的文档片段。一个 Range 对象可能包含整个元素节点,也可能包含元素节点的一部分,例如文本节点的一部分文字。用户通常只能选择一个 Range 对象,但是有的时候用户也有可能选择多个 Range 对象(只有火狐浏览器可以选择多个 Range 对象)。

    可以用 Document 对象的 Document.createRange 方法创建 Range,也可以用 Selection 对象的 getRangeAt 方法获取 Range。另外,还可以通过 Document 对象的构造函数 Range() 来得到 Range

    属性:

    • collapsed:   返回一个表示起始位置和终止位置是否相同的 Boolean 值。

    • commonAncestorContainer:   返回包含 startContainer 和 endContainer 的最深一级的节点。

    • endContainer:   返回包含 Range 终点位置的节点。

    • endOffset:

      • 如果 endContainer 是文本节点、注释节点,返回该节点第一个字到选区边界的字符个数(即被选中的字符个数)。

      • 如果 endContainer 是元素节点,返回选区终止位置之后第一个节点之前的同级节点总数。

    • startContainer:  返回包含 Range 开始位置的节点。

    • startOffset:

      • 如果 startContainer 是文本节点、注释节点,返回该节点第一个字到选区边界的字符个数(即未被选中的字符个数)。

      • 如果 startContainer 是元素节点,返回选区起始位置第一个节点之前的同级节点总数。

    注意:    

    以上所有属性都是只读属性

    方法:

    • cloneContents()

      返回一个文档片段,它是 Range 对象中所有节点的副本。

      参数:

      示例:
      // 在文档中插入选中元素
      var selObj = window.getSelection();
      var rangeObj  = selObj.getRangeAt(0);
      documentFragment = rangeObj.cloneContents();
      document.body.appendChild(documentFragment);
    • cloneRange()

      返回一个 Range 对象的副本(两个对象各自做出改变,都不会影响另一方)。

      参数:

      示例:
      var selObj = window.getSelection();
      var rangeObj  = selObj.getRangeAt(0);
      clone = rangeObj.cloneRange();
    • collapse(toStart)

      向开始或结束方向折叠 Range 。

      参数:

      toStart: 可选,Boolean 值(默认值 false), true 折叠到 Range 的开始方向,false 折叠到结束方向。

      示例:
      var selObj = window.getSelection();
      var rangeObj  = selObj.getRangeAt(0);
      rangeObj.collapse(true);
    • compareBoundaryPoints(how, sourceRange)

      比较两个 Range 对象的起始位置节点或结束位置节点。

      参数:

      how 表示比较方法的常量:

        Range.END_TO_END :比较 sourceRange 对象的结束位置节点和原 Range 对象的结束位置节点。
        Range.END_TO_START :比较 sourceRange 对象的结束位置节点和原 Range 对象的起始位置节点。
        Range.START_TO_END :比较 sourceRange 对象的起始位置节点和原 Range 对象的结束位置节点。
        Range.START_TO_START :比较 sourceRange 对象的起始位置节点和原 Range 对象的起始位置节点。

      sourceRange: 一个与原 Range 对象比较的 Range 对象。

      返回值

      compare 表示一个数字:

        -1 :原 Range 对象的比较节点在 sourceRange 对象的比较节点之前  
        0 :原 Range 对象的比较节点在 sourceRange 对象的比较节点的相同位置   
        1 :原 Range 对象的比较节点在 sourceRange 对象的比较节点之后
      示例:
      range
    sourceRange
    var range, sourceRange, compare;
    range = document.createRange();
    range.selectNode(document.querySelector("#rang"));
    sourceRange = document.createRange();
    sourceRange.selectNode(document.querySelector("#sourceRange"));
    compare = range.compareBoundaryPoints(Range.START_TO_END, sourceRange);
    • comparePoint(referenceNode,offset)

      判断指定节点是在 Range 对象的之前、相同还是之后位置。

      参数:

      referenceNode: 与 Range 对象进行比较的节点。  
      offset: 在 referenceNode 内的偏移量。    
      如果 referenceNode 是文本节点、注释节点,offset 表示在该节点中字符的偏移位置。  
      如果 referenceNode 是元素节点,offset 表示在该节点中子元素的偏移位置。

      示例:
      range
    referenceNode
    range = document.createRange();
    range.selectNode(document.querySelector("#range"));
    returnValue = range.comparePoint(document.querySelector("#referenceNode"), 0);
  • createContextualFragment(tagString)

    将 HTML 字符串转换为文档片段

    参数:

    tagString: 要转换的 HTML 字符串。

    示例:
    var tagString = "
    node
    "; var range = document.createRange(); var documentFragment = range.createContextualFragment(tagString); document.body.appendChild(documentFragment);
  • deleteContents()

    从 DOM 中删除选中的文档片段,不返回删除的文档片段。

    参数:

    示例:
    var selObj = window.getSelection();
    var rangeObj  = selObj.getRangeAt(0);
    rangeObj.deleteContents();
  • extractContents()

    从 DOM 中删除选中的文档片段,返回删除的文档片段(不保留 DOM 事件)。

    参数:

    示例:
    var selObj = window.getSelection();
    var rangeObj  = selObj.getRangeAt(0);
    rangeObj.extractContents();
  • getBoundingClientRect()

    返回一个 DOMRect 对象,表示整个选区的位置信息。

    参数:

    示例:
    var selObj = window.getSelection();
    var rangeObj  = selObj.getRangeAt(0);
    var boundingRect = rangeObj.getBoundingClientRect();
  • getClientRects()

    返回一个选区内所有元素调用 Element.getClientRects() 方法所得结果的列表。表示选区在屏幕上所占的区域。

    参数:

    示例:
    var selObj = window.getSelection();
    var rangeObj  = selObj.getRangeAt(0);
    var boundingRect = rangeObj.getClientRects();
  • insertNode(newNode)

    在选区开始处插入一个节点。

    参数:

    newNode:  需要插入的节点

    示例:
    insertNode
  • node
    range = document.createRange();
    newNode = document.querySelector("#node");
    range.selectNode(document.querySelector("#insertNode"));
    range.insertNode(newNode);
  • intersectsNode(referenceNode)

    返回一个 Boolean 值,判断指定节点和 Range 对象是否相交。

    参数:

    referenceNode:需要比较的节点

    示例:
    referenceNode
    var selObj = window.getSelection();
    var rangeObj  = selObj.getRangeAt(0);
    referenceNode = document.querySelector("#referenceNode");
    rangeObj.intersectsNode(referenceNode);
  • isPointInRange(referenceNode,offset)

    返回一个 Boolean 值,判断指定节点是否在 Range 对象内。

    参数:

    referenceNode:指定节点  
    offset:在 referenceNode 内的偏移量。    
    如果 referenceNode 是文本节点,offset 表示在该节点中字符的偏移位置。    
    如果 referenceNode 是元素节点,offset 表示在该节点中子元素的偏移位置。

    示例:
    referenceNode
    var selObj = window.getSelection();
    var rangeObj  = selObj.getRangeAt(0);
    referenceNode = document.querySelector("#referenceNode");
    rangeObj.isPointInRange(referenceNode,0);
  • 选区中的多个区域

    一个 Selection 对象表示用户选择的区域(Range 对象)的集合,通常它只包含一个区域,访问方式如下:

    //获取一个 Selection 对象
    var selObj = window.getSelection();
    //获取一个 Range 对象
    var rangeObj  = selObj.getRangeAt(0);

    只有火狐浏览器实现了多个区域,如下图所示:

    JavaScript如何操作光标和选区

    修改选区样式

    使用 ::selection 选择器可以匹配被选中的部分。  
    目前只有一小部分 CSS 属性可以用于 ::selection 选择器:

    示例

    JavaScript如何操作光标和选区

    以上就是关于“JavaScript如何操作光标和选区”这篇文章的内容,相信大家都有了一定的了解,希望小编分享的内容对大家有帮助,若想了解更多相关的知识内容,请关注创新互联行业资讯频道。


    分享标题:JavaScript如何操作光标和选区
    网站URL:http://xdwzjz.cn/article/gphpse.html

    其他资讯

    Top