2020-04-22

语言►JavaScript►Selection

JavaScript中的Selection

本文作者: jsweibo

本文链接: https://jsweibo.github.io/2020/04/22/JavaScript%E4%B8%AD%E7%9A%84Selection/

摘要

本文主要讲述了：

作用
实例属性
原型方法

正文

作用

描述选区

表示用户选择的文本范围
表示插入符号的所在位置

注意：

Selection的底层是基于Range实现的
Range可以用于描述网页外的范围，但Selection只能用于描述网页内的选区
Range可以描述不可见元素的范围，故Selection同样可以描述不可见元素的选区，但Selection.prototype.toString()和Range.prototype.toString()的行为存在差异（详情参见下文）
Range无法准确描述表单控件内的范围，故Selection同样无法准确描述表单控件内的选区

示例：Range可以用于描述网页外的范围，但Selection只能用于描述网页内的选区

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
      window.addEventListener('load', function () {
        let range = new Range();
        let element = document.createElement('div');
        element.textContent = 'hello, jsweibo';
        range.selectNodeContents(element);
        console.log(range);
        console.log(range.toString());
        getSelection().addRange(range);
        console.log(getSelection());
        console.log(getSelection().toString());
      });
    </script>
  </body>
</html>

示例：Range无法准确描述表单控件内的范围，故Selection同样无法准确描述表单控件内的选区

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input
      id="foo"
      type="text"
      placeholder="placeholder"
      value="hello, jsweibo"
    />
    <button type="button">Select Text</button>
    <script>
      window.addEventListener('load', function () {
        document.querySelector('button').addEventListener('click', function () {
          document.querySelector('#foo').focus();
          document.querySelector('#foo').setSelectionRange(3, 10);
          console.log(getSelection().getRangeAt(0));
          console.log(getSelection().getRangeAt(0).toString());
          console.log(getSelection());
          console.log(getSelection().toString());
        });
      });
    </script>
  </body>
</html>

实例属性

anchorNode

起始节点

注意：起始节点即按下鼠标左键时光标所在的节点

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1>hello, jsweibo</h1>
      <p>hi, jsweibo</p>
    </div>
    <style>
      body {
        writing-mode: vertical-rl;
      }
    </style>
    <script>
      document.addEventListener('mouseup', function (event) {
        console.log(getSelection());
        console.log(getSelection().getRangeAt(0));
      });
    </script>
  </body>
</html>

anchorOffset

起始节点中的偏移量

focusNode

终止节点

注意：终止节点即松开鼠标左键时光标所在的节点

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="app">
      <h1>hello, jsweibo</h1>
      <p>hi, jsweibo</p>
    </div>
    <style>
      body {
        writing-mode: vertical-rl;
      }
    </style>
    <script>
      document.addEventListener('mouseup', function (event) {
        console.log(getSelection());
        console.log(getSelection().getRangeAt(0));
      });
    </script>
  </body>
</html>

focusOffset

终止节点中的偏移量

isCollapsed

起点和终点是否为相同的点

rangeCount

包含Range实例的数量

type

选区的类型

Range 范围
Caret 选区被折叠（即插入符号置于某文本上，当前没有选区）
None 取消选区

原型方法

selectAllChildren

将指定节点的所有子节点添加到选区中

注意：指定节点并不在选区中

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="foo">
      <p>1</p>
      <p>2</p>
      <p>3</p>
    </div>
    <script>
      getSelection().selectAllChildren(document.querySelector('#foo'));
      console.log(getSelection().toString());
    </script>
  </body>
</html>

addRange

添加Range实例到选区中

getRangeAt

获取指定序数的Range实例

Range实例的总数为rangeCount

removeRange

从选区中移除将Range实例

removeAllRanges

从选区中移除所有Range实例

collapseToStart

将选区折叠到起点

collapseToEnd

将选区折叠到终点

collapse

将选区折叠到指定的点

toString

选区包含的文本

注意：

由于Selection无法准确描述表单控件内的选区，故Selection().prototype.toString()同样无法准确获取表单控件内的选区所包含的文本，而会返回空字符串
和Range.prototype.toString()不同，Selection.prototype.toString()不能返回display: none、visibility: hidden、hidden的选区内包含的文本，而会返回空字符串。但Selection.prototype.toString()可以返回opacity: 0的选区内包含的文本