2020-04-20

语言►JavaScript►Range

JavaScript中的Range

本文作者: jsweibo

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

摘要

本文主要讲述了：

作用
构造函数
实例属性
原型方法

正文

作用

描述范围

注意：

Range可以描述网页外的范围
Range可以描述不可见元素的范围
Range无法准确描述表单控件内的范围

示例：Range可以描述网页外的范围

<!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());
      });
    </script>
  </body>
</html>

示例：Range可以描述不可见元素的范围

<!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>
    <span id="foo" class="">hello, jsweibo</span>
    <style>
      .displayNone {
        display: none;
      }
      .visibilityHidden {
        visibility: hidden;
      }
      .opacityZero {
        opacity: 0;
      }
    </style>
    <script>
      window.addEventListener('load', function () {
        let range = new Range();
        range.selectNodeContents(document.querySelector('#foo'));
        console.log(range);
        console.log(range.toString());
      });
    </script>
  </body>
</html>

示例：Range无法准确描述表单控件内的范围

<!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());
        });
      });
    </script>
  </body>
</html>

构造函数

new Range()

实例属性

startContainer

起始节点

注意：和Selection中的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>

startOffset

起始节点中的偏移量

endContainer

终止节点

注意：和Selection中的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>

endOffset

终止节点中的偏移量

collapsed

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

commonAncestorContainer

起始节点和终止节点共有的父节点

原型方法

setStart

设置起点及偏移

如果起点不为文本节点，偏移值表示起点的子节点列表的索引。即startNode.childNodes的索引

setEnd

设置终点及偏移

如果终点不为文本节点，偏移值表示终点的子节点列表的索引。即endNode.childNodes的索引

示例：

<!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>111</div>
    <div>222</div>
    <div>
      <p>333</p>
      <p>444</p>
    </div>
    <script>
      let range = new Range();
      range.setStart(document.querySelector('div:nth-child(1)'), 0);
      range.setEnd(document.querySelector('div:nth-child(3)'), 2);
      console.log(range.toString());
    </script>
  </body>
</html>

setStartBefore

在指定元素前设置起点

setStartAfter

在指定元素后设置起点

setEndBefore

在指定元素前设置终点

setEndAfter

在指定元素后设置终点

示例：

<!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>
    <p>111</p>
    <p>222</p>
    <p>333</p>
    <script>
      let range = new Range();
      range.setStartAfter(document.querySelector('p:nth-child(1)'));
      range.setEndBefore(document.querySelector('p:nth-child(3)'));
      console.log(range.toString());
    </script>
  </body>
</html>